diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db index ceafbfc09..81553cfa8 100644 Binary files a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db and b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/DEVELOPMENT.md b/packages/igniteui-mcp/igniteui-doc-mcp/DEVELOPMENT.md index 60e12ca7e..b6702c805 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/DEVELOPMENT.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/DEVELOPMENT.md @@ -123,13 +123,14 @@ To use the server with an MCP client (VS Code, Claude Desktop, Cursor, etc.), ad 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 +export → inject → rewrite-api-urls → diff → compress (changed only) → update baseline → build:db ``` | Step | Input | Output | Requires API | |------|-------|--------|:---:| | Export | Source docs (docfx/xplat) | `dist/docs_processing//` | No | | Inject | `dist/docs_processing//` | `dist/docs_prepeared//` | No | +| Rewrite API Links | `dist/docs_prepeared//` (in place) | `dist/docs_prepeared//` + `_rewrite_log.csv` | No | | Diff | `dist/docs_prepeared//` vs `docs_baseline//` | `dist/diff-manifest.json` | No | | Compress | `dist/docs_prepeared//` (changed only) | `dist/docs_final//` | Yes | | Update Baseline | `dist/docs_prepeared//` | `docs_baseline//` | No | @@ -142,7 +143,9 @@ The **diff** step compares the fresh inject output against a tracked baseline (` **Inject** — Replaces `` 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. +**Rewrite API Links** — Deterministically replaces `https://www.infragistics.com/.../classes/...html` URLs with `mcp:get_api_reference?platform=

&component=[&member=]` references that the MCP server resolves at call time. Handles all four URL shapes per platform (bare `/docs/` and `/api/docs/` with package prefixes, Blazor FQN `.html`, Web Components `dock-manager` subpath) and decodes docfx synthetic anchors (e.g. `#IgniteUI_Blazor_Controls_IgbGrid_Sort` → `member=Sort`). Recovers PascalCase canonical names from lowercased URL segments via the `ApiDocLoader` index. Sass/theming mixin URLs, MDN, and other non-API links pass through untouched. Writes `_rewrite_log.csv` listing any unknown-component skips. See `docs/url_rewrite_plan.md`. + +**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. The prompt also requires `mcp:get_api_reference?…` URIs to be preserved verbatim so the rewritten refs survive compression. 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//` 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. @@ -174,6 +177,7 @@ npm run pipeline:blazor:full # Angular npm run export:angular # parse toc.yml, expand grid templates, inject metadata npm run inject:angular # replace tags with TS/HTML/SCSS source code +npm run rewrite-api-urls:angular # replace infragistics.com API URLs with mcp:get_api_reference refs 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 @@ -183,6 +187,7 @@ npm run validate:angular # LLM-as-Judge quality scoring 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 tags with Razor/C#/CSS source code +npm run rewrite-api-urls:blazor # replace infragistics.com API URLs with mcp:get_api_reference refs 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 @@ -192,6 +197,7 @@ npm run validate:blazor # LLM-as-Judge quality scoring 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 tags with TSX/CSS source code +npm run rewrite-api-urls:react # replace infragistics.com API URLs with mcp:get_api_reference refs 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 @@ -201,6 +207,7 @@ npm run validate:react # LLM-as-Judge quality scoring 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 tags with HTML/TS/CSS source code +npm run rewrite-api-urls:webcomponents # replace infragistics.com API URLs with mcp:get_api_reference refs 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 @@ -235,6 +242,41 @@ npx tsx scripts/inject-angular-docs.ts No CLI parameters. +### rewrite-api-links.ts + +Deterministically rewrites `infragistics.com` API documentation URLs in the prepared docs into `mcp:get_api_reference?...` references resolvable by the MCP server's `get_api_reference` tool. One shared script handles all four platforms; only the URL regex differs per platform. Loads the platform's `ApiDocLoader` once to build a `lowercase → canonical` component-name index, so lowercased URL segments like `igxgridcomponent` come back as `IgxGridComponent`. Fragments are passed through as `&member=` (Blazor docfx synthetic anchors are decoded to bare member names — `#IgniteUI_Blazor_Controls_IgbGrid_Sort` → `member=Sort`). Sass/theming mixin URLs, MDN, and other non-API links pass through untouched. Doc-page URLs under `/components/...` are also skipped — only `/classes/`, `/interfaces/`, and `/enums/` paths are matched. + +```bash +npm run rewrite-api-urls:angular +npm run rewrite-api-urls:react +npm run rewrite-api-urls:webcomponents +npm run rewrite-api-urls:blazor +# or directly: +npx tsx scripts/rewrite-api-links.ts --platform [options] +``` + +| Parameter | Description | Default | +|-----------|-------------|---------| +| `--platform ` | **(Required)** Platform to rewrite (`angular`, `react`, `webcomponents`, `blazor`) | none | +| `--input

` | Override input directory | `dist/docs_prepeared//` | +| `--dry-run` | Count and print rewrites without writing files | off | + +**Output:** rewrites files in place. Writes `_rewrite_log.csv` listing any URLs that were skipped because their component segment could not be resolved against the API index (columns: `file,url,reason`). Prints a summary line: `rewrote links across files; skipped (unknown component)`. + +**Example output rewrite:** + +``` +- [IgcCheckbox](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccheckboxcomponent.html#checked) +``` + +becomes + +``` +- [IgcCheckbox](mcp:get_api_reference?platform=webcomponents&component=IgcCheckboxComponent&member=checked) +``` + +See `docs/url_rewrite_plan.md` for the full design — URL patterns per platform, fragment-handling rules, and the matching `member` extension to `get_api_reference` (Part 1) that consumes these refs. + ### 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`. @@ -504,7 +546,7 @@ npx @modelcontextprotocol/inspector ig mcp # via CLI (after build:mcp- | `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 | +| `get_api_reference` | `platform` (required), `component` (required), `section?`, `member?` | Retrieve API reference for a component or class. With no optional args, returns the full entry. Pass `section="properties\|methods\|events"` for one section, or `member=""` to return just one property/method/event line. `member` takes precedence over `section`. Also tolerates `component="Name#member"` shorthand. | | `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 @@ -529,6 +571,33 @@ Returns framework-specific setup guides for creating a new Ignite UI project. } ``` +#### get_api_reference — member-targeted lookup + +`get_api_reference` accepts an optional `member` parameter that returns just one property, method, or event line from the API entry instead of the full document. This is what the `rewrite-api-urls` step generates refs for — `mcp:get_api_reference?platform=webcomponents&component=IgcCheckboxComponent&member=checked` resolves to a ~130-character response instead of the ~1.2 KB full entry. + +| Parameter | Required | Description | +|-----------|----------|-------------| +| `platform` | Yes | `angular`, `react`, `webcomponents`, or `blazor` | +| `component` | Yes | Exact component or class name (case-insensitive). Also accepts `Name#member` shorthand — the `#member` suffix is split off into the `member` field when `member` is not already supplied. | +| `section` | No | `properties`, `methods`, `events`, or `all` (default). Ignored when `member` is set. | +| `member` | No | Property/method/event name (e.g. `checked`, `click`, `igcChange`). Returns one line. Returns `isError` if the member is not found. | + +**Examples:** + +```json +// Full entry +{ "platform": "webcomponents", "component": "IgcCheckboxComponent" } + +// One section only +{ "platform": "angular", "component": "IgxGridComponent", "section": "events" } + +// One member only +{ "platform": "webcomponents", "component": "IgcCheckboxComponent", "member": "checked" } + +// Shorthand — same effect as the previous example +{ "platform": "webcomponents", "component": "IgcCheckboxComponent#checked" } +``` + ## Directory Structure ``` @@ -553,6 +622,7 @@ igniteui-doc-mcp/ scripts/ # Pipeline scripts build-db.ts # Build SQLite DB from compressed docs diff-docs.ts # Compare prepared docs against baseline (SHA-256) + rewrite-api-links.ts # Rewrite infragistics.com API URLs → mcp:get_api_reference refs update-baseline.ts # Sync baseline after successful compression src/ # MCP server source index.ts # MCP server (sql.js + FTS4 queries) @@ -583,6 +653,7 @@ igniteui-doc-mcp/ | `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/url_rewrite_plan.md` | URL → MCP-ref rewriter — `member`-aware `get_api_reference` + deterministic link rewrite step (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/db/igniteui-docs.db b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db index ceafbfc09..81553cfa8 100644 Binary files a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db and b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db differ 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 index 10c672b45..4042e3b11 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/accordion.md @@ -18,7 +18,7 @@ Users are enabled to interact and navigate among a list of items, such as thumbn 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. +In it, you can see how to define an `igx-accrodion` and its [expansion panels](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). The sample also demonstrates the two types of expansion behavior. The switch button sets the [singleBranchExpand](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) property to toggle between single and multiple branches to be expanded at a time. ```typescript import { Component } from '@angular/core'; @@ -207,12 +207,12 @@ Now that you have the Ignite UI for Angular Accordion module or directives impor ## 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. +Each section in the [IgxAccordionComponent](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) is defined using an [expansion panel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). +Panels provide [disabled](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelHeaderComponent&member=disabled), [collapsed](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent&member=collapsed) and [animationSettings](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent&member=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. +The accordion wraps all [`igx-expansion-panel`s](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) declared inside it. ```html @@ -235,7 +235,7 @@ The accordion wraps all [`igx-expansion-panel`s](https://www.infragistics.com/pr ``` -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`. +Using the [panels](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=panels) accessor you can get a reference to the collection containing all [expansion panels](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) children of the `igx-accordion`. ```typescript @ViewChild('accordion', { static: true }) @@ -244,11 +244,11 @@ 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. +As demonstrated above, the [singleBranchExpand](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=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). +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](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) level. This gives users the ability to disable animations for all sections at once via the animations property of the [IgxAccordionComponent](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent). With regards to animation, you have two options. First, you could set the `animationSettings` property on the accordion component: @@ -289,9 +289,9 @@ The following snippet demonstrates passing the animation settings to the compone ``` >[!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`. +> If you would like to turn off the animation for the [IgxAccordionComponent](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) 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. +Alternatively, you have the ability to set every single [expansion panel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent)`s [animationSettings](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent&member=animationSettings) input. ```html @@ -314,15 +314,15 @@ Alternatively, you have the ability to set every single [expansion panel](https: ``` -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. +Using the [collapseAll](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=collapseAll) and [expandAll](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=expandAll) methods you can respectively collapse and expand all [IgxExpansionPanels](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) of the [IgxAccordion](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) 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). +> If [singleBranchExpand](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=singleBranchExpand) property is set to _true_ calling [expandAll](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent&member=expandAll) method would expand only the last [panel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). ### 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). +With the Angular [Accordion component](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent), 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](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). ```typescript import { Component } from '@angular/core'; @@ -486,7 +486,7 @@ igx-expansion-panel { ### 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). +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](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) is achieved by adding an [accordion](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) inside the body of an [expansion panel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). ```html @@ -717,7 +717,7 @@ igx-expansion-panel { ## 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. +The [IgxAccordionComponent](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) navigation is compliant with W3C accessibility standards and convenient to use. **Key Combinations** @@ -734,7 +734,7 @@ The [IgxAccordionComponent](https://www.infragistics.com/products/ignite-ui-angu ## 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). +The [`accordion`](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) serves only as a container for the underlying [`panels`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent). 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: @@ -864,10 +864,10 @@ $custom-panel-theme: expansion-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) +- [IgxAccordion API](mcp:get_api_reference?platform=angular&component=IgxAccordionComponent) +- [IgxExpansionPanel API](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) +- [IgxExpansionPanelHeader API](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelHeaderComponent) +- [IgxExpansionPanelBody API](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelBodyComponent) - [IgxExpansionPanel Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-igx-expansion-panel) 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 index 9bb9959da..ed0a07240 100644 --- 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 @@ -215,11 +215,11 @@ To initialize and position the Action Strip correctly, it needs to be inside a r ``` -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. +By default, the Action Strip will not be visible, but this can be configured via the [`hidden`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent&member=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. +For scenarios where more than three action items will be shown, it is best to use [`IgxActionStripMenuItem`](mcp:get_api_reference?platform=angular&component=IgxActionStripMenuItemDirective) 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
@@ -363,8 +363,8 @@ export class ActionStripParagraphMenuComponent { ### 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. +The Action Strip can change its parent container, which is possible by changing the [`context`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent&member=context). +The best way to do so is via the [`show`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent&member=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`. @@ -374,8 +374,8 @@ The best way to do so is via the [`show`](https://www.infragistics.com/products/ 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. +- [`IgxGridEditingActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) - 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`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) - 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 @@ -389,7 +389,7 @@ This can be utilized via grid action components and we are providing two default ``` > [!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`. +> These components inherit [`IgxGridActionsBaseDirective`](mcp:get_api_reference?platform=angular&component=IgxGridActionsBaseDirective) 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. @@ -586,7 +586,7 @@ $custom-strip: action-strip-theme( 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) +- [`IgxActionStripComponent API`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent) The following built-in CSS styles helped us achieve this Action Strip layout: @@ -594,10 +594,10 @@ The following built-in CSS styles helped us achieve this Action Strip layout: 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) +- [`IgxGridActionsBaseDirective`](mcp:get_api_reference?platform=angular&component=IgxGridActionsBaseDirective) +- [`IgxGridPinningActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) +- [`IgxGridEditingActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) +- [`IgxDividerDirective`](mcp:get_api_reference?platform=angular&component=IgxDividerDirective)
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 index ae3822226..420a27d57 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/autocomplete.md @@ -12,7 +12,7 @@ Angular Autocomplete is a search box directive that enables users to easily find

-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. +The [`igxAutocomplete`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) directive provides a way to enhance a text input by showing an [`igxDropDown`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) 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.

## Angular Autocomplete Example @@ -87,7 +87,7 @@ 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: +The next step is to import the **IgxAutocompleteModule** and **IgxDropDownModule** in our **app.module**. If [`igxAutocomplete`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) is applied on an [igxInput](mcp:get_api_reference?platform=angular&component=IgxInputDirective), the **igxInputGroupModule** is also required: ```typescript // app.module.ts @@ -186,11 +186,11 @@ export class AutocompletePipeStartsWith implements PipeTransform { ``` >[!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. +>The [`igxAutocomplete`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) uses the [`igxDropDown`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) 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: +You can disable the Angular autocomplete by using the [`IgxAutocompleteDisabled`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective&member=disabled) input: ```html @@ -203,7 +203,7 @@ You can disable the Angular autocomplete by using the [`IgxAutocompleteDisabled` ### 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). +The `igx-autocomplete` dropdown positioning, scrolling strategy, and outlet can be configured using the [`IgxAutocompleteSettings`](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective&member=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: @@ -414,9 +414,9 @@ Take a look at the [`igxInputGroup`](input-group.md#styling) and the [`igxDropdo
-- [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) +- [IgxAutocompleteDirective](mcp:get_api_reference?platform=angular&component=IgxAutocompleteDirective) +- [IgxDropDownComponent](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) +- [IgxInputGroupComponent](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) ## Theming Dependencies 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 index 13b49709e..9bb1d6954 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/avatar.md @@ -131,7 +131,7 @@ We can change the avatar shape through the `shape` attribute setting its value t ### 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: +To get a simple avatar with [`initials`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent&member=initials) (i.e. JS for 'Jack Sock'), add the following code inside the component template: ```html @@ -183,7 +183,7 @@ If all went well, you should see something like the following in the browser: ### 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. +Analogically, the avatar can display an icon via the [`icon`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent&member=icon) property. Currently all icons from the material icon set are supported. ```html
-- [IgxAvatarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxavatarcomponent.html) +- [IgxAvatarComponent](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent) ## Theming Dependencies 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 index b982098f9..5b3035425 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/badge.md @@ -299,7 +299,7 @@ export class BadgeDotSampleComponent { } ### 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. +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`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent) and [`igx-avatar`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent) components. For a container, [`igx-list`](mcp:get_api_reference?platform=angular&component=IgxListComponent) is used. To continue, include all needed modules and import them in the **app.module.ts** file. @@ -320,9 +320,9 @@ 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), [`value`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbadgecomponent.html#value), 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. +>The [`igx-badge`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent) has [`icon`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=icon), [`value`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=value), and [`type`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=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`](mcp:get_api_reference?platform=angular&component=Type&member=default), [`info`](mcp:get_api_reference?platform=angular&component=Type&member=info), [`success`](mcp:get_api_reference?platform=angular&component=Type&member=success), [`warning`](mcp:get_api_reference?platform=angular&component=Type&member=warning), or [`error`](mcp:get_api_reference?platform=angular&component=Type&member=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_. +In our sample, [`icon`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=icon) and [`type`](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent&member=type) are bound to model properties named _icon_ and _type_. Next, we're adding the contacts in our template: @@ -638,11 +638,11 @@ At the end your badges should look like this:
-- [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) +- [IgxAvatarComponent](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent) +- [IgxBadgeComponent](mcp:get_api_reference?platform=angular&component=IgxBadgeComponent) - [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) +- [IgxListComponent](mcp:get_api_reference?platform=angular&component=IgxListComponent) +- [IgxListItemComponent](mcp:get_api_reference?platform=angular&component=IgxListItemComponent) - [IgxBadgeType](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/index.html#IgxBadgeType) ## Theming Dependencies 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 index 86aa6a608..4152e99b3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/banner.md @@ -118,7 +118,7 @@ Now that you have the Ignite UI for Angular Banner module or directives imported ### 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. +In order to display the banner component, use its [`open()`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=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 @@ -139,7 +139,7 @@ In order to display the banner component, use its [`open()`](https://www.infragi ## 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. +The [`IgxBannerComponent`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent) allows templating of its content while still sticking as closely as possible to the material design banner guidelines. ### Changing the banner message @@ -183,7 +183,7 @@ If you want to use an `igx-icon` in your banner message, wrap it in a `span` tag ### 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. +The `IgxBannerModule` exposes a directive for templating the banner buttons - [`IgxBannerActionsDirective`](mcp:get_api_reference?platform=angular&component=IgxBannerActionsDirective). This directive allows you to override the default banner button (`Dismiss`) and add user-defined custom actions. ```html @@ -254,7 +254,7 @@ export class BannerSample2Component implements OnInit { ### 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. +The banner component comes with the [`animationSettings`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=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: @@ -343,7 +343,7 @@ export class BannerSample3Component implements OnInit { ### 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. +The banner component emits events when changing its state - [`opening`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=opening) and [`opened`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=opened) are called when the banner is shown (before and after, resp.), while [`closing`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=closing) and [`closed`](mcp:get_api_reference?platform=angular&component=IgxBannerComponent&member=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`. @@ -640,16 +640,16 @@ igx-banner {
-- [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](mcp:get_api_reference?platform=angular&component=IgxBannerComponent) +- [IgxBannerActionsDirective](mcp:get_api_reference?platform=angular&component=IgxBannerActionsDirective) - [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) +- [IgxCardComponent](mcp:get_api_reference?platform=angular&component=IgxCardComponent) +- [IgxIconComponent](mcp:get_api_reference?platform=angular&component=IgxIconComponent) +- [IgxNavbarComponent](mcp:get_api_reference?platform=angular&component=IgxNavbarComponent) +- [IgxToastComponent](mcp:get_api_reference?platform=angular&component=IgxToastComponent) ## Theming Dependencies 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 index 41bfc91c3..449f5cfb1 100644 --- 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 @@ -17,7 +17,7 @@ The Ignite UI for Angular bullet graph component provides you with the ability t ## 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. +The following sample demonstrates how setting multiple properties on the same [`IgxBulletGraphComponent`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent) can transform it to completely different bullet graph. ```typescript import { NgModule } from "@angular/core"; @@ -356,7 +356,7 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css
-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 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`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=transitionDuration) property. The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more. ## Dependencies @@ -370,7 +370,7 @@ npm install --save igniteui-angular-gauges ## 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: +The [`IgxBulletGraphComponent`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent) requires the following modules: ```ts // app.module.ts @@ -529,7 +529,7 @@ 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). +The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the [`value`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=value) appear with a lower opacity. A good example is if [`value`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=value) is 50 and [`highlightValue`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=highlightValue) is set to 25. This would represent a performance of 50% regardless of what the value of [`targetValue`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=targetValue) is set to. To enable this first set [`highlightValueDisplayMode`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=highlightValueDisplayMode) to Overlay and then apply a [`highlightValue`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=highlightValue) to something lower than [`value`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=value). ```html @@ -152,7 +152,7 @@ Use the [`igx-buttongroup`](https://www.infragistics.com/products/ignite-ui-angu ### 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. +Use the [`alignment`](mcp:get_api_reference?platform=angular&component=IgxButtonGroupComponent&member=alignment) input property to set the orientation of the buttons in the button group. ```typescript //sample.component.ts @@ -211,7 +211,7 @@ igx-buttongroup{ ### 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: +In order to configure the `igx-buttongroup` selection, you could use its [selectionMode](mcp:get_api_reference?platform=angular&component=IgxButtonGroupComponent&member=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. @@ -341,7 +341,7 @@ igx-buttongroup{ ### 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. +Use the [`values`](mcp:get_api_reference?platform=angular&component=IgxButtonGroupComponent&member=values) input property to set an array of customized buttons in the button group. ```typescript // sample.component.ts @@ -748,9 +748,9 @@ At the end your button group should look like this:
-- [IgxButtonGroupComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttongroupcomponent.html) +- [IgxButtonGroupComponent](mcp:get_api_reference?platform=angular&component=IgxButtonGroupComponent) - [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) +- [IgxButtonDirective](mcp:get_api_reference?platform=angular&component=IgxButtonDirective) - [IgxButton Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-button-theme) ## Theming Dependencies 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 index 357435aee..0376681f8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/button.md @@ -112,7 +112,7 @@ Now that you have the Ignite UI for Angular Button module or directive imported, ### 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`. +Use the [`igxButton`](mcp:get_api_reference?platform=angular&component=IgxButtonDirective) 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 @@ -205,7 +205,7 @@ The `disabled` property can be used to make a button unclickable: ### 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: +The [`igxRipple`](mcp:get_api_reference?platform=angular&component=IgxRippleDirective) 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 + ``` @@ -1972,11 +1972,11 @@ Learn more about it in the [Size](display-density.md) article.
-- [IgxButtonDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxbuttondirective.html) +- [IgxButtonDirective](mcp:get_api_reference?platform=angular&component=IgxButtonDirective) - [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) +- [IgxRippleDirective](mcp:get_api_reference?platform=angular&component=IgxRippleDirective) +- [IgxIconButtonDirective](mcp:get_api_reference?platform=angular&component=IgxIconButtonDirective) +- [IgxButtonGroupComponent](mcp:get_api_reference?platform=angular&component=IgxButtonGroupComponent) ## Additional Resources 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 index aec1d0bc7..ad9e5db0d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/calendar.md @@ -72,7 +72,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta 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: +> The [**IgxCalendarComponent**](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent) 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 @@ -114,7 +114,7 @@ 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. +> The [`IgxCalendarComponent`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent) 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 @@ -131,7 +131,7 @@ Instantiating the `IgxCalendarComponent` is as easy as placing its selector elem ### 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: +We can easily change the default mode using the [`selection`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=selection) property: ```html @@ -224,7 +224,7 @@ export class CalendarSample8Component { } ### 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). +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`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=locale), [`formatOptions`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=formatoptions), [`formatViews`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=formatViews), [`weekStart`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=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: @@ -348,9 +348,9 @@ export class CalendarSample2Component implements OnInit{ ### 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. +This section demonstrates the usage of [`disabledDates`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=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. +The [`DateRangeType`](mcp:get_api_reference?platform=angular&component=DateRangeType) 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: @@ -440,9 +440,9 @@ export class CalendarSample6Component implements OnInit{ ### 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. +The [`specialDates`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=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): +Let's add some `specialDates` to our `igxCalendar`. In order to do this, we have to create a [`DateRangeDescriptor`](mcp:get_api_reference?platform=angular&component=DateRangeDescriptor) item of type [`DateRangeType.Specific`](mcp:get_api_reference?platform=angular&component=DateRangeType&member=specific) and pass an array of dates as a [`dateRange`](mcp:get_api_reference?platform=angular&component=DateRangeDescriptor&member=dateRange): ```typescript export class CalendarSample7Component { @@ -556,7 +556,7 @@ export class CalendarSample7Component { ### 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. +You can now use [`showWeekNumbers`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=showWeekNumbers) input to show the week numbers for both Calendar and DatePicker components. ```html @@ -605,9 +605,9 @@ export class CalendarSample1Component { } 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. +- [`selected`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=selected) - emitted when selecting date(s) in the calendar. +- [`viewDateChanged`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=viewDateChanged) - emitted every time when the presented month/year is changed - for example after navigating to the `next` or `previous` month. +- [`activeViewChanged`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=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 @@ -618,7 +618,7 @@ Let's explore the events emitted by the 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: +The [`selected`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=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 @@ -753,7 +753,7 @@ export class CalendarSample3Component { 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) +- Angular Calendar Days View - [`igx-days-view`](mcp:get_api_reference?platform=angular&component=IgxDaysViewComponent) ```typescript @@ -792,7 +792,7 @@ export class CalendarDaysViewComponent { } ``` -- Angular Calendar Month View - [`igx-months-view`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxmonthsviewcomponent.html) +- Angular Calendar Month View - [`igx-months-view`](mcp:get_api_reference?platform=angular&component=IgxMonthsViewComponent) ```typescript @@ -831,7 +831,7 @@ export class CalendarMonthsViewComponent { } ``` -- Angular Calendar Year View - [`igx-years-view`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxyearsviewcomponent.html) +- Angular Calendar Year View - [`igx-years-view`](mcp:get_api_reference?platform=angular&component=IgxYearsViewComponent) ```typescript @@ -932,7 +932,7 @@ When an `year` inside the decade view is focused, use: ## 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. +Multi-view calendar supports all three types of selection. Use the [`monthsViewNumber`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent&member=hideOutsideDays) property. Keyboard navigation moves to next/previous months when those are in view. ```typescript @@ -1777,10 +1777,10 @@ At the end your calendar should look like this:
-- [IgxCalendarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html) +- [IgxCalendarComponent](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent) - [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) +- [DateRangeType](mcp:get_api_reference?platform=angular&component=DateRangeType) +- [DateRangeDescriptor](mcp:get_api_reference?platform=angular&component=DateRangeDescriptor) ## Additional Resources 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 index 10e7052f5..22402c741 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/card.md @@ -787,7 +787,7 @@ The card component is capable of displaying more different layouts worth explori 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) +- [`IgxCardComponent API`](mcp:get_api_reference?platform=angular&component=IgxCardComponent) The following built-in CSS styles helped us achieve this card layout: @@ -795,10 +795,10 @@ The following built-in CSS styles helped us achieve this card layout: 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) +- [`IgxAvatarComponent`](mcp:get_api_reference?platform=angular&component=IgxAvatarComponent) +- [`IgxIconComponent`](mcp:get_api_reference?platform=angular&component=IgxIconComponent) +- [`IgxButtonDirective`](mcp:get_api_reference?platform=angular&component=IgxButtonDirective) +- [`IgxDividerDirective`](mcp:get_api_reference?platform=angular&component=IgxDividerDirective) Styles: 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 index c9cfade61..323ff8213 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/carousel.md @@ -198,7 +198,7 @@ export class HomeComponent {
-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`. +By default, the Carousel in Angular has its [`loop`](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=loop) input to `false`. ```html @@ -206,7 +206,7 @@ By default, the Carousel in Angular has its [`loop`](https://www.infragistics.co ``` -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`. +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`](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=indicatorsOrientation) property and assign it to `start`. ```html @@ -214,7 +214,7 @@ To keep track of each slide index, the carousel has indicators that are position ``` -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. +By default, the [`IgxCarousel`](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent) displays its navigation buttons and indicators. Use the [`indicators`](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=indicators) property to hide the indicators and the [`navigation`](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=navigation) property to hide the navigation buttons. ```html @@ -222,7 +222,7 @@ By default, the [`IgxCarousel`](https://www.infragistics.com/products/ignite-ui- ``` -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. +The [`IgxCarousel`](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent) supports vertical mode. Use the [`vertical`](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=vertical) property to enable it. ```html @@ -234,7 +234,7 @@ The [`IgxCarousel`](https://www.infragistics.com/products/ignite-ui-angular/docs
-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: +To add Angular custom carousel indicators we will have to use the [IgxCarouselIndicatorDirective](mcp:get_api_reference?platform=angular&component=IgxCarouselIndicatorDirective), like this: ```html ... @@ -246,7 +246,7 @@ To add Angular custom carousel indicators we will have to use the [IgxCarouselIn ### 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: +To achieve this we will use the [IgxCarouselPrevButtonDirective](mcp:get_api_reference?platform=angular&component=IgxCarouselPrevButtonDirective) and [IgxCarouselNextButtonDirective](mcp:get_api_reference?platform=angular&component=IgxCarouselNextButtonDirective) directives: ```html ... @@ -446,7 +446,7 @@ Animated slide transitions provide the end-users a nice experience when interact 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: +The animations are configured through the [animationType](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=animationType) input, like this: ```html @@ -618,7 +618,7 @@ The navigation in the carousel can be handled by the user through navigation but
-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`. +By default, the carousel can be used on any touch-enabled device. This is optional and can be changed by setting the [gesturesSupport](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=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)). @@ -638,16 +638,16 @@ The carousel [animations](carousel.md#angular-carousel-animations) are fully sup
-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. +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](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=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`. +>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](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=pause) property to `false`. ## Advanced Example
-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. +Let's create a fully automated carousel with looping enabled. Each slide will be synced with a [list item](mcp:get_api_reference?platform=angular&component=IgxListItemComponent) 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: @@ -674,7 +674,7 @@ Our carousel will look like this in the template: 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): +adding [IgxList](mcp:get_api_reference?platform=angular&component=IgxListComponent): ```html ... @@ -689,7 +689,7 @@ adding [IgxList](https://www.infragistics.com/products/ignite-ui-angular/docs/ty ... ``` -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: +syncing the components by hooking up on carousel's [`slideChanged`](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=slideChanged) and list's [itemClicked](mcp:get_api_reference?platform=angular&component=IgxListComponent&member=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. @@ -1329,7 +1329,7 @@ At the end your carousel should look like this: - [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-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](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent&member=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. @@ -1351,11 +1351,11 @@ At the end your carousel should look like this:
-- [IgxCarouselComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcarouselcomponent.html) +- [IgxCarouselComponent](mcp:get_api_reference?platform=angular&component=IgxCarouselComponent) - [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) +- [IgxSlideComponent](mcp:get_api_reference?platform=angular&component=IgxSlideComponent) +- [IgxListComponent](mcp:get_api_reference?platform=angular&component=IgxListComponent) +- [IgxListItemComponent](mcp:get_api_reference?platform=angular&component=IgxListItemComponent) ## Theming Dependencies 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 index 60941a5c6..f3e252e5a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/checkbox.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/checkbox.md @@ -104,8 +104,8 @@ To make the checkbox in the demo, add the following code inside the component te ### 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. +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`](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent&member=checked) property to the underlying task object done property. Analogically, you can bind the [`value`](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent&member=value) property to description. +Optionally, you can also bind the [`change`](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent&member=change) event and add some custom logic in the provided event handler method. ```typescript // tasks.component.ts @@ -187,7 +187,7 @@ igx-checkbox { ### 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: +You can position the label using the checkbox's [`labelPosition`](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent&member=labelPosition) property: ```html @@ -197,7 +197,7 @@ If the `labelPosition` is not set, the label will be positioned after the checkb ### 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: +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`](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent&member=indeterminate) property: ```html @@ -585,9 +585,9 @@ At the end your checkbox should look like this:
-- [IgxCheckboxComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcheckboxcomponent.html) +- [IgxCheckboxComponent](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) - [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) +- [LabelPosition](mcp:get_api_reference?platform=angular&component=LabelPosition) ## Theming Dependencies 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 index 84746d43f..71d8558d3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chip.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/chip.md @@ -8,7 +8,7 @@ _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. +[`The Angular Chip component`](mcp:get_api_reference?platform=angular&component=IgxChipComponent) 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 @@ -146,7 +146,7 @@ Now that you have the Ignite UI for Angular Chips module or directives imported, ## 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. +The [`IgxChipComponent`](mcp:get_api_reference?platform=angular&component=IgxChipComponent) has an [`id`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=id) input property so that the different chip instances can be easily distinguished. If an [`id`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=id) is not provided, it will be automatically generated. ```html @@ -158,7 +158,7 @@ The [`IgxChipComponent`](https://www.infragistics.com/products/ignite-ui-angular 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`. +Selection can be enabled by setting the [`selectable`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=selectable) input property to `true`. When selecting a chip, the [`selectedChanging`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=selectedChanging) event is fired. It provides the new [`selected`](mcp:get_api_reference?platform=angular&component=IChipSelectEventArgs&member=selected) value so you can get the new state and the original event in [`originalEvent`](mcp:get_api_reference?platform=angular&component=IChipSelectEventArgs&member=originalEvent) that triggered the selection change. If this is not done through user interaction but instead is done by setting the [`selected`](mcp:get_api_reference?platform=angular&component=IChipSelectEventArgs&member=selected) property programmatically, the [`originalEvent`](mcp:get_api_reference?platform=angular&component=IChipSelectEventArgs&member=originalEvent) argument has a value of `null`. ```html @@ -174,7 +174,7 @@ Selection can be enabled by setting the [`selectable`](https://www.infragistics. 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. +Removing can be enabled by setting the [`removable`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=removable) input to `true`. When enabled, a remove button is rendered at the end of the chip. When removing a chip, the [`remove`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=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. @@ -196,7 +196,7 @@ public chipRemoved(event: IBaseChipEventArgs) { ### 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. +Dragging can be enabled by setting the [`draggable`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=draggable) input to `true`. When enabled, you can click and drag the chip around. ```html @@ -206,7 +206,7 @@ Dragging can be enabled by setting the [`draggable`](https://www.infragistics.co ``` > [!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). +> To reorder the chips you need to handle the event using the [`IgxChipsAreaComponent`](mcp:get_api_reference?platform=angular&component=IgxChipsAreaComponent).
@@ -219,7 +219,7 @@ Dragging can be enabled by setting the [`draggable`](https://www.infragistics.co ``` -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: +Then, we need to add the `chipList` and the function, that handles the [`remove`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=remove) event: ```ts import { IBaseChipEventArgs } from 'igniteui-angular/chips'; @@ -334,7 +334,7 @@ igx-chip { ### Chip Templates -All of the [`IgxChipComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html)'s elements are templatable. +All of the [`IgxChipComponent`](mcp:get_api_reference?platform=angular&component=IgxChipComponent)'s elements are templatable. You can template the `prefix` and the `suffix` of the chip, using the `IgxPrefix` and the `IgxSuffix` directives: @@ -365,7 +365,7 @@ You can customize the size of the chip, using the [`--ig-size`] CSS variable. By ``` -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. +You can customize the `select icon`, using the [`selectIcon`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=selecticon) input. It accepts values of type `TemplateRef` and overrides the default icon while retaining the same functionality. Selecting Custom @@ -380,7 +380,7 @@ You can customize the `select icon`, using the [`selectIcon`](https://www.infrag ``` -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. +You can customize the `remove icon`, using the [`removeIcon`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=removeIcon) input. It takes a value of type `TemplateRef` and renders it instead of the default remove icon. Remove Icons @@ -414,7 +414,7 @@ To create the demo sample below, we will use the features above: ``` -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: +Then, we need to add the `chipList` and the function, that handles the [`remove`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=remove) event: ```ts import { IBaseChipEventArgs } from 'igniteui-angular/chips'; @@ -530,13 +530,13 @@ igx-chip { ## 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.). +The [`IgxChipsAreaComponent`](mcp:get_api_reference?platform=angular&component=IgxChipsAreaComponent) is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation, etc.). ### Reorder Chips 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. +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`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxChipsAreaComponent&member=reorder) event that returns the new order when a chip is dragged over another chip. ```html @@ -578,13 +578,13 @@ The chip can be focused using the `Tab` key or by clicking on it. When the chips Space Key - - DELETE - 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. - - SHIFT + LEFT - 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. - - SHIFT + RIGHT - 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. + - DELETE - Triggers the [`remove`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=remove) event for the [`igxChip`](mcp:get_api_reference?platform=angular&component=IgxChipComponent) so the chip deletion can be handled manually. + - SHIFT + LEFT - Triggers [`reorder`](mcp:get_api_reference?platform=angular&component=IgxChipsAreaComponent&member=reorder) event for the [`igxChipArea`](mcp:get_api_reference?platform=angular&component=IgxChipsAreaComponent) when the currently focused chip should move position to the left. + - SHIFT + RIGHT - Triggers [`reorder`](mcp:get_api_reference?platform=angular&component=IgxChipsAreaComponent&member=reorder) event for the [`igxChipArea`](mcp:get_api_reference?platform=angular&component=IgxChipsAreaComponent) when the currently focused chip should move one position to the right. - Keyboard controls when the remove button is focused: - - SPACE or ENTER 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. + - SPACE or ENTER Fires the [`remove`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=remove) output so the chip deletion can be handled manually.
@@ -1119,9 +1119,9 @@ 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](mcp:get_api_reference?platform=angular&component=IgxChipComponent) - [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) +- [IgxChipsAreaComponent](mcp:get_api_reference?platform=angular&component=IgxChipsAreaComponent) ## Theming Dependencies 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 index a9c1f67f4..b567cf259 100644 --- 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 @@ -105,20 +105,20 @@ To have a better understanding how everything works, let's create a simple examp 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. +> The **igx-circular-bar** emits [`onProgressChanged`](mcp:get_api_reference?platform=angular&component=IgxCircularProgressBarComponent&member=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.``` +> The default progress increments by **1% of the [`max`](mcp:get_api_reference?platform=angular&component=IgxCircularProgressBarComponent&member=max) value** per update cycle, this happens if the [`step`](mcp:get_api_reference?platform=angular&component=IgxCircularProgressBarComponent&member=step) value is not defined. To change the update rate, the [`step`](mcp:get_api_reference?platform=angular&component=IgxCircularProgressBarComponent&member=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`. +If you want to track a process that is not determined precisely, you can set the [`indeterminate`](mcp:get_api_reference?platform=angular&component=IgxCircularProgressBarComponent&member=indeterminate) input property to `true`. ```html ``` > [!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`. +> You can hide the text of the circular progress bar by setting the [`textVisibility`](mcp:get_api_reference?platform=angular&component=IgxCircularProgressBarComponent&member=textVisibility) property to `false`. The final result should be: @@ -221,7 +221,7 @@ Add some styles: ### 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. +This can be done in one of two ways - by using the [`IgxProgressBarGradientDirective`](mcp:get_api_reference?platform=angular&component=IgxCircularProgressBarComponent&member=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: @@ -414,5 +414,5 @@ igx-circular-bar {
-- [IgxCircularProgressBarComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcircularprogressbarcomponent.html) +- [IgxCircularProgressBarComponent](mcp:get_api_reference?platform=angular&component=IgxCircularProgressBarComponent) - [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/combo-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo-features.md index 76409a35e..5cae5354d 100644 --- 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 @@ -77,7 +77,7 @@ export class ComboFeaturesComponent implements OnInit{ ### 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: +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](mcp:get_api_reference?platform=angular&component=IgxSwitchComponent) component to toggle combobox properties' values, so we will need the `IgxSwitchModule` as well: ```typescript import { IgxComboModule } from 'igniteui-angular/combo'; @@ -117,7 +117,7 @@ export class AppModule {} ### 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. +Note that grouping is enabled/disabled by setting the [groupKey](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=groupKey) property to a corresponding data source entity or setting it to an empty string. ```typescript @ViewChild('combo', { read: IgxComboComponent }) public combo: IgxComboComponent; @@ -136,7 +136,7 @@ Note that grouping is enabled/disabled by setting the [groupKey](https://www.inf ### 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: +The following code snippet illustrates a basic usage of the [igx-combo](mcp:get_api_reference?platform=angular&component=IgxComboComponent) bound to a local data source. The [valueKey](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=valueKey) specifies which property of the data entries will be stored for the combobox's selection and the [displayKey](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=displayKey) specifies which property will be used for the combobox text: ```html @@ -161,7 +161,7 @@ Follow the [ComboBox Remote Binding topic](combo-remote.md) for more details abo ### 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: +The combobox component allows users to change the way a list of items is shown. This can be done by defining [Custom OverlaySettings](mcp:get_api_reference?platform=angular&component=OverlaySettings) and passing them to the [ComboBox's OverlaySettings](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=overlaySettings) input: ```typescript export class CustomOverlayCombo { @@ -229,13 +229,13 @@ export class ComboOverlayComponent {
> [!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. +> The combobox component uses the [AutoPositionStrategy](mcp:get_api_reference?platform=angular&component=AutoPositionStrategy) 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. +By default, filtering in the combobox is enabled. It can be disabled by setting the [disableFiltering](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=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: +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](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=showSearchCaseIcon) property to true: ```html @@ -245,7 +245,7 @@ Filtering options can be further enhanced by enabling the search case sensitivit ### 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. +The [allowCustomValues](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=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 @@ -255,7 +255,7 @@ The [allowCustomValues](https://www.infragistics.com/products/ignite-ui-angular/ ### 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. +The combobox's [autoFocusSearch](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=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 @@ -304,12 +304,12 @@ export class ComboDemo {
-- [IgxComboComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) +- [IgxComboComponent](mcp:get_api_reference?platform=angular&component=IgxComboComponent) - [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) +- [IgxSwitchComponent](mcp:get_api_reference?platform=angular&component=IgxSwitchComponent) ## Additional Resources 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 index c8e62388d..93d3b1353 100644 --- 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 @@ -14,7 +14,7 @@ The Ignite UI for Angular ComboBox Component exposes an API that allows binding ## 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: +The sample below demonstrates remote binding using the [dataPreLoad](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=dataPreLoad) property to load new chunk of remote data: ```typescript @@ -195,7 +195,7 @@ 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. +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](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=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](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=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: @@ -383,7 +383,7 @@ When the combobox is bound to remote data, setting value/selected items through
-- [IgxComboComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) +- [IgxComboComponent](mcp:get_api_reference?platform=angular&component=IgxComboComponent) - [IgxComboComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-combo-theme) ## Additional Resources 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 index 2514ff64a..dc625f5f7 100644 --- 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 @@ -246,7 +246,7 @@ When used with templates, the `igxComboClearIcon` and the `igxComboToggleIcon` s
-- [IgxComboComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) +- [IgxComboComponent](mcp:get_api_reference?platform=angular&component=IgxComboComponent) - [IgxComboComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-combo-theme) ## Additional Resources 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 index e09d87ef9..69c4d0c05 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/combo.md @@ -111,7 +111,7 @@ Now that you have the Ignite UI for Angular Combo module or directives imported, ## 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. +After the initial setup, you can bind the [igx-combo](mcp:get_api_reference?platform=angular&component=IgxComboComponent) to data. ```typescript @Component({ @@ -134,7 +134,7 @@ Our combobox is now bound to the array of cities, but we still haven't told the ### 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): +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](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=valueKey) and [displayKey](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=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). @@ -337,7 +337,7 @@ button { 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). +One way to get the combobox's selection is via the [selection](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=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: @@ -348,7 +348,7 @@ export class MyCombo { } ``` -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: +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()](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=select) method: ```html @@ -368,7 +368,7 @@ export class MyExampleCombo { } ``` -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. +The combobox also fires an event every time its selection changes - [selectionChanging()](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=selectionChanging). The emitted event arguments, [IComboSelectionChangingEventArgs](mcp:get_api_reference?platform=angular&component=IComboSelectionChangingEventArgs), 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: @@ -394,7 +394,7 @@ export class MyExampleCombo { } ``` -Additionally, the combobox fires a [selectionChanged](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#selectionChanged) event after the selection is committed and the component state has been updated. The emitted event arguments, [IComboSelectionChangedEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icomboselectionchangedeventargs.html), contain information about the previous selection, the current selection and the items that were added or removed. Unlike `selectionChanging`, this event is not cancellable and is guaranteed to reflect the final committed selection state. When the combobox is used with `ngModel` or Angular forms, `selectionChanged` is emitted after the value change callback is invoked. +Additionally, the combobox fires a [selectionChanged](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=selectionChanged) event after the selection is committed and the component state has been updated. The emitted event arguments, [IComboSelectionChangedEventArgs](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icomboselectionchangedeventargs.html), contain information about the previous selection, the current selection and the items that were added or removed. Unlike `selectionChanging`, this event is not cancellable and is guaranteed to reflect the final committed selection state. When the combobox is used with `ngModel` or Angular forms, `selectionChanged` is emitted after the value change callback is invoked. Binding to the event can be done through the proper `@Output` property on the `igx-combo` tag: @@ -573,7 +573,7 @@ $custom-combo-theme: combo-theme( ); ``` -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: +The [`IgxComboComponent`](mcp:get_api_reference?platform=angular&component=IgxComboComponent) uses the [`IgxDropDownComponent`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) internally as an item container. It also includes the [`IgxInputGroup`](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) and the [`IgxCheckbox`](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) 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( @@ -598,7 +598,7 @@ The last step is to include the component's 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. +> The [`IgxCombo`](mcp:get_api_reference?platform=angular&component=IgxComboComponent) 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`](mcp:get_api_reference?platform=angular&component=OverlaySettings&member=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`. @@ -731,14 +731,14 @@ At the end your combo should look like this:
-- [IgxComboComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html) +- [IgxComboComponent](mcp:get_api_reference?platform=angular&component=IgxComboComponent) - [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) +- [IgxDropDownComponent](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) +- [IgxInputGroupComponent](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) +- [IgxCheckboxComponent](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) ## Theming Dependencies 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 index 5520f9e34..ceda1c1d3 100644 --- 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 @@ -10,7 +10,7 @@ _premium: true # Angular Dashboard Tile -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. +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`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent) 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. @@ -151,7 +151,7 @@ Depending on what you bind the Dashboard Tile's `DataSource` property to will de - [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). +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`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent), 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: @@ -245,7 +245,7 @@ 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: +The visualization or properties of the visualization are also configurable using the [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent) at the top of the control. This [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent) has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: Dashboard Tile Toolbar @@ -437,13 +437,13 @@ 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) +- [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent) - [`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) +- [`IgxLinearGaugeComponent`](mcp:get_api_reference?platform=angular&component=IgxLinearGaugeComponent) +- [`IgxRadialGaugeComponent`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent) ## Additional Resources 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 index 9ce918849..2001334cf 100644 --- 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 @@ -62,7 +62,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta 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: +> As the picker uses the [**IgxCalendarComponent**](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent), 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'; @@ -174,7 +174,7 @@ export class SampleFormComponent { ### 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. +The [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) allows the projection of child components that the [`IgxInputGroupComponent`](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) supports (with the exception of [`IgxInput`](mcp:get_api_reference?platform=angular&component=IgxInputDirective)) - [`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 @@ -189,7 +189,7 @@ The above snippet will add an additional toggle icon at the end of the input, ri #### 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. +The [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) can be configured with [`IgxPickerToggleComponent`](mcp:get_api_reference?platform=angular&component=IgxPickerToggleComponent) and [`IgxPickerClearComponent`](mcp:get_api_reference?platform=angular&component=IgxPickerClearComponent). These can be used to change the toggle and clear icons without having to add your own click handlers. ```html @@ -207,13 +207,13 @@ The [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-a 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: +- the button's text can be changed using the [`todayButtonLabel`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=todayButtonLabel) and the [`cancelButtonLabel`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=cancelButtonLabel) input properties: ```html ``` -- the whole buttons can be templated using the [`igxPickerActions`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpickeractionsdirective.html) directive: +- the whole buttons can be templated using the [`igxPickerActions`](mcp:get_api_reference?platform=angular&component=IgxPickerActionsDirective) directive: With it you gain access to the date picker's [`calendar`](calendar.md) and all of its members: ```html @@ -226,7 +226,7 @@ With it you gain access to the date picker's [`calendar`](calendar.md) and all o ### 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: +Opening and closing the [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent)'s calendar UI with the keyboard is available only for `dropdown` mode and can be triggered via the key combinations below: | Keys | Description | | :--------------------------------- | :-------------------------------------------------------------------------------------------- | @@ -236,13 +236,13 @@ Opening and closing the [`IgxDatePickerComponent`](https://www.infragistics.com/ | Enter | Closes the calendar pop-up, selecting the focused date and moves the focus to the input field | | Alt + ↑ | 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. +Since the [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) 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: +The [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) also supports a `dialog` mode: ```html @@ -281,12 +281,12 @@ export class DatepickerSample2Component { ### 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. +[`inputFormat`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=inputFormat) and [`displayFormat`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=displayFormat) are properties which can be set to make the picker's editor follow a specified format. The [`inputFormat`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=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. +[`displayFormat`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=displayFormat) is provided, the picker will use the [`inputFormat`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=inputFormat) as its [`displayFormat`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=displayFormat). +Alternatively, if the [`inputFormat`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=inputFormat) property is not set, the input format will be inferred from the [`displayFormat`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=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. @@ -327,7 +327,7 @@ export class DatepickerSample3Component { ### 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. +The [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) exposes [`increment`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=increment) and [`decrement`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=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`](mcp:get_api_reference?platform=angular&component=DatePart) of the currently set date. ```html @@ -336,7 +336,7 @@ The [`IgxDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-a ``` -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. +It also has as a [`spinDelta`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=spinDelta) input property which can be used to increment or decrement a specific date part of the currently set date. ```html @@ -344,9 +344,9 @@ It also has as a [`spinDelta`](https://www.infragistics.com/products/ignite-ui-a ### 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. +The [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) 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`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=minValue) and [`maxValue`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=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. +You can see the [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) in a reactive form by visiting our [Reactive Forms Integration](angular-reactive-form-validation.md) topic. #### Using date and time picker together @@ -414,7 +414,7 @@ export class DateTimePickerTDFSampleComponent {
-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. +In reactive forms, we can handle the [`valueChange`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=valueChange) event of each component and update the value of the other. ```typescript import { Component, inject } from '@angular/core'; @@ -499,11 +499,11 @@ export class DateTimePickerRFSampleComponent { ### 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. +The [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) 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`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=displayMonthsCount) which allows more than one calendar to be displayed when the picker expands, [`weekStart`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=weekStart) which determines the starting day of the week, [`showWeekNumbers`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=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. +The localization of the [`IgxDatePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) can be controlled through its [`locale`](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent&member=locale) input. Additionally, using the `igxCalendarHeader` and the `igxCalendarSubheader` templates, provided by the [`IgxCalendarComponent`](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent), 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: @@ -598,12 +598,12 @@ $custom-datepicker-theme: calendar-theme(
-- [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) +- [IgxDatePickerComponent](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) +- [IgxDateTimeEditorDirective](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective) +- [IgxCalendarComponent](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent) - [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) +- [IgxInputGroupComponent](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) ## Theming Dependencies 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 index f29ee726c..7294e34df 100644 --- 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 @@ -12,7 +12,7 @@ The Angular Date Range Picker is a lightweight component that includes a text in ## 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. +Below is a sample demonstrating the [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent) component in action, where a calendar pop-up allows users to select start and end dates. ```typescript import { Component } from '@angular/core'; @@ -37,7 +37,7 @@ export class BasicDateRangePickerComponent { ## 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: +To get started with the Ignite UI for Angular [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent) component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command: ```cmd ng add igniteui-angular @@ -47,7 +47,7 @@ For a complete introduction to the Ignite UI for Angular, read the [_getting sta 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: +As the [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent) uses the [**IgxCalendarComponent**](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent), 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 @@ -66,7 +66,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 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/date-picker/src/date-range-picker/public_api.ts) token to import the component and all of its supporting components and directives. +Alternatively, as of `16.0.0` you can import the [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent) as a standalone dependency, or use the [`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/date-picker/src/date-range-picker/public_api.ts) token to import the component and all of its supporting components and directives. ```typescript // home.component.ts @@ -104,7 +104,7 @@ public range: DateRange = { start: new Date(2020, 4, 20), end: new Date(2020, 4, ``` >[!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 Date Range Picker value is of type [`DateRange`](mcp:get_api_reference?platform=angular&component=DateRange), 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. @@ -118,7 +118,7 @@ To create a two-way data-binding, use `ngModel`: ### 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: +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`](mcp:get_api_reference?platform=angular&component=IgxDateRangeStartComponent) and [`IgxDateRangeEndComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangeEndComponent) as children of the date range picker, as shown in the demo below: ```html @@ -165,10 +165,10 @@ The Angular Date Range Picker component also allows configuring two separate inp > ``` > -- [`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) support projected content such as labels, hints, picker toggles, and clear buttons. +- [`IgxDateRangeStartComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangeStartComponent) and [`IgxDateRangeEndComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangeEndComponent) support projected content such as labels, hints, picker toggles, and clear buttons. - Use `igx-picker-toggle` for the calendar action and `igx-picker-clear` for the clear action. - Apply `igxPrefix` directly to `igx-picker-toggle` and `igxSuffix` directly to `igx-picker-clear`. -- Add the [`IgxInput`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxinputdirective.html) directly inside each component. +- Add the [`IgxInput`](mcp:get_api_reference?platform=angular&component=IgxInputDirective) directly inside each component. - To enable date editing, decorate both inputs with the [`igxDateTimeEditor`](date-time-editor.md) directive. ```typescript @@ -195,7 +195,7 @@ export class DateRangePickerStartEndComponent { ### Popup modes -By default, 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`. +By default, the [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent) 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 @@ -229,7 +229,7 @@ The range value is set when dates are picked from the calendar. You will notice ### 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 [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent) 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. @@ -262,7 +262,7 @@ The [calendar keyboard navigation](calendar.md#keyboard-navigation) section cont ### 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. +To enrich the default Date Range Picker UX, the component allows projecting child components - the same as in the [`IgxInputGroupComponent`](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent): [`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`](mcp:get_api_reference?platform=angular&component=IgxInputDirective). More detailed information about this can be found in the [Label & Input](label-input.md) topic. ```html @@ -305,7 +305,7 @@ Or for two inputs: #### 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: +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`](mcp:get_api_reference?platform=angular&component=IgxPickerToggleComponent) and [`IgxPickerClearComponent`](mcp:get_api_reference?platform=angular&component=IgxPickerClearComponent). 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 @@ -321,7 +321,7 @@ In the default configuration, with a single read-only input, a default calendar > [!NOTE] > This component uses Material Icons. Add the following link to your `index.html`: `` -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: +When a Date Range Picker has two separate inputs for start and end dates, it doesn't expose these icons by default. The [`IgxPickerToggleComponent`](mcp:get_api_reference?platform=angular&component=IgxPickerToggleComponent) and [`IgxPickerClearComponent`](mcp:get_api_reference?platform=angular&component=IgxPickerClearComponent) should be manually added as children of the [`IgxDateRangeStartComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangeStartComponent) or [`IgxDateRangeEndComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangeEndComponent) like so: > [!NOTE] > In the two-input configuration: @@ -356,7 +356,7 @@ When a Date Range Picker has two separate inputs for start and end dates, it doe ### 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. +You can also add custom date range chips to the calendar pop-up for faster range selection using the [`customRanges`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent&member=usePredefinedRanges) property, a set of predefined ranges chips will be displayed along with the custom ones. ```ts public today = new Date(); @@ -382,7 +382,7 @@ public customRanges: CustomDateRange[] = [ ``` -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: +In addition, custom content or actions can be templated using the [`igxPickerActions`](mcp:get_api_reference?platform=angular&component=IgxPickerActionsDirective) 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'; @@ -448,7 +448,7 @@ The `inputFormat` property accepts a constructed format string using characters ``` -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. +If the [`inputFormat`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent&member=inputFormat) property is not set, the input format will be inferred from the [`displayFormat`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent&member=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. @@ -457,7 +457,7 @@ If the [`inputFormat`](https://www.infragistics.com/products/ignite-ui-angular/d 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 [NgModel](https://angular.io/api/forms/NgModel) and validators can be set on the [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent) 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. @@ -538,7 +538,7 @@ export class DateRangePickerValidationComponent { ### 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. +You can specify [`minValue`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent&member=minValue) and [`maxValue`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent&member=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); @@ -583,7 +583,7 @@ The `IgxDateRangePickerComponent` is also a validator which means it controls it ### 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. +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`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent&member=disabledDates) property. ```ts export class DateRangeSampleComponent implements OnInit { @@ -609,7 +609,7 @@ You can also do the same if you want to set one or more special dates in the cal ### 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 `-`: +When two editors are used, the default separator can be replaced using the [`igxDateRangeSeparator`](mcp:get_api_reference?platform=angular&component=IgxDateRangeSeparatorDirective) directive. Here is how to change the date separator to a hyphen `-`: ```html @@ -769,7 +769,7 @@ export class StyledDateRangePickerComponent { ## 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) +The demo below defines a form for flight tickets that uses the [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent). If no dates are selected, an [`IgxHint`](mcp:get_api_reference?platform=angular&component=IgxHintDirective) is used to display a validation error. The selection of the dates is restricted by the [`minValue`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent&member=minValue) and [`maxValue`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent&member=maxValue) properties of the [`IgxDateRangePickerComponent`](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent) ```typescript @@ -841,11 +841,11 @@ export class PipeWithoutTownFrom implements PipeTransform {
-- [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) +- [IgxDateRangePickerComponent](mcp:get_api_reference?platform=angular&component=IgxDateRangePickerComponent) +- [IgxCalendarComponent](mcp:get_api_reference?platform=angular&component=IgxCalendarComponent) - [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) +- [IgxInputGroupComponent](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) ## Theming Dependencies 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 index b1b493d73..e15da2106 100644 --- 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 @@ -99,11 +99,11 @@ Now that you have the Ignite UI for Angular Date Time Editor module or 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. +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`](mcp:get_api_reference?platform=angular&component=IgxInputDirective), [`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): +A basic configuration scenario setting a Date object as a [`value`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=value): ```typescript public date = new Date(); @@ -133,7 +133,7 @@ The string can be a full `ISO` string, in the format `YYYY-MM-DDTHH:mm:ss.sssZ` ##### 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`. +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`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=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 @@ -151,7 +151,7 @@ Date Time Editor Directive has intuitive keyboard navigation that makes it easy - Ctrl / Cmd + Arrow Left / Right - navigates between date sections. On Ctrl / Cmd + Right 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. -- Arrow Up / Down - increment/decrement date portions. See related [`spinLoop`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatetimeeditordirective.html#spinLoop) +- Arrow Up / Down - increment/decrement date portions. See related [`spinLoop`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=spinLoop) - Ctrl / Cmd + ; - set the current day and time in the editor. @@ -159,12 +159,12 @@ Date Time Editor Directive has intuitive keyboard navigation that makes it easy ### 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. +The [`IgxDateTimeEditor`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective) 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. +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`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=displayFormat) only. Also, if no [`displayFormat`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=displayFormat) is provided, the editor will use the [`inputFormat`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=inputformat) as its [`displayFormat`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=displayFormat). +Alternatively, if the [`inputFormat`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=inputFormat) property is not set, the input format will be inferred from the [`displayFormat`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=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. +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`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=inputFormat) is locale based, so if none is provided, the editor will default to the one used by the browser. ```html @@ -172,7 +172,7 @@ To set a specific input format, pass it as a string to the IgxDateTimeEditor dir ``` -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): +The table bellow shows formats that are supported by the directive's [`inputFormat`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=inputFormat): | Format | Description | | :------ | :-------------------------------------------------------------------------- | @@ -195,7 +195,7 @@ The table bellow shows formats that are supported by the directive's [`inputForm ### 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. +You can specify [`minValue`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=minValue) and [`maxValue`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=maxValue) properties to restrict input and control the validity of the ngModel. ```typescript public minDate = new Date(2020, 1, 15); @@ -209,13 +209,13 @@ public maxDate = new Date(2020, 11, 1); ``` -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). +The [`minValue`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=minValue) and [`minValue`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=minValue) inputs can also be of type `string`, see [Binding to ISO strings](#iso). ### Increment and decrement -[`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. +[`igxDateTimeEditor`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective) directive exposes public [`increment`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=increment) and [`decrement`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=decrement) methods. They increment or decrement a specific [`DatePart`](mcp:get_api_reference?platform=angular&component=DatePart) 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. +In the first scenario, if no specific [`DatePart`](mcp:get_api_reference?platform=angular&component=DatePart) is passed to the method, a default [`DatePart`](mcp:get_api_reference?platform=angular&component=DatePart) will increment or decrement, based on the specified [`inputFormat`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=inputFormat) and the internal directive implementation. In the second scenario, you can explicitly specify what [`DatePart`](mcp:get_api_reference?platform=angular&component=DatePart) 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: @@ -242,7 +242,7 @@ export class DateTimeAdvancedComponent {
-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`. +Additionally, `spinDelta` is an input property of type [`DatePartDeltas`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective) 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`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=increment) and [`decrement`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective&member=decrement) methods, as long as they don't have the `delta` parameter provided since it will take precedence over `spinDelta`. ### In Angular Forms @@ -266,7 +266,7 @@ Template-driven form example: ### 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). +You can force the component to select all of the input text on focus using [`igxTextSelection`](mcp:get_api_reference?platform=angular&component=IgxTextSelectionDirective). Find more info on [`igxTextSelection`](mcp:get_api_reference?platform=angular&component=IgxTextSelectionDirective) at [Label & Input](label-input.md#focus--text-selection). ```html @@ -275,7 +275,7 @@ You can force the component to select all of the input text on focus using [`igx ``` > [!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. +> In order for the component to work properly, it is crucial to set [`igxTextSelection`](mcp:get_api_reference?platform=angular&component=IgxTextSelectionDirective) after the [`igxDateTimeEditor`](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective) 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 @@ -284,10 +284,10 @@ For details check out the [`Input Group styling guide`](input-group.md#styling). ## 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) +- [IgxDateTimeEditorDirective](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective) +- [IgxHintDirective](mcp:get_api_reference?platform=angular&component=IgxHintDirective) +- [IgxInputDirective](mcp:get_api_reference?platform=angular&component=IgxInputDirective) +- [IgxInputGroupComponent](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) - [IgxInputGroupComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-input-group-theme)
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 index afd9a5a6e..1151b194b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dialog.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/dialog.md @@ -109,8 +109,8 @@ Now that you have the Ignite UI for Angular Dialog Window module or directives i ### 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: +To create an alert dialog, in the template of our email component, we add the following code. We have to set the [`title`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=title), [`message`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=message), +[`leftButtonLabel`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=leftButtonLabel) and handle [`leftButtonSelect`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=leftButtonSelect) event: ```html @@ -130,8 +130,8 @@ If everything's done right, you should see the demo sample shown above in your b ### 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: +To create a standard dialog, in the template of our file manager component, we add the following code. We have to set the [`title`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=title), [`message`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=message), +[`leftButtonLabel`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=leftButtonLabel), [`rightButtonLabel`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=rightButtonLabel), and handle [`leftButtonSelect`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=leftButtonSelect) and [`rightButtonSelect`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=rightButtonSelect) events: ```html @@ -316,7 +316,7 @@ export class DialogSample3Component { 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: +- Using [`open`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=open) method and pass a valid [`overlaySettings`](mcp:get_api_reference?platform=angular&component=OverlaySettings). Example: ```typescript import { PositionSettings, OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular/core'; @@ -388,7 +388,7 @@ params: { ### 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. +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`](mcp:get_api_reference?platform=angular&component=IgxDialogComponent&member=focusTrap) property. ## Styling @@ -584,9 +584,9 @@ $custom-button: contained-button-theme(
-- [IgxDialogComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdialogcomponent.html) +- [IgxDialogComponent](mcp:get_api_reference?platform=angular&component=IgxDialogComponent) - [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](mcp:get_api_reference?platform=angular&component=OverlaySettings) - [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) ## Theming Dependencies 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 index 4e42a4327..5b33d58e2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/divider.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/divider.md @@ -309,7 +309,7 @@ If the value of the `middle` attribute is set to a false value, or if the attrib
-- [IgxDividerDirective](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdividerdirective.html) +- [IgxDividerDirective](mcp:get_api_reference?platform=angular&component=IgxDividerDirective) - [IgxDividerDirective Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-divider-theme) ## Additional Resources 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 index f7c8d93c1..26db1dcf7 100644 --- 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 @@ -215,24 +215,24 @@ Now that you have the Ignite UI for Angular Drag and Drop module or directives i ## 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. +When an element inside your Angular application needs to be dragged from one place to another on the page, the [`igxDrag`](mcp:get_api_reference?platform=angular&component=IgxDragDirective) directive is designed to help achieve this behavior. In combination with the [`igxDrop`](mcp:get_api_reference?platform=angular&component=IgxDropDirective) 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. +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`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=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`. +When the dragging starts, the [`dragStart`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=dragStart) event is triggered. To prevent any actual movement to occur, the event can be canceled by setting the [`cancel`](mcp:get_api_reference?platform=angular&component=IDragStartEventArgs&member=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. +Before any actual movement is about to be performed, the [`dragMove`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=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. +After the user releases the mouse/touch the drag ghost element is removed from the DOM and the [`dragEnd`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=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. +> Due to the nature of the [`dragMove`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=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. +The [`igxDrag`](mcp:get_api_reference?platform=angular&component=IgxDragDirective) directive can be applied on any DOM element by just adding it to its template. ```html
Drag me
@@ -240,13 +240,13 @@ The [`igxDrag`](https://www.infragistics.com/products/ignite-ui-angular/docs/typ 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. +Before the ghost is rendered on the page, a [`ghostCreate`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=ghostCreate) event is triggered containing information of the ghost element that is about to be added. The event is triggered right after the [`dragStart`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=dragStart) event. If the [`dragStart`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=dragStart) is canceled, no ghost will be created and the [`ghostCreate`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=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. +Right before the ghost is about to be removed, the [`ghostDestroy`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=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. +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`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=ghostTemplate) input directly. ```html @@ -409,13 +409,13 @@ export class DragDialogSampleComponent { 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. +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`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=transitionToOrigin) and the [`transitionTo`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=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. +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`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=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. @@ -605,7 +605,7 @@ export class ListReorderSampleComponent { ### 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. +If the user wants to have interactable children of the main element which have igxDrag instanced, he can set the [`igxDragIgnore`](mcp:get_api_reference?platform=angular&component=IgxDragIgnoreDirective) 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
@@ -616,23 +616,23 @@ If the user wants to have interactable children of the main element which have i ## 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. +When an element that is being dragged using the [`igxDrag`](mcp:get_api_reference?platform=angular&component=IgxDragDirective) directive needs to be placed in an area, the [`igxDrop`](mcp:get_api_reference?platform=angular&component=IgxDropDirective) 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. +The [`igxDrop`](mcp:get_api_reference?platform=angular&component=IgxDropDirective) directive can be applied to any DOM element just like the [`igxDrag`](mcp:get_api_reference?platform=angular&component=IgxDragDirective) 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. +By default, the [`igxDrop`](mcp:get_api_reference?platform=angular&component=IgxDropDirective) directive doesn't apply any logic for modifying the dragged element position in the DOM. That's why you need to specify a [`dropStrategy`](mcp:get_api_reference?platform=angular&component=IgxDropDirective&member=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). +- `Default` - does not perform any action when an element is dropped onto an `igxDrop` element and is implemented as a class named [`IgxDefaultDropStrategy`](mcp:get_api_reference?platform=angular&component=IgxDefaultDropStrategy). -- `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). +- `Append` - always inserts the dropped element as a last child and is implemented as a class named [`IgxAppendDropStrategy`](mcp:get_api_reference?platform=angular&component=IgxAppendDropStrategy). -- `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). +- `Prepend` - always inserts the dropped element as first child and is implemented as a class named [`IgxPrependDropStrategy`](mcp:get_api_reference?platform=angular&component=IgxPrependDropStrategy). -- `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). +- `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`](mcp:get_api_reference?platform=angular&component=IgxInsertDropStrategy). 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. @@ -646,7 +646,7 @@ public appendStrategy = IgxAppendDropStrategy; #### 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. +When using a specific drop strategy, its behavior can be canceled in the [`dropped`](mcp:get_api_reference?platform=angular&component=IgxDropDirective&member=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:_ @@ -666,7 +666,7 @@ If you would like to implement your own drop logic, we advise binding to the `dr ### 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. +Using the [`dragChannel`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=dragChannel) and [`dropChannel`](mcp:get_api_reference?platform=angular&component=IgxDropDirective&member=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 @@ -1304,12 +1304,12 @@ igx-card { ## 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) +- [IgxDragDirective](mcp:get_api_reference?platform=angular&component=IgxDragDirective) +- [IgxDropDirective](mcp:get_api_reference?platform=angular&component=IgxDropDirective) +- [IgxDefaultDropStrategy](mcp:get_api_reference?platform=angular&component=IgxDefaultDropStrategy) +- [IgxAppendDropStrategy](mcp:get_api_reference?platform=angular&component=IgxAppendDropStrategy) +- [IgxPrependDropStrategy](mcp:get_api_reference?platform=angular&component=IgxPrependDropStrategy) +- [IgxInsertDropStrategy](mcp:get_api_reference?platform=angular&component=IgxInsertDropStrategy) ## References 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 index 38b9a8c46..4a8156c00 100644 --- 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 @@ -12,19 +12,19 @@ The following samples demonstrate how to create a multi-select hierarchical drop ## 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. +For the drop-down list we will use the [IgxDropDownComponent](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) as well as the [IgxToggleActionDirective](mcp:get_api_reference?platform=angular&component=IgxToggleActionDirective) 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). +To visualize the hierarchical data in the drop-down, you can use either the [IgxTreeComponent](mcp:get_api_reference?platform=angular&component=IgxTreeComponent) or the [IgxTreeGridComponent](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent). -The [`IgxChipComponent`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) is used to display the selected items. +The [`IgxChipComponent`](mcp:get_api_reference?platform=angular&component=IgxChipComponent) 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 display selected nodes/rows from the list use the [`IgxChipComponent`](mcp:get_api_reference?platform=angular&component=IgxChipComponent) 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`](mcp:get_api_reference?platform=angular&component=IgxTreeComponent&member=nodeSelection) event and to the IgxTreeGridComponent's [`rowSelectionChanging`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=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. +To remove the chip from the DOM and deselect the item from the tree/grid, you have to handle the IgxChipComponent's [`remove`](mcp:get_api_reference?platform=angular&component=IgxChipComponent&member=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. +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`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent&member=closing) event handler. ### Demo @@ -255,12 +255,12 @@ button { ## 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) +- [IgxDropDownComponent](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) +- [IgxChipComponent](mcp:get_api_reference?platform=angular&component=IgxChipComponent) +- [IgxChipsAreaComponent](mcp:get_api_reference?platform=angular&component=IgxChipsAreaComponent) +- [IgxTreeComponent](mcp:get_api_reference?platform=angular&component=IgxTreeComponent) +- [IgxTreeNodeComponent](mcp:get_api_reference?platform=angular&component=IgxTreeNodeComponent) +- [IgxTreeGridComponent](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent) ## Additional Resources 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 index e1bddaf46..e9f396549 100644 --- 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 @@ -127,7 +127,7 @@ 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: +Next, we need to create the drop-down component's template, looping through the data using [`*igxFor`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) instead of `*ngFor`. The `*igxFor` directive needs some additional configuration in order to properly display all of the items: ```html @@ -159,15 +159,15 @@ The additional parameters passed to the `*igxFor` directive are: - `containerSize` - the size of the virtualized container (in `px`). This needs to be enforced on the wrapping `
` 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`. +In order to assure uniqueness of the items, pass `item` inside of the [`value`](mcp:get_api_reference?platform=angular&component=IgxDropDownItemComponent&member=value) input and `index` inside of the [`index`](mcp:get_api_reference?platform=angular&component=IgxDropDownItemComponent&member=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. +> For the drop-down to work with a virtualized list of items, [`value`](mcp:get_api_reference?platform=angular&component=IgxDropDownItemComponent&member=value) and [`index`](mcp:get_api_reference?platform=angular&component=IgxDropDownItemComponent&member=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 +> When the drop-down uses virtualized items, the type of [`dropdown.selectedItem`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent&member=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 @@ -331,7 +331,7 @@ export class DropDownRemoteComponent implements OnInit, OnDestroy { } ``` -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. +Inside of the `ngAfterViewInit` hook, we call to get data for the initial state and subscribe to the `igxForOf` directive's [`chunkPreload`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=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 @@ -467,13 +467,13 @@ Using the drop-down with a virtualized list of items enforces some limitations. - The drop-down items that are being looped need to be passed in a wrapping element (e.g. `
`) which has the following css: `overflow: hidden` and `height` equal to `containerSize` in `px` - `` 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.selectedItem`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent&member=selectedItem) is of type `{ value: any, index: number }` +- The object emitted by [`selection`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent&member=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) +- [IgxForOfDirective](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) +- [IgxDropDownComponent](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) 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 index 5253848d7..ac7a1e80c 100644 --- 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 @@ -122,7 +122,7 @@ Now that you have the Ignite UI for Angular Drop Down module or directives impor ### 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. +Let's create a simple drop-down that provides several option items to choose from. To achieve this, we will use the [IgxDropDownComponent](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) as well as the [IgxToggleAction](mcp:get_api_reference?platform=angular&component=IgxToggleActionDirective) to open/close the drop-down. ```html @@ -154,7 +154,7 @@ The default demo shows the use of a toggleable Drop Down List in Angular that le ### 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. +Let's say we want to have a predefined selected item. One way to do this, is by handling the [opening](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent&member=opening) event of the drop-down component. ```html @@ -222,7 +222,7 @@ export class DropDownSample2Component { ### 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. +To provide a more useful visual information, use the [isHeader](mcp:get_api_reference?platform=angular&component=IgxDropDownItemComponent&member=isheader) property to group items semantically or the [disabled](mcp:get_api_reference?platform=angular&component=IgxDropDownItemComponent&member=disabled) property to display an item as a non-interactive. You can also set the [selected](mcp:get_api_reference?platform=angular&component=IgxDropDownItemComponent&member=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 @@ -325,7 +325,7 @@ export class DropDownSample3Component { ### 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. +The `igx-drop-down` items can also be grouped using the [`igx-drop-down-item-group`](mcp:get_api_reference?platform=angular&component=IgxDropDownGroupComponent) 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 @@ -500,7 +500,7 @@ igx-switch { ### 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. +You can configure the drop-down to behave as a menu. To do this, set the [ISelectionEventArgs](mcp:get_api_reference?platform=angular&component=ISelectionEventArgs) interface [cancel](mcp:get_api_reference?platform=angular&component=ISelectionEventArgs&member=cancel) member to _true_ in the [selectionChanging](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent&member=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](mcp:get_api_reference?platform=angular&component=ISelectionEventArgs&member=newSelection) member value in the event. ```html @@ -641,9 +641,9 @@ export class DropdownMenuComponent { 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. +For the implementation of the multi-level drop down menu we will use the [`IgxDropDownComponent`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) 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. +In order to configure the [`IgxDropDownItem`](mcp:get_api_reference?platform=angular&component=IgxDropDownItemComponent) to open an additional drop down, add the `multiLevel` directive that would handle the [`overlay settings`](mcp:get_api_reference?platform=angular&component=OverlaySettings) of the nested drop down and manages its opened/closed state through its `innerDropdown` property. ```html @@ -659,7 +659,7 @@ In order to configure the [`IgxDropDownItem`](https://www.infragistics.com/produ ``` -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. +To configure the multi-level drop down to behave as a menu, you need to handle the [selectionChanging](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent&member=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 }) @@ -948,9 +948,9 @@ $custom-button-theme: flat-button-theme( ### 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. +Use the [igxDropDownItemNavigation](mcp:get_api_reference?platform=angular&component=IgxDropDownItemNavigationDirective) 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. +The following sample demonstrates an input that opens and closes the `igxDropDown` instance on click. Applying the [igxDropDownItemNavigation](mcp:get_api_reference?platform=angular&component=IgxDropDownItemNavigationDirective) 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](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent&member=allowItemsFocus) property set to `false` to allow the input to maintain focus. ```html @@ -1321,12 +1321,12 @@ $custom-drop-down-theme: drop-down-theme( ## API References -- [IgxDropDownComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdropdowncomponent.html) +- [IgxDropDownComponent](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) - [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) +- [IgxDropDownItemComponent](mcp:get_api_reference?platform=angular&component=IgxDropDownItemComponent). +- [IgxOverlay](mcp:get_api_reference?platform=angular&component=OverlaySettings) - [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](mcp:get_api_reference?platform=angular&component=IgxDividerDirective) - [IgxDividerDirective Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-divider-theme) ## Theming Dependencies 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 index 52c412264..fa25e04f2 100644 --- 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 @@ -229,7 +229,7 @@ In order to add a chart to a worksheet, you must use the `AddChart` method of th 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`. +There are over 70 supported chart types, including `Line`, `Area`, [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent), 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: @@ -245,7 +245,7 @@ chart.setSourceData("A2:M6", true); - `AddChart` - `Area` -- [`IgxColumnComponent`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_grids_grids.igxcolumncomponent.html) +- [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) - `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/expansion-panel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/expansion-panel.md index f74e6a428..fb45e3f4f 100644 --- 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 @@ -11,7 +11,7 @@ _tocName: Expansion Panel 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.

-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. +Ignite UI Expansion Panel [igx-expansion-panel](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) 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.

## Angular Expansion Panel Example @@ -132,7 +132,7 @@ The table below shows all the available markup parts for the Angular Expansion P ## 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: +We can do this by binding the description to the control [`collapsed`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent&member=collapsed) property: ```typescript // in expansion-panel.component.ts @@ -235,8 +235,8 @@ export class ExpansionPanelSample2Component { ## 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. +The [`IgxExpansionPanelComponent`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) allows for easy customization of [the header](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelHeaderComponent). +Configuring the position of the header icon can be done through the [`iconPosition`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelHeaderComponent&member=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 @@ -247,7 +247,7 @@ Configuring the position of the header icon can be done through the [`iconPositi ``` >[!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 [`iconPosition`](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelHeaderComponent&member=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: @@ -746,9 +746,9 @@ 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 API](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelComponent) +- [IgxExpansionPanelHeader API](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelHeaderComponent) +- [IgxExpansionPanelBody API](mcp:get_api_reference?platform=angular&component=IgxExpansionPanelBodyComponent) - [IgxExpansionPanel Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-expansion-panel) ## Theming Dependencies 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 index 7a1025fa0..9253490d9 100644 --- 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 @@ -12,7 +12,7 @@ _premium: true

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. +The exporting functionality is encapsulated in the [`IgxCsvExporterService`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService) class.

@@ -66,7 +66,7 @@ export class CsvExportComponent {
-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: +To start using the IgniteUI CSV Exporter first import the [`IgxCsvExporterService`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService) in the app.module.ts file and add the service to the `providers` array: ```typescript // app.module.ts @@ -91,7 +91,7 @@ To initiate an export process you may use the handler of a button in your compon ``` -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. +You may access the exporter service by defining an argument of type [`IgxCsvExporterService`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService) 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`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService&member=exportdata) method. This method accepts as a first argument the data you want to export and the second argument is of type [`IgxCsvExporterOptions`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterOptions) and allows you to configure the export process. Here is the code which will execute the export process in the component's typescript file: @@ -124,7 +124,7 @@ If all went well, you should see an export button. When pressed, it will trigger ## 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. +[`IgxCsvExporterService`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService)'s [`export`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService&member=export) method and pass the [**IgxGrid**](grid/grid.md) as first argument. Here is an example: @@ -233,24 +233,24 @@ export class CsvExportSample1Component { 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 +- as a second argument of the [`IgxCsvExporterOptions`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterOptions) objects's constructor +- using the [`IgxCsvExporterOptions`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterOptions) object's [`fileType`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterOptions&member=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 | +| [`CsvFileTypes.CSV`](mcp:get_api_reference?platform=angular&component=CsvFileTypes&member=csv) | .csv | Comma | +| [`CsvFileTypes.TAB`](mcp:get_api_reference?platform=angular&component=CsvFileTypes&member=tab) | .tab | Tab | +| [`CsvFileTypes.TSV`](mcp:get_api_reference?platform=angular&component=CsvFileTypes&member=tsv) | .tsv | Tab |
-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. +You can also specify a custom delimiter using the [`IgxCsvExporterOptions`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterOptions) objects's [`valueDelimiter`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterOptions&member=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`. +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`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService&member=columnexporting) and/or [`rowExporting`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService&member=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`](mcp:get_api_reference?platform=angular&component=IRowExportingEventArgs&member=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: @@ -265,18 +265,18 @@ this.csvExportService.columnExporting.subscribe((args: IColumnExportingEventArgs 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. +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`](mcp:get_api_reference?platform=angular&component=IgxCsvExporterOptions) 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) +- [IgxCsvExporterService API](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService) +- [IgxCsvExporterOptions API](mcp:get_api_reference?platform=angular&component=IgxCsvExporterOptions) Additional components that were used: -- [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme)
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 index a8920680b..85f668f15 100644 --- 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 @@ -11,7 +11,7 @@ _premium: true

-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. +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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc.

@@ -58,7 +58,7 @@ export class ExcelExportComponent { ## 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: +To start using the IgniteUI Excel Exporter first import the [`IgxExcelExporterService`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) in the app.module.ts file and add the service to the `providers` array: ```typescript // app.module.ts @@ -83,7 +83,7 @@ To initiate an export process you may use the handler of a button in your compon ``` -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. +You may access the exporter service by defining an argument of type [`IgxExcelExporterService`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) 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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=exportdata) method. This method accepts as a first argument the data you want to export and the second argument is of type [`IgxExcelExporterOptions`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions) and allows you to configure the export process. Here is the code which will execute the export process in the component's typescript file: @@ -114,7 +114,7 @@ If all went well, you should see an export button. When pressed, it will trigger ## 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`. +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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=columnexporting) and/or [`rowExporting`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=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`](mcp:get_api_reference?platform=angular&component=IRowExportingEventArgs&member=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: @@ -133,8 +133,8 @@ this.excelExportService.export(this.igxGrid1, new IgxExcelExporterOptions('Expor 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) +- [`IgxExcelExporterService API`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) +- [`IgxExcelExporterOptions API`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions) Grids Excel Exporters: @@ -143,7 +143,7 @@ Grids Excel Exporters: Additional components that were used: -- [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme)
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 index f2b7564ba..657284bc9 100644 --- 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 @@ -105,7 +105,7 @@ If all went well, you should see an export button. When pressed, it will trigger ## 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`. +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`](mcp:get_api_reference?platform=angular&component=IRowExportingEventArgs&member=cancel) property to `true`. The following example excludes a column from the export if its header is "Age" and its index is 1: @@ -581,7 +581,7 @@ The PDF Exporter service has a few more APIs to explore, which are listed below. Additional components that were used: -- [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme)
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 index 4b965ae57..a28edade1 100644 --- 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 @@ -327,9 +327,9 @@ The chart also has the ability to consider auto-rotation of the labels if they w 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}`. +Custom label formats such as [`IgxNumberFormatSpecifier`](mcp:get_api_reference?platform=angular&component=IgxNumberFormatSpecifier) and [`IgxDateTimeFormatSpecifier`](mcp:get_api_reference?platform=angular&component=IgxDateTimeFormatSpecifier) 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. +The following example formats the yAxis with a [`IgxNumberFormatSpecifier`](mcp:get_api_reference?platform=angular&component=IgxNumberFormatSpecifier) to represent $USD prices for top box office movies in the United States. ```typescript import { NgModule } from "@angular/core"; 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 index f71c770e7..21e159684 100644 --- 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 @@ -131,7 +131,7 @@ The series row represents each series plotted in the chart. These rows will disp ### 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. +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`](mcp:get_api_reference?platform=angular&component=DataLegendSummaryType&member=Total), [`Min`](mcp:get_api_reference?platform=angular&component=DataLegendSummaryType&member=Min), [`Max`](mcp:get_api_reference?platform=angular&component=DataLegendSummaryType&member=Max), or [`Average`](mcp:get_api_reference?platform=angular&component=DataLegendSummaryType&member=Average) of series values in the summary row. ## Angular Data Legend Columns @@ -261,11 +261,11 @@ The label column displays short name on the left side of value column, e.g. "O" ### 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. +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`](mcp:get_api_reference?platform=angular&component=DataAbbreviationMode&member=Shared). Alternatively, a user can select other abbreviations such as [`Independent`](mcp:get_api_reference?platform=angular&component=DataAbbreviationMode&member=Independent), [`Kilo`](mcp:get_api_reference?platform=angular&component=DataAbbreviationMode&member=Kilo), [`Million`](mcp:get_api_reference?platform=angular&component=DataAbbreviationMode&member=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. +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`](mcp:get_api_reference?platform=angular&component=DataAbbreviationMode&member=Million) abbreviation. ### Customizing Columns 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 index 78f28320f..f64056347 100644 --- 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 @@ -12,7 +12,7 @@ _premium: true 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. +This is directly integrated with the available tools of the [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent). The following topic explains, with examples, how you can utilize the [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent) 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"; @@ -277,7 +277,7 @@ https://dl.infragistics.com/x/css/samples/shared.v8.css ## 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 [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent) 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. @@ -340,7 +340,7 @@ The following is a list of API members mentioned in the above sections: - [`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) +- [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent) ## Additional Resources 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 index 2799fcf0f..cec02b181 100644 --- 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 @@ -159,7 +159,7 @@ igx-icon { ## 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: +To get started with the Ignite UI for Angular [`igxFor`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=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 @@ -227,7 +227,7 @@ The **data** property is an array that provides the data objects used to constru 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). +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) and it can be used to build a virtual [`igx-list`](mcp:get_api_reference?platform=angular&component=IgxListComponent). ### Vertical virtualization @@ -247,7 +247,7 @@ Virtualization works similarly to Paging by slicing the data into smaller chucks ``` -_**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. +_**Note:**_ It is strongly advised that the parent container of the [`igxForOf`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=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 @@ -466,7 +466,7 @@ Follow the [Grid Virtualization](grid/virtualization.md) topic for more detailed ### 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. +The [`igxForOf`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=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
@@ -482,7 +482,7 @@ The [`igxForOf`](https://www.infragistics.com/products/ignite-ui-angular/docs/ty
``` -_**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). +_**Note:**_ There is a requirement to set the [`totalItemCount`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=totalItemCount) property in the instance of [`igxForOf`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=igxForOf). ```typescript this.virtDirRemote.totalItemCount = data['@odata.count']; @@ -495,7 +495,7 @@ In order to access the directive instance from the component, it should be marke public virtDirRemote: IgxForOfDirective; ``` -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: +After the request for loading the first chunk, the [`totalItemCount`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=totalItemCount) can be set: ```typescript public ngAfterViewInit() { @@ -505,7 +505,7 @@ public ngAfterViewInit() { } ``` -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)). +When requesting data you can take advantage of the [`IgxForOfState`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=state) interface, which provides the [`startIndex`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=state.startindex) and [`chunkSize`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=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`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=igxforcontainersize) divided by the [`igxForItemSize`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=igxForItemSize)). ```typescript public getData(data?: IForOfState, cb?: (any) => void): any { @@ -539,7 +539,7 @@ private buildUrl(dataState: any): string { } ``` -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: +Every time the [`chunkPreload`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective&member=chunkPreload) event is thrown, a new chunk of data should be requested: ```typescript chunkLoading(evt) { @@ -572,9 +572,9 @@ The `igxFor` directive includes the following helper properties in its context: ## 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) +- [IgxForOfDirective](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxListComponent](mcp:get_api_reference?platform=angular&component=IgxListComponent) ## Additional Resources 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 index 267e5ff1d..457f445e3 100644 --- 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 @@ -69,7 +69,7 @@ Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and Proporti 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). +This is directly integrated with the available tools of the [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent). Angular user-annotation-create @@ -242,9 +242,9 @@ There is a new property called [`useInsetOutlines`](https://www.infragistics.com #### 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. +- Added new `GroupHeaderTextStyle` property to [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent) and [`IgxToolPanelComponent`](mcp:get_api_reference?platform=angular&component=IgxToolPanelComponent). If set, it will apply to all [`IgxToolActionGroupHeaderComponent`](mcp:get_api_reference?platform=angular&component=IgxToolActionGroupHeaderComponent) actions. +- Added new property on [`IgxToolActionComponent`](mcp:get_api_reference?platform=angular&component=IgxToolActionComponent) called [`titleHorizontalAlignment`](mcp:get_api_reference?platform=angular&component=IgxToolActionComponent&member=titleHorizontalAlignment) which controls the horizontal alignment of the title text. +- Added new property on [`IgxToolActionSubPanelComponent`](mcp:get_api_reference?platform=angular&component=IgxToolActionSubPanelComponent) called [`itemSpacing`](mcp:get_api_reference?platform=angular&component=IgxToolActionSubPanelComponent&member=itemSpacing) which controls the spacing between items inside the panel. ### Bug Fixes @@ -285,7 +285,7 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools - [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) +- [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent) - 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. @@ -311,12 +311,12 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools - [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. +- [`IgxToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent) - 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. +- [`IgxRadialGaugeComponent`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent) + - New label for the highlight needle. [`highlightLabelText`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent&member=highlightLabelText) and [`highlightLabelSnapsToNeedlePivot`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent&member=highlightLabelSnapsToNeedlePivot) and many other styling related properties for the HighlightLabel were added. ## **17.3.0 (March 2024)** @@ -330,14 +330,14 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools ### 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. +- [`IgxRadialGaugeComponent`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent) + - New title/subtitle properties. [`titleText`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent&member=titleText), [`subtitleText`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent&member=titleExtent). Finally, the new [`titleDisplaysValue`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent&member=titleDisplaysValue) will allow the value to correspond with the needle's position. + - New [`opticalScalingEnabled`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent&member=opticalScalingEnabled) and [`opticalScalingSize`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent&member=opticalScalingSize) properties for the [`IgxRadialGaugeComponent`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent). 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`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent&member=highlightValue) and [`highlightValueDisplayMode`](mcp:get_api_reference?platform=angular&component=IgxRadialGaugeComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxLinearGaugeComponent) + - New highlight needle was added. [`highlightValue`](mcp:get_api_reference?platform=angular&component=IgxLinearGaugeComponent&member=highlightValue) and [`highlightValueDisplayMode`](mcp:get_api_reference?platform=angular&component=IgxLinearGaugeComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent) + - The Performance bar will now reflect a difference between the value and new [`highlightValue`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=highlightValue) when the [`highlightValueDisplayMode`](mcp:get_api_reference?platform=angular&component=IgxBulletGraphComponent&member=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)** @@ -350,7 +350,7 @@ The following table lists the bug fixes made for the Ignite UI for Angular tools ### igniteui-angular - Toolbar - - 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. +- Vertical orientation has been added via the toolbar's [`orientation`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent&member=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)** @@ -514,7 +514,7 @@ for example: #### 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 horizontal [`orientation`](mcp:get_api_reference?platform=angular&component=IgxToolbarComponent&member=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) 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 index 2ddd1b918..99df12214 100644 --- 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 @@ -212,7 +212,7 @@ Understanding conditional formatting - it allows for applying formatting such as | `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:
**this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [GridSelectionRange](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/gridselectionrange.html) [ ],
`reset`: boolean (**true** by default) | +| `formatCells` | Applies conditional formatting for the selected cells. Usage:
**this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [GridSelectionRange](mcp:get_api_reference?platform=angular&component=GridSelectionRange) [ ],
`reset`: boolean (**true** by default) | | `clearFormatting` | Removes the conditional formatting from the selected cells. Usage:
**this.conditionalFormatting.clearFormatting()** | | ### IgxChartIntegrationDirective 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 index f557743ba..9e927cba3 100644 --- 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 @@ -222,7 +222,7 @@ Ignite UI for Angular ships two tools for AI-assisted development. ## API References -- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources 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 index 03ab224b8..583e59b6d 100644 --- 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 @@ -433,8 +433,8 @@ When selected row is deleted from the grid component, `rowSelectionChanging` eve - `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) + - `IgxColumnComponent` - [`ColumnType`](mcp:get_api_reference?platform=angular&component=ColumnType) (for example the column parameter in `igxFilterCellTemplate`) + - `IgxGridCell` - [`CellType`](mcp:get_api_reference?platform=angular&component=CellType) (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 @@ -884,8 +884,8 @@ To get a better grasp on the Sass Module System, you can read [this great articl ### 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: + - [`IgxPaginatorComponent`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent) - 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`](mcp:get_api_reference?platform=angular&component=IgxPageSizeSelectorComponent) and [`IgxPageNavigationComponent`](mcp:get_api_reference?platform=angular&component=IgxPageNavigationComponent) are introduced to ease the implementation of any custom content: ```html @@ -988,7 +988,7 @@ To get a better grasp on the Sass Module System, you can read [this great articl - _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): +- Public APIs, which used to return an instance of one of the above, now return an instance of [`IgxGridCell`](mcp:get_api_reference?platform=angular&component=IgxGridCell): ```ts const cell = grid.getCellByColumn(0, 'ProductID'); // returns IgxGridCell @@ -999,13 +999,13 @@ 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) +- `cell` property in the `IGridCellEventArgs` event arguments emitted by _cellClick_, _selected_, _contextMenu_ and _doubleClick_ events is now an instance of [`IgxGridCell`](mcp:get_api_reference?platform=angular&component=IgxGridCell) - `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). +- _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`](mcp:get_api_reference?platform=angular&component=IgxGridCell). - _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. @@ -1160,7 +1160,7 @@ If for any reason you see Sass compilation errors saying `math.div` is not a kno ### 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. +The [**IgxBottomNavComponent**](mcp:get_api_reference?platform=angular&component=IgxBottomNavComponent) 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 @@ -1185,15 +1185,15 @@ The [**IgxBottomNavComponent**](https://www.infragistics.com/products/ignite-ui- ``` - 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 `id`, `itemStyle`, `panels`, `viewTabs`, `contentTabs` and `tabs` properties were removed. Currently, the [`items`](mcp:get_api_reference?platform=angular&component=IgxBottomNavComponent&member=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. + - The tab item's `isSelected` property was renamed to [`selected`](mcp:get_api_reference?platform=angular&component=IgxBottomNavItemComponent&member=selected). + - The `selectedTab` property was renamed to [`selectedItem`](mcp:get_api_reference?platform=angular&component=IgxBottomNavComponent&member=selectedItem). + - The `onTabSelected` and `onTabDeselected` events were removed. We introduced three new events, [`selectedIndexChanging`](mcp:get_api_reference?platform=angular&component=IgxBottomNavComponent&member=selectedIndexChanging),[`selectedIndexChange`](mcp:get_api_reference?platform=angular&component=IgxBottomNavComponent&member=selectedIndexChange) and [`selectedItemChange`](mcp:get_api_reference?platform=angular&component=IgxBottomNavComponent&member=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. +The [**IgxTabsComponent**](mcp:get_api_reference?platform=angular&component=IgxTabsComponent) 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 @@ -1219,17 +1219,17 @@ The [**IgxTabsComponent**](https://www.infragistics.com/products/ignite-ui-angul ``` - 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 `id`, `groups`, `viewTabs`, `contentTabs` and `tabs` properties were removed. Currently, the [`items`](mcp:get_api_reference?platform=angular&component=IgxTabsComponent&member=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. + - The tab item's `isSelected` property was renamed to [`selected`](mcp:get_api_reference?platform=angular&component=IgxTabItemComponent&member=selected). + - The `selectedTabItem` property was shortened to [`selectedItem`](mcp:get_api_reference?platform=angular&component=IgxTabsComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxTabsComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxTabsComponent&member=selectedIndexChanging), [`selectedIndexChange`](mcp:get_api_reference?platform=angular&component=IgxTabsComponent&member=selectedindexchange) and [`selectedItemChange`](mcp:get_api_reference?platform=angular&component=IgxTabsComponent&member=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: +- Public APIs, which used to return an instance of one of the above, now return objects implementing the public [`RowType`](mcp:get_api_reference?platform=angular&component=RowType) interface: ```ts const row = grid.getRowByIndex(0); @@ -1237,9 +1237,9 @@ 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: +While the public API of [`RowType`](mcp:get_api_reference?platform=angular&component=RowType) 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: +- _toggle_ method, exposed by the _IgxHierarchicalRowComponent_ is not available. Use [`expanded`](mcp:get_api_reference?platform=angular&component=RowType&member=expanded) property for all row types: ```ts grid.getRowByIndex(0).expanded = false; @@ -1247,9 +1247,9 @@ 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. +- _row_ property in the event arguments emitted by _onRowPinning_, and _dragData_ property in the event arguments emitted by _onRowDragStart_, _onRowDragEnd_ is now implementing [`RowType`](mcp:get_api_reference?platform=angular&component=RowType) +- _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`](mcp:get_api_reference?platform=angular&component=RowType). +- _getRowByIndex_ will now return a [`RowType`](mcp:get_api_reference?platform=angular&component=RowType) 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 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 index c43cb65a0..f076ead71 100644 --- 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 @@ -237,7 +237,7 @@ 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. +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`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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 @@ -318,7 +318,7 @@ Next, we need to create a map with a few Geographic Series that will later load ## 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. +Next, in constructor of your page, add a [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) for each shapefile that you want to display in the geographic map component. ```ts const sdsPolygons = new IgxShapeDataSource(); @@ -340,7 +340,7 @@ 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. +Process shapes data loaded in [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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'; @@ -369,7 +369,7 @@ public onPolygonsLoaded(sds: IgxShapeDataSource, e: any) { ## 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. +Process shapes data loaded in [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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'; @@ -400,7 +400,7 @@ public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) { ## 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. +Process shapes data loaded in [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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'; @@ -577,4 +577,4 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit { - [`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) +- [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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 index 0d155dde9..ba4e73fea 100644 --- 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 @@ -10,7 +10,7 @@ _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. +The Ignite UI for Angular map component, the [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of [`IgxShapefileRecord`](mcp:get_api_reference?platform=angular&component=IgxShapefileRecord) objects. ## Angular Binding Shape Files with Geo-spatial Data Example @@ -129,28 +129,28 @@ 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. +The following table explains properties of the [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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. | +| [`shapefileSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource&member=shapefileSource) | string | Specifies the Uri to a shape file (.shp) that contains geo-spatial data items. | +| [`databaseSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource&member=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. +When both source properties are set to non-null values, then the [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) is populated with [`IgxShapefileRecord`](mcp:get_api_reference?platform=angular&component=IgxShapefileRecord) 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. +The following code creates an instance of the [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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. +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`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) is an example such array because it contains a list of [`IgxShapefileRecord`](mcp:get_api_reference?platform=angular&component=IgxShapefileRecord) 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. +The [`IgxShapefileRecord`](mcp:get_api_reference?platform=angular&component=IgxShapefileRecord) class provides properties for storing geo-spatial data, listed in the following table. | Property | Description | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -161,8 +161,8 @@ This data structure is suitable for use in most Geographic Series as long as app ## 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. +This code example assumes that shape files were loaded using the [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource). +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`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) and maps the `Points` property of all [`IgxShapefileRecord`](mcp:get_api_reference?platform=angular&component=IgxShapefileRecord) objects. ```html
@@ -249,4 +249,4 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit { - `ImportCompleted` - `ItemsSource` - `Points` -- [`IgxShapeDataSource`](https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_core.igxshapedatasource.html) +- [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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 index cd2f02a37..d912db2fa 100644 --- 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 @@ -10,7 +10,7 @@ _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. +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`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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. @@ -154,17 +154,17 @@ 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. +When a [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) loads its shape files, it converts that data into [`IgxShapefileRecord`](mcp:get_api_reference?platform=angular&component=IgxShapefileRecord) objects. These objects can be retrieved from the `GetPointData()` method of the [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator) 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 [`IgxHeatTileGenerator`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator) object works such that it has three value paths, [`xValues`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=xValues), [`yValues`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=yValues) and [`values`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=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`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=xValues) to be longitude, [`yValues`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=yValues) to be latitude, and [`values`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=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 display of the geographic tile series when using the heat-map functionality can be customized by setting the [`minimumColor`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=minimumColor) and [`maximumColor`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=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`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=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`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator) 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`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=blurRadius), [`maxBlurRadius`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=maxBlurRadius), and [`useBlurRadiusAdjustedForZoom`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=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**. +The [`IgxHeatTileGenerator`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator) can also use a logarithmic scale. If you want to use this, you can set the [`useLogarithmicScale`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=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. +The [`IgxHeatTileGenerator`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator) 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`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=useWebWorkers) property to **true** and then set the [`webWorkerInstance`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=webWorkerInstance) property to an instance of your web worker. @@ -272,13 +272,13 @@ constructor() { ## 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) +- [`IgxHeatTileGenerator`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator) +- [`maximumColor`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=maximumColor) +- [`minimumColor`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=minimumColor) +- [`IgxShapefileRecord`](mcp:get_api_reference?platform=angular&component=IgxShapefileRecord) +- [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) - [`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) +- [`useBlurRadiusAdjustedForZoom`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=useBlurRadiusAdjustedForZoom) +- [`useLogarithmicScale`](mcp:get_api_reference?platform=angular&component=IgxHeatTileGenerator&member=useLogarithmicScale) 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 index 0d36a0fad..a09271a23 100644 --- 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 @@ -99,4 +99,4 @@ The following topics provide additional information related to this topic. - [`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) +- [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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 index 96a506103..47f39e717 100644 --- 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 @@ -126,7 +126,7 @@ Similarly to other types of geographic series in the map component, the [`IgxGeo ## 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). +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`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource). @@ -211,4 +211,4 @@ export class MapTypeScatterSymbolSeriesComponent implements AfterViewInit { - `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) +- [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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 index 8cbb1b75e..009146bb8 100644 --- 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 @@ -180,7 +180,7 @@ Similar to other types of geographic series in the map control, the [`IgxGeograp ## 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). +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`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource). @@ -306,4 +306,4 @@ export class MapTypeShapePolygonSeriesComponent implements AfterViewInit { - [`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) +- [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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 index 5a2506491..14cb57368 100644 --- 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 @@ -171,7 +171,7 @@ Similarly to other types of geographic series in the control, the [`IgxGeographi ## 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). +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`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource). @@ -285,4 +285,4 @@ export class MapTypeShapePolylineSeriesComponent implements AfterViewInit { - [`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) +- [`IgxShapeDataSource`](mcp:get_api_reference?platform=angular&component=IgxShapeDataSource) 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 index c5cf6dde5..a69acf93d 100644 --- 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 @@ -73,16 +73,16 @@ export class GridAdvancedFilteringSampleComponent implements OnInit { ```
## 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 open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. The dialog is using the [`IgxQueryBuilder`](mcp:get_api_reference?platform=angular&component=IgxQueryBuilderComponent) 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`. +To enable the advanced filtering, the [`allowAdvancedFiltering`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +The advanced filtering generates a [`FilteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=FilteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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); @@ -110,7 +110,7 @@ ngAfterViewInit(): void { 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. +In case you don't want to show the Grid toolbar, you could use the [`openAdvancedFilteringDialog`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -183,7 +183,7 @@ export class GridExternalAdvancedFilteringComponent { } ``` ### 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: +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`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarAdvancedFilteringComponent&member=grid) property: ```html @@ -197,7 +197,7 @@ To get started with styling the Advanced Filtering dialog, we need to import the // 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. +Since the Advanced Filtering dialog uses the [`IgxQueryBuilder`](mcp:get_api_reference?platform=angular&component=IgxQueryBuilderComponent) 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 @@ -318,8 +318,8 @@ $custom-query-builder: query-builder-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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridComponent API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index adc00aa73..3795de090 100644 --- 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 @@ -8,11 +8,11 @@ _premium: true --- # 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. +The Batch Editing feature of the IgxGrid is based on the [`TransactionService`](mcp:get_api_reference?platform=angular&component=IgxTransactionService). 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. +The following sample demonstrates a scenario, where the grid has [`batchEditing`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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'; @@ -222,7 +222,7 @@ Then, all you need to do is enable `batchEditing` from your Grid: ``` 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: +After batch editing is enabled, define a `IgxGrid` with bound data source and [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditable) set to true and bind: ```html @@ -235,7 +235,7 @@ After batch editing is enabled, define a `IgxGrid` with bound data source and [` (click)="openCommitDialog(dialogGrid)">Commit ... ``` -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. +The following code demonstrates the usage of the [`transactions`](mcp:get_api_reference?platform=angular&component=IgxTransactionService) API - undo, redo, commit. ```typescript export class GridBatchEditingSampleComponent { @ViewChild('grid', { read: IgxGridComponent }) public gridRowEditTransaction: IgxGridComponent; @@ -259,9 +259,9 @@ export class GridBatchEditingSampleComponent { } ``` > [!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. +> 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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +> Disabling [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -553,8 +553,8 @@ igx-paginator { } ``` ## 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) +- [transactions](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=transactions) +- [igxTransactionService](mcp:get_api_reference?platform=angular&component=IgxTransactionService) ## Additional Resources - [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) - [Grid Overview](grid.md) 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 index dc7fa2723..ca7ebb2bf 100644 --- 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 @@ -225,7 +225,7 @@ export class GridCascadingCombosComponent implements OnInit { } ``` ## 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**. +In order enable column editing, make sure [`editable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 @@ -239,8 +239,8 @@ import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo'; }) 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). +Then, in the template, you should bind the combos [igx-simple-combo](mcp:get_api_reference?platform=angular&component=IgxSimpleComboComponent) 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](mcp:get_api_reference?platform=angular&component=IgxSimpleComboComponent&member=displayKey), the simple combobox will use the specified `valueKey` (if any). ```typescript export class MySimpleComboComponent implements OnInit { public countriesData: Country[]; @@ -256,7 +256,7 @@ export class MySimpleComboComponent implements OnInit { } } ``` -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. +In order to handle the selection change, we need [selectionChanging()](mcp:get_api_reference?platform=angular&component=IgxComboComponent&member=selectionChanging). The emitted event arguments, [IComboSelectionChangingEventArgs](mcp:get_api_reference?platform=angular&component=IComboSelectionChangingEventArgs), 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 ``` @@ -268,7 +268,7 @@ public countryChanging(event: IComboSelectionChangingEventArgs) { } ``` 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. +The [`id`](mcp:get_api_reference?platform=angular&component=IgxLinearProgressBarComponent&member=id) is necessary to set the value of `id` attribute. ```html
-- [IgxSimpleComboComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxsimplecombocomponent.html) +- [IgxSimpleComboComponent](mcp:get_api_reference?platform=angular&component=IgxSimpleComboComponent) - [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](mcp:get_api_reference?platform=angular&component=IgxLinearProgressBarComponent) - [IgxLinearProgressBarComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-progress-linear-theme) ## Additional Resources - [Grid Editing](editing.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 index dfe197c69..04cb3a33f 100644 --- 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 @@ -277,7 +277,7 @@ 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): +Another way to update cell is directly through [`update`](mcp:get_api_reference?platform=angular&component=IgxGridCell&member=update) method of [`IgxGridCell`](mcp:get_api_reference?platform=angular&component=IgxGridCell): ```typescript public updateCell() { const cell = this.grid1.getCellByColumn(rowIndex, 'ReorderLevel'); @@ -288,7 +288,7 @@ public updateCell() { ``` ### 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): +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](mcp:get_api_reference?platform=angular&component=IgxCellTemplateDirective). 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`](mcp:get_api_reference?platform=angular&component=IgxGridCell&member=editValue): ```html @@ -398,7 +398,7 @@ export class GridSelectComponent implements OnInit { ```
> [!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). +> Any changes made to the cell's [`editValue`](mcp:get_api_reference?platform=angular&component=IgxGridCell&member=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. @@ -651,9 +651,9 @@ Main benefits of the above approach include: ## 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. +The [`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. +The Grid component exposes the [`addRow`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. @@ -661,7 +661,7 @@ 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. +Updating data in the Grid is achieved through [`updateRow`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=updateRow) and [`updateCell`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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); @@ -674,7 +674,7 @@ 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. +Please keep in mind that [`deleteRow()`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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); @@ -689,7 +689,7 @@ These can be wired to user interactions, not necessarily related to the **igx-gr
### 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). +In this example, we'll validate a cell based on the data entered in it by binding to the [`cellEdit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 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) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [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) +_[IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxInputDirective](mcp:get_api_reference?platform=angular&component=IgxInputDirective) +- [IgxDatePickerComponent](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) - [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](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) - [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](mcp:get_api_reference?platform=angular&component=OverlaySettings) - [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) ## Additional Resources
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 index 1c401eef1..7334b0e1a 100644 --- 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 @@ -345,7 +345,7 @@ Due to the specific behavior of merged cells it has to be noted how exactly it t | :------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------- | | 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 API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 12afb8115..e48bcfcba 100644 --- 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 @@ -7,7 +7,7 @@ _tocName: Cell selection _premium: true --- # 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. @@ -331,7 +331,7 @@ export class GridMultiCellSelectionComponent { ### 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. +> When single cell is selected [`selected`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -353,13 +353,13 @@ If you want to disable cell selection you can just set `[cellSelection]="'none'" 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. +[`selectRange(range)`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +[`selectRange(range)`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=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. +[`selectRange(range)`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 }; @@ -372,23 +372,23 @@ this.grid1.selectRange(range); > 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. +[`clearCellSelection()`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +[`clearCellSelection()`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=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. +[`clearCellSelection()`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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: +[`getSelectedData()`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +[`getSelectedData()`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=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: +[`getSelectedData()`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=getSelectedData) will return array of the selected data in format depending on the selection. Examples below: } 1. If three different single cells are selected: @@ -445,17 +445,17 @@ this.grid1.selectRange(range); ``` @@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. +> [`selectedCells()`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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()`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +> [`selectedCells()`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=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()`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=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. +> [`selectedCells()`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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()`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 @@ -553,9 +553,9 @@ $custom-grid-theme: 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 API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +_[IgxGridRow API](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxGridCell API](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 824340693..d7f773156 100644 --- 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 @@ -133,14 +133,14 @@ Copy behavior is working with the default interaction defined by the browser and - 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` +We expose [`clipboardOptions`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=clipboardOptions) @Input property, which handles the following options: +- [`enabled`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=clipboardoptions.enabled) Enables/disables copying of selected cells. +- [`copyHeaders`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=clipboardoptions.copyHeaders) Include the associated headers when copying. +- [`copyFormatters`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=clipboardoptions.copyFormatters) Apply any existing column formatters to the copied data. +- [`separator`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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) +- [`gridCopy`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=gridCopy) Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`clipboardOptions`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=clipboard%D0%9Eptions) ## Additional Resources
- [Grid overview](grid.md) 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 index 81ce84e6e..5b290012e 100644 --- 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 @@ -202,8 +202,8 @@ Another way to achieve this behavior is to use the igxCollapsibleIndicator direc > 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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
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 index 3db682026..369e02cca 100644 --- 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 @@ -7,7 +7,7 @@ _tocName: Column Hiding _premium: true --- # 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. +The Ignite UI for Angular Grid provides an [`IgxColumnActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent) with an [`IgxColumnHidingDirective`](mcp:get_api_reference?platform=angular&component=IgxColumnHidingDirective) 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'; @@ -81,8 +81,8 @@ Let's start by creating our Grid and binding it to our data. We will also enable ``` ## 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. +The built-in Column Hiding UI is placed inside an [`IgxDropDownComponent`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) 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`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarActionsComponent) and the [`IgxGridToolbarHidingComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent) inside of the Grid. We will also add a title to our toolbar by using the [`IgxGridToolbarTitleComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarTitleComponent) and a custom style for our Grid's wrapper. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html @@ -106,7 +106,7 @@ For this purpose all we have to do is set both the [`IgxGridToolbarActionsCompon ``` } 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. +By using the `igx-grid-toolbar-hiding` [`title`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent&member=title) property, we will set the title that is displayed inside the dropdown button in the toolbar. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html @@ -122,17 +122,17 @@ By using the `igx-grid-toolbar-hiding` [`title`](https://www.infragistics.com/pr
``` } -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. +By using the [`columnsAreaMaxHeight`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent&member=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. +In order to use the expanded set of functionalities for the column hiding UI, we can use the IgxColumnActionsComponent's [`columnsAreaMaxHeight`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent&member=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 `IgxColumnActionsComponent`. +Let's say we want to manually define our [`IgxColumnActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent), add the [`IgxColumnHidingDirective`](mcp:get_api_reference?platform=angular&component=IgxColumnHidingDirective) so that it knows what its purpose would be and put it anywhere on the page. First, however, we need to import the `IgxColumnActionsComponent`. ```typescript // app.module.ts ... @@ -147,7 +147,7 @@ import { }) 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! +Now let's create our [`IgxColumnActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent). 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`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent&member=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 @@ -212,7 +212,7 @@ Now let's create our [`IgxColumnActionsComponent`](https://www.infragistics.com/ ``` } ### 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. +A couple more things we can do in order to enrich the user experience of our column hiding component is to set the [`title`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent&member=title) and the [`filterColumnsPrompt`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent&member=filtercolumnsprompt) properties. The [`title`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent&member=title) is displayed on the top and the [`filterColumnsPrompt`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent&member=filterColumnsPrompt) is the prompt text that is displayed in the filter input of our column hiding UI. ```html
@@ -222,7 +222,7 @@ A couple more things we can do in order to enrich the user experience of our col
``` ### 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: +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`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent&member=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) component. @@ -240,7 +240,7 @@ import { }) 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. +Now all we have to do is bind the [`checked`](mcp:get_api_reference?platform=angular&component=IgxRadioComponent&member=checked) property of both radio buttons respectively with different conditions and handle their click events. ```html
@@ -258,7 +258,7 @@ Now all we have to do is bind the [`checked`](https://www.infragistics.com/produ
``` ### 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. +We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their [`disableHiding`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=disableHiding) property to true. @@if (igxName === 'IgxGrid') { ```html @@ -647,22 +647,22 @@ $dark-ripple-theme: 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](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent) - [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) +[`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) properties: +- [hiddenColumnsCount](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=hiddenColumnsCount) +[`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) properties: +- [disableHiding](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=disablehiding) +[`IgxGridToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent) properties: +- [showProgress](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent&member=showProgress) +[`IgxGridToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent) components: +- [IgxGridToolbarTitleComponent](mcp:get_api_reference?platform=angular&component=IgxGridToolbarTitleComponent) +- [IgxGridToolbarActionsComponent](mcp:get_api_reference?platform=angular&component=IgxGridToolbarActionsComponent) +[`IgxGridToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent) methods: +[`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) events: +- [columnVisibilityChanged](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnVisibilityChanged) +[IgxRadioComponent](mcp:get_api_reference?platform=angular&component=IgxRadioComponent) 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) 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 index d1c4df66d..946177ba3 100644 --- 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 @@ -176,29 +176,29 @@ export class GridMovingSampleComponent { ```
## 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). +**Column moving** feature is enabled on a per-grid level, meaning that the [**igx-grid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) could have either movable or immovable columns. This is done via the [`moving`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=moving) input of the [`igx-grid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent). ```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. +[`moveColumn`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +[`move`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +Note that when using the API, only the [`columnMovingEnd`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnMovingStart), [`columnMoving`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnMoving) and [`columnMovingEnd`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnMovingEnd). +You can subscribe to the [`columnMovingEnd`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnMovingEnd) event of the [`igx-grid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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 @@ -345,8 +345,8 @@ $dark-grid-column-moving-theme: grid-theme( >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) +- [ColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) ## Additional Resources
- [Grid overview](grid.md) 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 index d3826e58c..91c479604 100644 --- 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 @@ -87,7 +87,7 @@ export class PinningToolbarSampleComponent implements OnInit{ } ``` ## 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. +Column pinning is controlled through the `pinned` input of the [`igx-column`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent). 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 @@ -98,13 +98,13 @@ Column pinning is controlled through the `pinned` input of the [`igx-column`](ht ``` -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: +You may also use the Grid's [`pinColumn`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=pinColumn) or [`unpinColumn`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=unpinColumn) methods of the [`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnPin) event and changing the [`insertAtIndex`](mcp:get_api_reference?platform=angular&component=IPinColumnEventArgs&member=insertAtIndex) property of the event arguments to the desired position index. ```html ``` @@ -116,7 +116,7 @@ public columnPinning(event) { } ``` ## 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. +You can change the column pinning position via the [`pinning`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -693,8 +693,8 @@ $custom-theme: grid-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) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) ## Additional Resources
- [Grid overview](grid.md) 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 index 969bd7908..fb9422e19 100644 --- 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 @@ -63,11 +63,11 @@ export class ResizingSampleComponent { } ```
-**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). +**Column resizing** is also enabled per-column level, meaning that the [**igx-grid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=resizable) input of the [`igx-column`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent). ```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. +You can subscribe to the [`columnResized`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnResized) event of the [`igx-grid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) object, are exposed through the event arguments. ```html @@ -98,7 +98,7 @@ Resizing columns with width in pixels works by directly adding or subtracting th **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). +You can also configure the minimum and maximum allowable column widths. This is done via the [`minWidth`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=minWidth) and [`maxWidth`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=maxWidth) inputs of the [`igx-column`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent). 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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=minWidth) and [`maxWidth`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=maxWidth). ```html @@ -115,8 +115,8 @@ or [minWidth]="'5%'" [maxWidth]="'15%'"> ``` ## 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). +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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=maxWidth) is set on that column and the new width exceeds that [`maxWidth`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=maxWidth) value. In this case the column will be sized according to preset [`maxWidth`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=maxWidth) value. +You can also auto-size a column dynamically using the exposed [`autosize()`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=autosize) method on [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent). ```typescript @ViewChild('grid') grid: IgxGridComponent; let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; @@ -221,8 +221,8 @@ export class GridResizeLineStylingSampleComponent implements OnInit { >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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
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 index 36e98aec5..b163972a8 100644 --- 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 @@ -80,11 +80,11 @@ igx-select { ```
## 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. +The column selection feature can be enabled through the [`columnSelection`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +The default selection mode is `none`. If set to `single` or `multiple` all of the presented columns will be [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable). With that being said, in order to select a column, we just need to click on one, which will mark it as [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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). +> [`Multi-column Headers`](multi-column-headers.md) don't reflect on the [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable) input. The [`IgxColumnGroupComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) is [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable), if at least one of its children has the selection behavior enabled. In addition, the component is marked as [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=selected) if all of its `selectable` descendants are [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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'; @@ -149,14 +149,14 @@ export class GridColumnGroupSelectionComponent implements OnInit, AfterViewInit
## 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`. +> The keyboard combinations are available only when the grid [`columnSelection`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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**. +The **API** provides some additional capabilities when it comes to the **non-visible** columns such that, every **hidden** column could be marked as [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +> The above statement also applies to the [`IgxColumnGroupComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent), except that when the [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=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. @@ -257,25 +257,25 @@ $custom-grid-theme: grid-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](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxColumnGroupComponent](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) - [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) +[`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) properties: +- [columnSelection](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnSelection) +- [selectedColumns](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=selectedColumns) +- [selectColumns](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=selectColumns) +- [deselectColumns](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=deselectColumns) +- [selectAllColumns](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=selectAllColumns) +- [deselectAllColumns](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=deselectAllColumns) +[`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) properties: +- [selectable](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable) +- [selected](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selected) +[`IgxColumnGrpupComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) properties: +- [selectable](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=selectable) +- [selected](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=selected) +[`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) events: +- [onColumnsSelectionChange](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=onColumnsSelectionChange) ## Additional Resources - [Grid overview](grid.md) - [Selection](selection.md) 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 index 1f826c10e..991cb7428 100644 --- 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 @@ -437,11 +437,11 @@ igx-input-group { } ``` ## 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. +If you want to enable a data type-specific template, you should set the column [`dataType`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +This column [`dataType`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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: +If the [`dataType`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=dataType) is set to _number_, the cell value will be formatted based on application or grid's [`locale`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale) settings, as well as when [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 @@ -455,7 +455,7 @@ public formatOptions = this.options; ``` ### 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): +The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale) format or [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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: @@ -501,9 +501,9 @@ public timeFormats = [ ``` #### 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. +- dateTime - [IgxDateTimeEditor directive](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective) will be used. This editor will give you a mask directions for the input elements part of the DateTime object. +- date - [IgxDatePicker component](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) will be used. +- time - [IgxTimePicker component](mcp:get_api_reference?platform=angular&component=IgxTimePickerComponent) 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; @@ -515,14 +515,14 @@ Time type column sorts based on the time portion of the object, ms will be disre 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. +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](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) 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). +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale). _By using LOCALE_ID_ ```ts import { LOCALE_ID } from '@angular/core'; @@ -539,7 +539,7 @@ _By using Grid's locale_ ``` -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_. +By using the [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=pipeArgs) input the end-user can customize the number format by _decimal point_, _currencyCode_ and _display_. ```ts public options = { digitsInfo: '3.4-4', @@ -593,7 +593,7 @@ Default template is using the value coming from the data as an image source to a ``` -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. +When [auto-generating](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -624,10 +624,10 @@ public init(column: IgxColumnComponent) { } ``` ## 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) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) +- Column [pipeArgs](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=pipeArgs) +- Grid [locale](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale) +- Column [dataType](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=dataType) ## Additional Resources
- For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates) 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 index 0b3368854..567c0c7a3 100644 --- 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 @@ -10,18 +10,18 @@ _premium: true 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; +- By setting [`rowClasses`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowClasses) input on the IgxGrid component; +- By setting [`rowStyles`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +You can conditionally style the IgxGrid rows by setting the [`rowClasses`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +The [`rowClasses`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 = { @@ -292,7 +292,7 @@ export class GridRowStylesComponent { ## 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. +- By setting the [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) input [`cellClasses`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 = { @@ -314,12 +314,12 @@ private downFontCondition = (rowData: any, columnKey: any): boolean => { } ``` ### 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. +You can conditionally style the IgxGrid cells by setting the [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) [`cellClasses`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +The [`cellClasses`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 => { @@ -513,7 +513,7 @@ export class GridConditionalCellStyleComponent implements OnInit { } ```
-- 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. +- By using the [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) input [`cellStyles`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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%)', @@ -728,7 +728,7 @@ export class GridConditionalCellStyle2Component implements OnInit {
## 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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) => { @@ -749,8 +749,8 @@ editDone(evt) { ``` ## 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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
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 index 09b327bfb..b64aae6d2 100644 --- 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 @@ -160,15 +160,15 @@ igx-buttongroup{ ```
## 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: +As you can see in the demo above, the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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`; +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**](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=width) is `80px`; +- **--ig-size-medium** - this is the middle size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=width) is `64px`; +- **--ig-size-small** - this is the smallest size with `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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: @@ -268,11 +268,11 @@ 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. +Another option that [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) provides for you, in order to be able to change the height of the rows in the Grid, is the property [`rowHeight`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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` CSS variable will have **NO** impact on row height **if there is [rowHeight](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +And now we can extend our sample and add [`rowHeight`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowHeight) property to the Grid: ```html
## API References
-- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent)
## Additional Resources - [Grid overview](grid.md) 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 index c7e568cc2..581965923 100644 --- 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 @@ -14,7 +14,7 @@ _tocName: Editing # 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). +In order to specify which edit mode should be enabled, the Grid exposes the following boolean properties - [`editable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=editable) and [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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; @@ -28,22 +28,22 @@ In the Grid if you set rowEditable property to true, and editable property is no - _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. + If you want to use a data type specific _edit templates_, you should specify the column [`dataType`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=dataType) property. So let's now see what are the default templates for each type: +- For `string` data type, default template is using [igxInput](mcp:get_api_reference?platform=angular&component=IgxInputDirective) +- For `number` data type, default template is using [igxInput](mcp:get_api_reference?platform=angular&component=IgxInputDirective) 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](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) +- For `dateTime` data type, default template is using [IgxDateTimeEditor directive](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective). 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](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent). +- For `time` - data type, default template is using [IgxTimePicker component](mcp:get_api_reference?platform=angular&component=IgxTimePickerComponent). +- For `boolean` data type, default template is using [igxCheckbox](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) +- For `currency` data type, default template is using [IgxInputGroup](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) with prefix/suffix configuration based on application or grid locale settings. +- For `percent` data type, default template is using [IgxInputGroup](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) 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. +The template editors of `date`, `dateTime` and `time` column data types use a default input format as per the `IgxGrid`'s [`locale`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale). +In case the [`pipeArgs`](mcp:get_api_reference?platform=angular&component=ColumnType&member=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`](mcp:get_api_reference?platform=angular&component=ColumnType&member=editorOptions) object of type [`IColumnEditorOptions`](mcp:get_api_reference?platform=angular&component=IColumnEditorOptions) 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', @@ -56,17 +56,17 @@ const editorOptions: IColumnEditorOptions = { 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` | +| [`rowEditEnter`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditEnter) | If `rowEditing` is enabled, fires when a row enters edit mode | [IGridEditEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`cellEditEnter`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellEditEnter) | Fires when a cell **enters edit mode** (after `rowEditEnter`) | [IGridEditEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`cellEdit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellEdit) | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | [IGridEditEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`cellEditDone`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=celleditdone) | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditDoneEventArgs) | `false` | +| [`cellEditExit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellEditExit) | Fires when a cell **exits edit mode** | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `false` | +| [`rowEdit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`rowEditDone`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditDone) | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `false` | +| [`rowEditExit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditExit) | If `rowEditing` is enabled, fires when a row **exits edit mode** | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `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. +- `CellEditEnter` - Prevents entering cell edit. If [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: @@ -271,15 +271,15 @@ public onSorting(event: ISortingEventArgs) { } ``` ## API References -- [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [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) +_[IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxInputDirective](mcp:get_api_reference?platform=angular&component=IgxInputDirective) +- [IgxDatePickerComponent](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) - [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](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) - [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](mcp:get_api_reference?platform=angular&component=OverlaySettings) - [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) ## Additional Resources
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 index 6e915a524..4a671e9ff 100644 --- 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 @@ -149,20 +149,20 @@ igx-buttongroup{ ```
## 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`. +To turn on the grid excel filtering, two inputs should be set. The [`allowFiltering`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=allowFiltering) should be set to `true` and the [`filterMode`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 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`](mcp:get_api_reference?platform=angular&component=FilteringLogic&member=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). +Sorting, pinning and hiding features can be removed from the filter menu using the corresponding inputs: [`sortable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=sortable), [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selected), [`disablePinning`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=disablePinning), [`disableHiding`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=disableHiding). ```html @@ -178,7 +178,7 @@ Sorting, pinning and hiding features can be removed from the filter menu using t ```
-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). +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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable).
```typescript import { Component, OnInit, ViewChild } from '@angular/core'; @@ -281,7 +281,7 @@ If you want to further customize the Excel style filter menu without disabling t - `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. +The following code demonstrates how to define a custom Excel style filter menu using the [`igx-excel-style-header`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleHeaderComponent), [`igx-excel-style-sorting`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleSortingComponent) and [`igx-excel-style-search`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleSearchComponent) components. ```html @@ -431,20 +431,20 @@ export class ExcelStyleFilteringSample3Component implements OnInit { } ``` 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) +- [`igx-excel-style-header`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleHeaderComponent) +- [`igx-excel-style-sorting`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleSortingComponent) +- [`igx-excel-style-moving`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleMovingComponent) +- [`igx-excel-style-pinning`](mcp:get_api_reference?platform=angular&component=IgxExcelStylePinningComponent) +- [`igx-excel-style-hiding`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleHidingComponent) +- [`igx-excel-style-selecting`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleSelectingComponent) +- [`igx-excel-style-clear-filters`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleClearFiltersComponent) +- [`igx-excel-style-conditional-filter`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleConditionalFilterComponent) +- [`igx-excel-style-search`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleSearchComponent)
## 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: +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`](mcp:get_api_reference?platform=angular&component=FormattedValuesFilteringStrategy). } 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'; @@ -610,7 +610,7 @@ export class GridExternalExcelStyleFilteringComponent implements OnInit { ```
### 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. +In order to configure the Excel style filtering component, you should set its [`column`](mcp:get_api_reference?platform=angular&component=IgxGridExcelStyleFilteringComponent&member=column) property to one of the Grid's columns. In the sample above, we have bound the [`column`](mcp:get_api_reference?platform=angular&component=IgxGridExcelStyleFilteringComponent&member=column) property to the value of an IgxSelectComponent that displays the Grid's columns. ```html @@ -623,7 +623,7 @@ In order to configure the Excel style filtering component, you should set its [` ``` ## 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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'; @@ -947,8 +947,8 @@ $custom-drop-down: drop-down-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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridComponent API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index bde570714..a937c1647 100644 --- 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 @@ -9,12 +9,12 @@ _premium: true # 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. +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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html), call the respective [`export`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=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 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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html), call the appropriate [`export`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=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. @@ -109,7 +109,7 @@ export class ExcelExportSample1Component implements OnInit {
## 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. +1. Import the [`IgxExcelExporterService`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) 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 @@ -127,7 +127,7 @@ To initiate an export process you may use the handler of a button in your compon ``` -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. +You may access either exporter service by defining it as a constructor dependency and letting Angular provide an instance. Calling the shared [`export`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=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 @@ -245,7 +245,7 @@ export class ExcelExportSample1Component implements OnInit { ``` } ## 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. +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](mcp:get_api_reference?platform=angular&component=IgxExporterOptionsBase) [ignoreMultiColumnHeaders](mcp:get_api_reference?platform=angular&component=IgxExporterOptionsBase&member=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') { @@ -509,7 +509,7 @@ export class HGridMultiColumnHeadersExportComponent implements OnInit { ``` } ## 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. +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](mcp:get_api_reference?platform=angular&component=IgxExporterOptionsBase) [freezeHeaders](mcp:get_api_reference?platform=angular&component=IgxExporterOptionsBase&member=freezeHeaders) flag to `true` before calling `export` and the service will handle the rest. ```typescript public exportButtonHandler() { const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile'); @@ -519,7 +519,7 @@ public exportButtonHandler() { ``` 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. +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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=columnexporting) and [`rowExporting`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=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 @@ -530,7 +530,7 @@ this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventAr }); 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. +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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions) 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 | @@ -540,12 +540,12 @@ Before shipping exports to production users, review the following platform const | 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) +- [IgxExcelExporterService API](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) +- [IgxExcelExporterOptions API](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions) - [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 API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme)
## Additional Resources 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 index 90f7ffffd..1d9a4690f 100644 --- 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 @@ -8,7 +8,7 @@ _tocName: Filtering # 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_. +The sample below demonstrates Grid's **Quick filtering** user experience. API [filter()](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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'; @@ -113,17 +113,17 @@ export class FilteringSampleComponent implements OnInit { ```
## 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: +In order to specify if filtering is enabled and which filtering mode should be used, the Grid exposes the following boolean properties - [`allowFiltering`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=allowFiltering), [`allowAdvancedFiltering`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=allowAdvancedFiltering), [`filterMode`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filterMode) and [`filterable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=filterable). +Property **[allowFiltering](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +Property **[allowAdvancedFiltering](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +Property **[filterMode](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +Property **[filterable](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 @@ -132,7 +132,7 @@ Property **[filterable](https://www.infragistics.com/products/ignite-ui-angular/ ``` -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`. +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=allowAdvancedFiltering) input properties to `true`. ```html @@ -143,8 +143,8 @@ To enable the [Advanced filtering](advanced-filtering.md) however, you need to s 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`. +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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=dataType) of the column, the correct set of [**filtering operations**](mcp:get_api_reference?platform=angular&component=IFilteringOperation) is loaded inside the filter UI dropdown. Additionally, you can set the [`ignoreCase`](mcp:get_api_reference?platform=angular&component=IFilteringExpression) and the initial [`condition`](mcp:get_api_reference?platform=angular&component=IFilteringExpression&member=condition) properties. +Filtering feature is enabled for the Grid component by setting the [`allowFiltering`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=allowFiltering) input to `true`. The default [`filterMode`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filterMode) is `quickFilter` and it **cannot** be changed run time. To disable this feature for a certain column – set the [`filterable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=filterable) input to `false`. ```html @@ -154,14 +154,14 @@ Filtering feature is enabled for the Grid component by setting the [`allowFilter ``` > [!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. +You can filter any column or a combination of columns through the Grid API. The Grid exposes several methods for this task - [`filter`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filter), [`filterGlobal`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filterglobal) and [`clearFilter`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=clearFilter). +- [`filter`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +- [`IgxFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxFilteringOperand): this is a base filtering operand, which can be inherited when defining custom filtering conditions. +- [`IgxBooleanFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxBooleanFilteringOperand) defines all default filtering conditions for `boolean` type. +- [`IgxNumberFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxNumberFilteringOperand) defines all default filtering conditions for `numeric` type. +- [`IgxStringFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxStringFilteringOperand) defines all default filtering conditions for `string` type. +- [`IgxDateFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxDateFilteringOperand) 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 @@ -193,13 +193,13 @@ 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. +- [`filterGlobal`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +- [`clearFilter`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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'); @@ -207,7 +207,7 @@ this.grid.clearFilter('ProductName'); 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. +To set the initial filtering state of the Grid, set the [`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) [`filteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filteringExpressionsTree) property to an array of [`IFilteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IFilteringExpressionsTree) for each column to be filtered. ```typescript constructor(private cdr: ChangeDetectorRef) { } public ngAfterViewInit() { @@ -227,15 +227,15 @@ public ngAfterViewInit() { } ``` ### 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. +The [`filteringLogic`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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/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. +The default value of [`AND`](mcp:get_api_reference?platform=angular&component=FilteringLogic&member=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`](mcp:get_api_reference?platform=angular&component=FilteringLogic&member=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 @@ -243,9 +243,9 @@ The Grid supports remote filtering, which is demonstrated in the [`Grid Remote D
} ## 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. +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`](mcp:get_api_reference?platform=angular&component=IgxBooleanFilteringOperand), [`IgxDateFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxDateFilteringOperand), [`IgxNumberFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxNumberFilteringOperand) and [`IgxStringFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxStringFilteringOperand)). You can extend these classes or their base class [`IgxFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxFilteringOperand) 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. +To do that, extend the [`IgxStringFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxStringFilteringOperand) and [`IgxBooleanFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxBooleanFilteringOperand), modify the operations and their logic, and set the column [`filters`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=filters) input to the new operands. ```typescript // grid-custom-filtering.component.ts export class GridCustomFilteringComponent { @@ -819,21 +819,21 @@ $dark-drop-down-theme: drop-down-theme( > [!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: +- IgxGrid `filteringExpressions` property is removed. Use [`filteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filteringexpressionstree) instead. +- `filter_multiple` method is removed. Use [`filter`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filter) method and [`filteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filteringExpressionsTree) property instead. +- The [`filter`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. + - `conditionOrExpressionTree` (optional) - this parameter accepts object of type [`IFilteringOperation`](mcp:get_api_reference?platform=angular&component=IFilteringOperation) or [`IFilteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IFilteringExpressionsTree). 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. +- [`filteringDone`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filteringDone) event now have only one parameter of type [`IFilteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IFilteringExpressionsTree) which contains the filtering state of the filtered column. +- filtering operands: [`IFilteringExpression`](mcp:get_api_reference?platform=angular&component=IFilteringExpression) condition property is no longer a direct reference to a filtering condition method, instead it's a reference to an [`IFilteringOperation`](mcp:get_api_reference?platform=angular&component=IFilteringOperation). +- [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) now exposes a [`filters`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=filters) property, which takes an [`IgxFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxFilteringOperand) class reference. +- Custom filters can be provided to the Grid columns by populating the [`operations`](mcp:get_api_reference?platform=angular&component=IgxFilteringOperand&member=operations) property of the [`IgxFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxFilteringOperand) with operations of [`IFilteringOperation`](mcp:get_api_reference?platform=angular&component=IFilteringOperation) 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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridComponent API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index edf88fcd7..be7b67706 100644 --- 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 @@ -865,7 +865,7 @@ Now that you have the Ignite UI for Angular Grid module or directives imported, 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. +The [`autoGenerate`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=autoGenerate) property tells the `igx-grid` to auto generate the grid's [`IgxColumnComponent`s](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) 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 @@ -874,7 +874,7 @@ The [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-angular/doc ## 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. +> The [`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. @@ -901,11 +901,11 @@ Following this topic you will learn more about [cell template](grid.md#cell-temp ## 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. +[`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) is used to define the grid's [`columns`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +Let's turn the [`autoGenerate`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=autoGenerate) property off and define the columns collection in the markup: ```html @@ -985,7 +985,7 @@ As you can see, we are adding **draggable** attribute set to _false_. ... ``` -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: +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`](mcp:get_api_reference?platform=angular&component=CellType) instance itself as shown below: ```html @@ -1016,7 +1016,7 @@ When properly implemented, the cell editing template also ensures that the cell' ### 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`. +to set the [`editable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=editable) property of the [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) to `true`. ```html @@ -1029,11 +1029,11 @@ to set the [`editable`](https://www.infragistics.com/products/ignite-ui-angular/ ``` -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. +Make sure to check the API for the [`CellType`](mcp:get_api_reference?platform=angular&component=CellType) 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. +Each of the column templates can be changed programmatically at any point through the [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) 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 @@ -1065,7 +1065,7 @@ const column = this.grid.getColumnByName("User"); 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. +Column properties can also be set in code in the [`columnInit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnInit) event which is emitted when the columns are initialized in the grid. ```typescript public initColumns(column: IgxGridColumn) { @@ -1081,7 +1081,7 @@ The code above will make the **ProductName** column sortable and editable and wi ### 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'`). +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. @@ -1091,7 +1091,7 @@ Also, there are optional parameters for formatting: - `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: +To allow customizing the display format by these parameters, the [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 = { @@ -1112,7 +1112,7 @@ All available column data types could be found in the official [Column types top ## 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: +The [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) handles **flat data** and nested **POJOs(Plain old Java objects)**. The data structure specific for rendering is in the form: ```typescript const OBJECT_ARRAY = [{ @@ -1152,7 +1152,7 @@ const POJO = [{ >[!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.** +>If you use [autoGenerate](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=autoGenerate) columns **the data keys must be identical.** ## Angular Grid Data Binding @@ -1278,11 +1278,11 @@ and in the template of the component: ``` -**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. +**Note**: The grid [`autoGenerate`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +The [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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: @@ -1505,9 +1505,9 @@ export class GridNestedDataBindComponent implements OnInit{ ### 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). +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`](mcp:get_api_reference?platform=angular&component=IgxGridRow&member=data) property of the [IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow). -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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridRow&member=data) property provides you this opportunity. Below is the data that we are going to use: @@ -1770,8 +1770,8 @@ platformBrowserDynamic() | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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 [`width`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=width) does not depend on the column widths | The [`width`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=width). | +| Grid nested in parent container | When grid's [`width`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. | @@ -1783,11 +1783,11 @@ platformBrowserDynamic() ## API References -- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) ## Theming Dependencies 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 index f0c3a72e7..323b2ac79 100644 --- 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 @@ -9,7 +9,7 @@ _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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -156,7 +156,7 @@ export class GridGroupBySampleComponent { ## 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. +It is possible to define initial grouping of the grid by assigning an array of expressions to the [`groupingExpressions`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=groupingExpressions) property of the grid. ```typescript public ngOnInit() { @@ -167,13 +167,13 @@ public ngOnInit() { } ``` -Grouping expressions implement the [`ISortingExpression`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html) interface. +Grouping expressions implement the [`ISortingExpression`](mcp:get_api_reference?platform=angular&component=ISortingExpression) 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`. +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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=groupable) property to `true`. ```html @@ -190,7 +190,7 @@ public ngOnInit() { } ``` -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). +During runtime the expressions are gettable and settable from the [`groupingExpressions`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=groupingExpressions) property. If you need to add or change an existing expression you may also use the [`groupBy`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=groupby) method with either a single or an array of [`ISortingExpression`](mcp:get_api_reference?platform=angular&component=ISortingExpression). ```typescript grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }); @@ -201,7 +201,7 @@ grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: ### 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: +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) component [`groupingExpansionState`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 { @@ -215,7 +215,7 @@ export interface IGroupByExpandState { } ``` -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. +As with [`groupingExpressions`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=groupingExpressions), setting a list of [`IGroupByExpandState`](mcp:get_api_reference?platform=angular&component=IGroupByExpandState) directly to the [`groupingExpansionState`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=groupingExpansionState) will change the expansion accordingly. Additionally [`igxGrid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) exposes a method that toggles a group by the group record instance. ```typescript const groupRow = this.grid.groupsRecords.find(r => r.value === "France"); @@ -224,13 +224,13 @@ As with [`groupingExpressions`](https://www.infragistics.com/products/ignite-ui- 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +Selecting/Deselecting all rows in a group is available through the [`selectRowsInGroup`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=selectRowsInGroup) and [`deselectRowsInGroup`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +The code snippet below can be used to select all rows within a group using the group record instance [`selectRowsInGroup`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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"); @@ -238,7 +238,7 @@ The code snippet below can be used to select all rows within a group using the g 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. +If you need to deselect all rows within a group programmatically, you can use the [`deselectRowsInGroup`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=deselectRowsInGroup) method. ```typescript const groupRow = this.grid.groupsRecords.find(r => r.value === "France"); @@ -440,7 +440,7 @@ The grouping UI supports the following keyboard interactions: - 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) +- For group [`igxChip`](mcp:get_api_reference?platform=angular&component=IgxChipComponent) 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 @@ -452,7 +452,7 @@ The grouping UI supports the following keyboard interactions: 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. +> 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`](mcp:get_api_reference?platform=angular&component=DefaultSortingStrategy). After the data is sorted the custom groups can be determined by specifying a [`groupingComparer`](mcp:get_api_reference?platform=angular&component=IGroupingExpression&member=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. @@ -694,7 +694,7 @@ class WeekSortingStrategy extends BaseSortingStrategy { 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. +Each custom strategy extends the base [`DefaultSortingStrategy`](mcp:get_api_reference?platform=angular&component=DefaultSortingStrategy) and defines the [`compareValues`](mcp:get_api_reference?platform=angular&component=DefaultSortingStrategy&member=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 { @@ -752,7 +752,7 @@ class WeekSortingStrategy extends BaseSortingStrategy { } ``` -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. +A [`groupingComparer`](mcp:get_api_reference?platform=angular&component=IGroupingExpression&member=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) => { @@ -1133,13 +1133,13 @@ $custom-chips-theme: chip-theme( ## 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](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxGroupByRow](mcp:get_api_reference?platform=angular&component=IgxGroupByRow) - [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) +- [ISortingExpression](mcp:get_api_reference?platform=angular&component=ISortingExpression) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IGroupByExpandState](mcp:get_api_reference?platform=angular&component=IGroupByExpandState) +- [IgxChipComponent](mcp:get_api_reference?platform=angular&component=IgxChipComponent) - [IgxChipComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-chip-theme) ## Additional Resources 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 index 6f19edba3..0007b67cc 100644 --- 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 @@ -1793,12 +1793,12 @@ $custom-checkbox-theme: checkbox-theme( 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: +| [`gridKeydown`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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](mcp:get_api_reference?platform=angular&component=IGridKeydownEventArgs) | +| [`activeNodeChange`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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](mcp:get_api_reference?platform=angular&component=IActiveNodeChangeEventArgs) | +| [`navigateTo`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=getNextCell) | returns [`ICellPosition`](mcp:get_api_reference?platform=angular&component=ICellPosition) object, which defines the next cell by `rowIndex` and `visibleColumnIndex`. A callback function can be passed as a third parameter of [`getNextCell`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=getPreviousCell) | returns [`ICellPosition`](mcp:get_api_reference?platform=angular&component=ICellPosition) object, which defines the previous cell by `rowIndex` and `visibleColumnIndex`. A callback function can be passed as a third parameter of [`getPreviousCell`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=gridKeydown) event: ```html ``` @@ -1816,7 +1816,7 @@ public customKeydown(args: IGridKeydownEventArgs) { } } ``` -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: +Based on the [IGridKeydownEventArgs](mcp:get_api_reference?platform=angular&component=IGridKeydownEventArgs) 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) { @@ -1928,7 +1928,7 @@ export class GridCustomKBNavigationComponent implements OnInit { | :--------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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 API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index bba8c56c0..4d67a330f 100644 --- 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 @@ -798,13 +798,13 @@ By using the [ComponentFactoryResolver](https://angular.io/api/core/ComponentFac ### 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](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxTreeGridRow](mcp:get_api_reference?platform=angular&component=IgxTreeGridRow) +- [IgxHierarchicalGridRow](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridRow) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) ## Additional Resources
- [Virtualization and Performance](virtualization.md) 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 index eecae19a4..20df2a5a6 100644 --- 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 @@ -286,7 +286,7 @@ Context of the template is the master record data, so that values from the maste ## 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: +The expansion states can be controlled via the [`expansionStates`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -296,11 +296,11 @@ The expansion states can be controlled via the [`expansionStates`](https://www.i 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) +- [`expandAll`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=expandAll) +- [`collapseAll`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=collapseAll) +- [`toggleRow`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=toggleRow) +- [`expandRow`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=expandRow) +- [`collapseRow`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=collapseRow) ## Keyboard navigation @@ -329,10 +329,10 @@ Additional API methods for controlling the expansion states are also exposed: ## API References -- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxTreeGridRow](mcp:get_api_reference?platform=angular&component=IgxTreeGridRow) +- [IgxHierarchicalGridRow](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridRow) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) 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 index 61a54d3d5..96c0d7b62 100644 --- 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 @@ -7,7 +7,7 @@ _tocName: Multi-column Headers _premium: true --- # 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. +[`IgxGrid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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'; @@ -40,7 +40,7 @@ export class GridMultiColumnHeadersComponent { } } ``` -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. +The declaration of `Multi-column header` could be achieved by wrapping a set of columns into [`igx-column-group`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) component with [`header`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=header) title passed. ```html @@ -50,7 +50,7 @@ The declaration of `Multi-column header` could be achieved by wrapping a set of ``` -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. +For achieving `n-th` level of nested headers, the declaration above should be followed. So by nesting [`igx-column-group`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) leads to the desired result. ```html @@ -62,7 +62,7 @@ For achieving `n-th` level of nested headers, the declaration above should be fo ``` -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). +Every [`igx-column-group`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) 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.
@@ -91,7 +91,7 @@ The `ng-template` is provided with the column group object as a context. ... ``` -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: +If you want to re-use a single template for several column groups, you could set the [`headerTemplate`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=headertemplate) property of the column group like this: ```html {{ columnGroup.header | uppercase }} @@ -267,9 +267,9 @@ $custom-theme: grid-theme( >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](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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) +- [IgxColumnGroupComponent](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent)
## Additional Resources
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 index 1273cbeef..f990dcfd1 100644 --- 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 @@ -89,12 +89,12 @@ export class GridMultiRowLayoutComponent { 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. +The declaration of Multi-row Layout is achieved through [`igx-column-layout`](mcp:get_api_reference?platform=angular&component=IgxColumnLayoutComponent) 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`. +- [`colStart`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=colStart) - column index from which the field is starting. This property is **mandatory**. +- [`rowStart`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=rowStart) - row index from which the field is starting. This property is **mandatory**. +- [`colEnd`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 @@ -119,7 +119,7 @@ The declaration of Multi-row Layout is achieved through [`igx-column-layout`](ht 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. +> [`rowStart`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=rowStart) and [`colStart`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. @@ -145,8 +145,8 @@ IgxGridComponent with Multi-Row Layouts provides build-in keyboard navigation. > 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` +- [`gridKeydown`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=gridKeydown) is exposed. The event will emit [`IGridKeydownEventArgs`](mcp:get_api_reference?platform=angular&component=IGridKeydownEventArgs). 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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -220,7 +220,7 @@ export class GridMRLCustomNavigationComponent { } ``` ## 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: +Sometimes when configuring a column layout it might be a challenge to calculate and set the proper [`colStart`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=colStart) and [`colEnd`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=colEnd) or [`rowStart`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=rowStart) and [`rowEnd`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. @@ -355,10 +355,10 @@ $custom-theme: grid-theme( >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](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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) +- [IgxColumnLayoutComponent](mcp:get_api_reference?platform=angular&component=IgxColumnLayoutComponent) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent)
## Additional Resources
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 index 5ea3556f1..1a0e968ce 100644 --- 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 @@ -109,7 +109,7 @@ $progressBar-sample-theme: progress-linear-theme( 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: +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`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=perPage) input controls the visible records per page. Let’s update our Grid to enable paging: ```html @@ -464,7 +464,7 @@ igx-paginator { ```
## API References -- [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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 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 index b21317a3b..e1647d628 100644 --- 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 @@ -9,11 +9,11 @@ _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. +The Ignite UI for Angular [`IgxGrid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. +This sample demonstrates how to implement pasting from Excel into the [`igxGrid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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: @@ -238,7 +238,7 @@ export class GridPasteSampleComponent { ## 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. +You should add the `paste-handler` directive (you can find its code in the next section) to the [`igxGrid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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 @@ -427,7 +427,7 @@ export class PasteHandler { ## API References -- [IgxGridComponent](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) ## Additional Resources 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 index 77d8e51b5..d81250e99 100644 --- 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 @@ -218,8 +218,8 @@ export class RemoteFilteringSampleComponent implements OnInit, AfterViewInit, On 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. +The [IgxGrid](mcp:get_api_reference?platform=angular&component=IgxGridComponent) supports the scenario in which the data chunks are requested from a remote service, exposing the behavior implemented in the [`igxForOf`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) directive it uses internally. +To utilize this feature, you need to subscribe to the [`dataPreLoad`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=dataPreLoad) output so that you make the appropriate request based on the arguments received, as well as set the public [IgxGrid](mcp:get_api_reference?platform=angular&component=IgxGridComponent) property [`totalItemCount`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=totalItemCount) with the respective information coming from the service. ```html [!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. +>The first [`chunkSize`](mcp:get_api_reference?platform=angular&component=IForOfState&member=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'; @@ -753,7 +753,7 @@ export class GridRemoteVirtualizationAddRowSampleComponent implements AfterViewI } ``` ## 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. +To provide remote sorting and filtering, you need to subscribe to the [`dataPreLoad`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=dataPreLoad), [`sortingExpressionsChange`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=sortingExpressionsChange) and [`filteringExpressionsTreeChange`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filteringexpressionstreechange) outputs, so that you make the appropriate request based on the arguments received, as well as set the public [IgxGrid](mcp:get_api_reference?platform=angular&component=IgxGridComponent) property [`totalItemCount`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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; @@ -782,7 +782,7 @@ public ngAfterViewInit() { }); } ``` -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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=sortStrategy) and the [`filterStrategy`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=filterStrategy) inputs of the grid to the `NoopSortingStrategy` and the `NoopFilteringStrategy` respective instances. ```html 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: +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +> When the [`uniqueColumnValuesStrategy`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=uniqueColumnValuesStrategy) input is provided, the default unique values generating process in the excel style filtering will not be used. ```html ... @@ -960,7 +960,7 @@ export class RemotePagingGridSample implements OnInit, AfterViewInit, OnDestroy } 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. +If you want to use the _default paging template_ you need to set the Paginator's [`totalRecords`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=pagingMode) property to _GridPagingMode.remote_. Also it is necessary to either subscribe to [`pagingDone`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=pagingDone) or [`perPageChange`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=perPageChange) events in order to fetch the data from your remote service, it depends on the use case which event will be used. ```html @@ -1102,7 +1102,7 @@ export class RemotePagingDefaultTemplateComponent implements OnInit, AfterViewIn } ``` ### 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. +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`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=perPage). We are going to use the `` in order to ease our example configuration, along with the [`IgxPageSizeSelectorComponent`](mcp:get_api_reference?platform=angular&component=IgxPageSizeSelectorComponent) and [`IgxPageNavigationComponent`](mcp:get_api_reference?platform=angular&component=IgxPageNavigationComponent) 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
-- [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) +- [IgxPaginatorComponent API](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent) +- [IgxGridComponent API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 1c4a92ffb..3603ab088 100644 --- 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 @@ -22,8 +22,8 @@ import { IgxActionStripModule } from 'igniteui-angular/action-strip'; }) ``` 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. +- [`IgxGridEditingActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) - 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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditable) option and row deletion of the grid. +- [`IgxGridPinningActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) - 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 @@ -137,9 +137,9 @@ export class GridActionStripSampleComponent { > 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) +- [`IgxActionStripComponent API`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent) 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) +- [`IgxGridActionsBaseDirective`](mcp:get_api_reference?platform=angular&component=IgxGridActionsBaseDirective) +- [`IgxGridPinningActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) +- [`IgxGridEditingActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) +- [`IgxDividerDirective`](mcp:get_api_reference?platform=angular&component=IgxDividerDirective) 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 index 60c0e9735..cae6f1f1d 100644 --- 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 @@ -75,7 +75,7 @@ import { IgxGridModule } from 'igniteui-angular'; }) 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. +Then define a Grid with bound data source and [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditable) set to true and an [Action Strip](../action-strip.md) component with editing actions enabled. The [`addRow`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent&member=addRow) input controls the visibility of the button that spawns the row adding UI. ```html @@ -93,10 +93,10 @@ Then define a Grid with bound data source and [`rowEditable`](https://www.infrag > [!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`. +> 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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +> The IgxGridEditingActions input controlling the visibility of the add row button may use the action strip context (which is of type [`RowType`](mcp:get_api_reference?platform=angular&component=RowType)) to fine tune which records the button shows for. +The internal [`IgxBaseTransactionService`](mcp:get_api_reference?platform=angular&component=IgxBaseTransactionService) 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. @@ -150,7 +150,7 @@ In most remote data scenarios the Primary Key assignment happens on the create s 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. + 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](mcp:get_api_reference?platform=angular&component=TransactionService&member=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: @@ -158,16 +158,16 @@ The row adding UI comprises the buttons in the `IgxActionStrip` editing actions, - [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) +- [rowEditable](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditable) +- [onRowEditEnter](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=onRowEditEnter) +- [onRowEdit](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=onRowEdit) +- [rowEditDone](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditDone) +- [onRowEditCancel](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=onRowEditCancel) +- [endEdit](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=endEdit) +- [primaryKey](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=primaryKey) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxActionStripComponent](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent) +- [IgxGridEditingActionsComponent](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) ## Additional Resources
- [Grid Overview](grid.md) 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 index 7b31df1f2..ce14edcad 100644 --- 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 @@ -7,7 +7,7 @@ _tocName: Row Drag _premium: true --- # 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. +In Ignite UI for Angular Grid, **RowDrag** is initialized on the root `igx-grid` component and is configurable via the [`rowDraggable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 */ @@ -123,13 +123,13 @@ igx-grid { } ``` ## 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. +In order to enable row-dragging for your `igx-grid`, all you need to do is set the grid's [`rowDraggable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +Clicking on the drag-handle and _moving the cursor_ while holding down the button will cause the grid's [`rowDragStart`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowDragStart) event to fire. Releasing the click at any time will cause [`rowDragEnd`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. @@ -170,7 +170,7 @@ Since the grid will initially be empty, we also define a template that will be m 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 when a row is dropped on a non-droppable area using the `animation` parameter of the [`rowDragEnd`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 { @@ -181,7 +181,7 @@ export class IgxGridRowDragComponent { } ``` ### 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. +Once we've defined our drop-area in the template, we have to declare our handlers for the `igxDrop`'s [`enter`](mcp:get_api_reference?platform=angular&component=IgxDropDirective&member=enter), [`leave`](mcp:get_api_reference?platform=angular&component=IgxDropDirective&member=leave) and [`dropped`](mcp:get_api_reference?platform=angular&component=IgxDropDirective&member=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 { @@ -230,7 +230,7 @@ export class IgxGridRowDragComponent { } } ``` -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 +Once the row is dropped, we just call the row's [`delete()`](mcp:get_api_reference?platform=angular&component=IgxGridRowComponent&member=delete) method } ```typescript export class IgxGridRowDragComponent { @@ -401,7 +401,7 @@ igx-icon{ ```
### 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`. +The drag handle icon can be templated using the grid's [`dragIndicatorIconTemplate`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -866,7 +866,7 @@ class MyRowGhostComponent { } } ``` -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. +Finally, we create a method that will be used to handle the [`IgxDragDirective.dragMove`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=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 { @@ -913,7 +913,7 @@ class MyRowGhostComponent { ``` #### 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. +In order to track the position of the cursor, we bind to the `dragMove` event of the [`IgxDragDirective`](mcp:get_api_reference?platform=angular&component=IgxDragDirective&member=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 @@ -1249,10 +1249,10 @@ export class GridDropIndicatorComponent implements AfterViewInit, OnDestroy { ## 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) +- [rowDraggable](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowDraggable) +- [rowDragStart](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowDragStart) +- [rowDragEnd](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowDragEnd) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) ## Additional Resources
- [Grid Overview](grid.md) 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 index 3a5c7e9b7..3aa6e753b 100644 --- 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 @@ -71,7 +71,7 @@ import { IgxGridModule } from 'igniteui-angular'; }) 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: +Then define a Grid with bound data source and [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditable) set to true: ```html @@ -89,7 +89,7 @@ Then define a Grid with bound data source and [`rowEditable`](https://www.infrag > [!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`. +> It's not needed to enable editing for individual columns. Using the [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=editable) column's input to `false`. ```typescript import { Component, ViewChild } from '@angular/core'; import { data } from './data'; @@ -111,7 +111,7 @@ export class GridRowEditSampleComponent { } ``` > [!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. +> The Grid uses internally a provider [`IgxBaseTransactionService`](mcp:get_api_reference?platform=angular&component=IgxBaseTransactionService) 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. @@ -324,16 +324,16 @@ igx-grid { - 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) +- [rowEditable](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditable) +- [onRowEditEnter](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=onRowEditEnter) +- [onRowEdit](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=onRowEdit) +- [rowEditDone](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditDone) +- [onRowEditCancel](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=onRowEditCancel) +- [endEdit](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=endEdit) +- [field](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=field) +- [editable](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=editable) +- [primaryKey](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=primaryKey) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) ## Additional Resources
- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) 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 index 6cc4f94ad..df6c5610a 100644 --- 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 @@ -98,17 +98,17 @@ The built-in row pinning UI is enabled by adding an `igxActionStrip` component w ``` ## 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. +Row pinning is controlled through the `pinned` input of the [`row`](mcp:get_api_reference?platform=angular&component=RowType). 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: +You may also use the Grid's [`pinRow`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=pinRow) or [`unpinRow`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=unpinRow) methods of the [`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. +Note that the row ID is the primary key value, defined by the [`primaryKey`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowPinning) event and changing the [`insertAtIndex`](mcp:get_api_reference?platform=angular&component=IPinRowEventArgs&member=insertAtIndex) property of the event arguments to the desired position index. ```html @@ -119,7 +119,7 @@ public rowPinning(event) { } ``` ## 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. +You can change the row pinning position via the [`pinning`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -551,11 +551,11 @@ $custom-theme: grid-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](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxTreeGridRow](mcp:get_api_reference?platform=angular&component=IgxTreeGridRow) +- [IgxHierarchicalGridRow](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridRow) +- [RowType](mcp:get_api_reference?platform=angular&component=RowType) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 90553869d..0083709db 100644 --- 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 @@ -369,9 +369,9 @@ ul { ```
## 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. +In order to setup row selection in the [`igx-grid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent), 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. +In the [`igx-grid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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 @@ -389,7 +389,7 @@ public handleRowSelection(args) { } ``` ### 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. +To enable multiple row selection in the [`igx-grid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) just set the [`rowSelection`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -436,7 +436,7 @@ If you need to deselect rows programmatically, you can use the `deselectRows(row ``` ### 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: +When there is some change in the row selection **[`rowSelectionChanging`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. @@ -444,7 +444,7 @@ When there is some change in the row selection **[`rowSelectionChanging`](https: - `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. +In remote data scenarios, when the grid has a `primaryKey` set, [`rowSelectionChanging.oldSelection`](mcp:get_api_reference?platform=angular&component=IRowSelectionEventArgs&member=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 @@ -458,11 +458,11 @@ public handleRowSelectionChange(args) { } ``` ### 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. +Another useful API method that [`igx-grid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. +[`igx-grid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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 @@ -801,9 +801,9 @@ export class GridConditionalRowSelectorsComponent { ```
## 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 API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +_[IgxGridRow API](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxGridCell API](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index d2d6b98ab..9708fcecd 100644 --- 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 @@ -195,8 +195,8 @@ 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: +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=findNext) and [`findPrev`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=findNext) and the [`findPrev`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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) @@ -222,7 +222,7 @@ Let's also display the position of the current occurrence, along with the total ``` ### 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. +In order to freely search and navigate among our search results, let's create a couple of buttons by invoking the [`findNext`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=findNext) and the [`findPrev`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=findPrev) methods inside the buttons' respective click event handlers. ```html
@@ -231,7 +231,7 @@ In order to freely search and navigate among our search results, let's create a
``` ### 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=findNext)/[`findPrev`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=findPrev) methods depending on which key the user has pressed. ```html Case sensitive @@ -270,7 +270,7 @@ public updateExactSearch() { } ``` ### 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. +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`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=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. @@ -299,7 +299,7 @@ import { 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=clearSearch) method to clear the highlights. ```html @@ -355,7 +355,7 @@ On the right in our input group, let's create three separate containers with the ... ``` -- 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. +- 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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=findNext)/[`findPrev`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=findPrev) methods. ```html @@ -372,26 +372,26 @@ On the right in our input group, let's create three separate containers with the ## 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. | +| 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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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) +[`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) methods: +- [findNext](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=findNext) +- [findPrev](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=findPrev) +- [clearSearch](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=clearSearch) +- [refreshSearch](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=refreshSearch) +[`IgxGridCell`](mcp:get_api_reference?platform=angular&component=IgxGridCell) methods: +[`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) properties: +- [searchable](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=searchable) +[ISearchInfo](mcp:get_api_reference?platform=angular&component=ISearchInfo) 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) +- [IgxInputGroupComponent](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) +- [IgxIconComponent](mcp:get_api_reference?platform=angular&component=IgxIconComponent) +- [IgxRippleDirective](mcp:get_api_reference?platform=angular&component=IgxRippleDirective) +- [IgxButtonDirective](mcp:get_api_reference?platform=angular&component=IgxButtonDirective) +- [IgxChipComponent](mcp:get_api_reference?platform=angular&component=IgxChipComponent) 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) 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 index d666c8776..a832b38a5 100644 --- 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 @@ -14,13 +14,13 @@ With the sample, illustrated beyond, you may see how multiple selection is being ## 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. +The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classes, [`IgxSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand), [`IgxNumberSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand) or [`IgxDateSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand), 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=selected) event and to the [`rangeSelected`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +In the events subscription logic, you can extract the selected data using the grid's [`getSelectedData`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=getSelectedData) function and pass the selected data to the custom summary operand. ## Summary @@ -235,8 +235,8 @@ div.igx-grid__tfoot { ## 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 API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxGridCell API](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources @@ -247,8 +247,8 @@ div.igx-grid__tfoot { - [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) +- [IgxNumberSummaryOperand](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand) +- [IgxDateSummaryOperand](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand) - [Summaries](summaries.md) - [Paging](paging.md) 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 index ad48b75a4..e944e8cfe 100644 --- 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 @@ -225,21 +225,21 @@ export class GridCellSelectionComponent implements OnInit { ```
## 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowSelection), [`cellSelection`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellSelection) or [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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: +Property [`rowSelection`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +Property [`cellSelection`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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**: +The [`selectable` property](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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: @@ -248,7 +248,7 @@ The [`selectable` property](https://www.infragistics.com/products/ignite-ui-angu - 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. +Using the [`contextMenu`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -491,9 +491,9 @@ export class GridContextmenuSampleComponent implements OnInit { - 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 API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +_[IgxGridRow API](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxGridCell API](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index e15f153d5..8fea8a21d 100644 --- 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 @@ -7,14 +7,14 @@ _tocName: Sizing _premium: true --- # 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. +There are many different ways to size the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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**](mcp:get_api_reference?platform=angular&component=IgxGridComponent), 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. +> If the Border box sizing is overridden by the user we cannot guarantee that the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. +If the `width` input does not have value assigned, its default value is `100%` and the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. +> Setting manually the `width` style of the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. @@ -32,16 +32,16 @@ The grid's `width` can accepts value of `null`, which when set, renders all colu > [!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 the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) `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: +- 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**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) `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. +When the `width` of the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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% @@ -53,11 +53,11 @@ When the `width` of the [**IgxGrid**](https://www.infragistics.com/products/igni 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. +By default if no height is defined for the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent), 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. +> Setting manually the `height` style of the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. +The [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) `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 @@ -71,7 +71,7 @@ The [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angular/docs/t > [!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. +Setting the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) `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 @@ -83,7 +83,7 @@ Setting the [**IgxGrid**](https://www.infragistics.com/products/ignite-ui-angula 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 `height` input is set to percentages the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. @@ -92,10 +92,10 @@ Let's have `width` set to `1200px` and the parent element not having any size ap - 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`. +- If we set the parent element height to `800px` and the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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. +- If the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) `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 @@ -107,7 +107,7 @@ Depending on the grid size itself, the columns inside it can also be sized diffe ### 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`. +- If a column does not have specified `width` and the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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`. @@ -125,11 +125,11 @@ When the grid is resized in these scenarios, the column width is also updated to > [!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. +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**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) `width` or exceed it. +- If the combined `width` of all columns is less than the [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) `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**](mcp:get_api_reference?platform=angular&component=IgxGridComponent). 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. +- If the combined `width` of all columns is bigger than the actual [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) `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 @@ -150,7 +150,7 @@ When columns have set `width` in percentages, their size is calculated relativel 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. +The [**IgxGrid**](mcp:get_api_reference?platform=angular&component=IgxGridComponent) 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 @@ -218,8 +218,8 @@ While the spacing properties affect both header and body cells, you can target t > [!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 API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +_[IgxGridRow API](mcp:get_api_reference?platform=angular&component=IgxGridRow) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 3d38b5ccf..945199449 100644 --- 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 @@ -131,7 +131,7 @@ igx-simple-combo { } ```
-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: +This is done via the [`sortable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=sortable) input. With the Grid sorting, you can also set the [`sortingIgnoreCase`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=sortingIgnoreCase) property to perform case sensitive sorting: ```html ``` @@ -224,7 +224,7 @@ export class GridSortingIndicatorsComponent implements OnInit, AfterViewInit { ``` } ## 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: +You can sort any column or a combination of columns through the Grid API using the Grid [`sort`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=sort) method: ```typescript import { SortingDirection } from 'igniteui-angular/core'; // import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package @@ -237,8 +237,8 @@ this.grid.sort([ ]); ``` > [!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: +> Sorting is performed using our [`DefaultSortingStrategy`](mcp:get_api_reference?platform=angular&component=DefaultSortingStrategy) algorithm. Any [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=sortStrategy) or [`ISortingExpression`](mcp:get_api_reference?platform=angular&component=ISortingExpression&member=strategy) can use a custom implementation of the [`ISortingStrategy`](mcp:get_api_reference?platform=angular&component=ISortingStrategy) 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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=clearsort) method: ```typescript // Removes the sorting state from the ProductName column this.grid.clearSort('ProductName'); @@ -246,11 +246,11 @@ this.grid.clearSort('ProductName'); 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. +> The [`sortStrategy`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=sortStrategy) of the **Grid** is of different type compared to the [`sortStrategy`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +It is possible to set the initial sorting state of the Grid by passing an array of sorting expressions to the [`sortingExpressions`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=sortingExpressions) property of the Grid. ```typescript public ngAfterViewInit(): void { this.grid.sortingExpressions = [ @@ -262,7 +262,7 @@ public ngAfterViewInit(): void { } ``` > [!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. +> If values of type `string` are used by a column of [`dataType`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. @@ -429,9 +429,9 @@ $custom-theme: 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) +- [IgxGridComponent API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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) +- [ISortingExpression](mcp:get_api_reference?platform=angular&component=ISortingExpression) ## Additional Resources
- [Grid overview](grid.md) 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 index 418a5bff2..50b28137e 100644 --- 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 @@ -7,9 +7,9 @@ _tocName: State Persistence _premium: true --- # 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. +Тhe igxGridState directive allows developers to easily save and restore the grid state. When the [`IgxGridState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective) directive is applied on the grid, it exposes the [`getState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=getState) and [`setState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=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: +[`IgxGridState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective) directive supports saving and restoring the state of the following features: - `Sorting` - `Filtering` - `Advanced Filtering` @@ -24,14 +24,14 @@ _premium: true - Multi column headers - 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. + - Column properties defined by the [`IColumnState`](mcp:get_api_reference?platform=angular&component=IColumnState) 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. +> The [`IgxGridState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective) 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. +> The `Row Selection` feature requires the [`primaryKey`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +[`getState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=getState) will return an [`IGridState`](mcp:get_api_reference?platform=angular&component=IGridState) 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 @@ -41,12 +41,12 @@ 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. +[`setState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=setState) - The [`setState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=setState) method accepts the serialized JSON string or [`IGridState`](mcp:get_api_reference?platform=angular&component=IGridState) 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. +`options` - The [`options`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=options) object implements the [`IGridStateOptions`](mcp:get_api_reference?platform=angular&component=IGridStateOptions) 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`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=getState) method will not put the state of these features in the returned value and [`setState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=setState) method will not restore state for it. ```typescript public options = { cellSelection: false; sorting: false; } ``` @@ -78,7 +78,7 @@ public restoreGridState() { ## 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: +1. Define a template reference variable (in the example below it is `#activeTemplate`) and assign an event handler for the [`columnInit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnInit) event: @@if (igxName === 'IgxGrid') { ```html @@ -115,7 +115,7 @@ For such scenarios, the following [`limitations`](state-persistence.md#limitatio ``` } -1. 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: +1. Query the template view in the component using @ViewChild or @ViewChildren decorator. In the [`columnInit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnInit) event handler, assign the template to the column `bodyTemplate` property: ```typescript @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef; public onColumnInit(column: IgxColumnComponent) { @@ -427,9 +427,9 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit { } ``` ## 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: +[`IgxGridState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective) 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`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=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. +> [`stateParsed`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridstatedirective) is only emitted when we are using [`setState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=setState) with string argument. - Set custom sorting strategy and custom column and row dimension strategies: ```html ## 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) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxGridStateDirective](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective) ## Additional Resources
- [Grid overview](grid.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 index 9a2322f74..ba5688564 100644 --- 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 @@ -210,7 +210,7 @@ export class GridSample3Component { > [!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: +For `string` and `boolean` [`data types`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=dataType), the following function is available: - count For `number`, `currency` and `percent` data types, the following functions are available: - count @@ -223,7 +223,7 @@ For `date` data type, the following functions are available: - 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). +**Grid summaries** are enabled per-column by setting [`hasSummary`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=datatype) property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid [`locale`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale) and column [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=pipeArgs). ```html @@ -231,7 +231,7 @@ All available column data types could be found in the official [Column types top ``` -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**. +The other way to enable/disable summaries for a specific column or a list of columns is to use the public method [`enableSummaries`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=enableSummaries)/[`disableSummaries`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=disableSummaries) of the **igx-grid**. ```html @@ -253,7 +253,7 @@ public disableSummary() { } ``` ## 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). +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`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand), [`IgxNumberSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand) or [`IgxDateSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand) according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. [`IgxSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand) class provides the default implementation only for the [`count`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand&member=count) method. [`IgxNumberSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand) extends [`IgxSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand) and provides implementation for the [`min`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand&member=min), [`max`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand&member=max), [`sum`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand&member=sum) and [`average`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand&member=average). [`IgxDateSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand) extends [`IgxSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand) and additionally gives you [`earliest`](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand&member=earliest) and [`latest`](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand&member=latest). ```typescript import { IgxSummaryResult } from 'igniteui-angular/core'; import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular/grids/core'; @@ -274,8 +274,8 @@ class MySummary extends IgxNumberSummaryOperand { } } ``` -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). +As seen in the examples, the base classes expose the [`operate`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand&member=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`](mcp:get_api_reference?platform=angular&component=IgxSummaryResult). ```typescript interface IgxSummaryResult { key: string; @@ -286,8 +286,8 @@ interface IgxSummaryResult { 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. +> In order to calculate the summary row height properly, the Grid needs the [`operate`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand&member=operate) method to always return an array of [`IgxSummaryResult`](mcp:get_api_reference?platform=angular&component=IgxSummaryResult) 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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=summaries) property to the class we create below. ```html @@ -417,9 +417,9 @@ export class GridAllDataSummaryComponent { ``` -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. +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](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +> Column summary template could be defined through API by setting the column [summaryTemplate](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=summaryTemplate) property to the required TemplateRef. ```typescript import { Component, HostBinding, OnInit } from '@angular/core'; import { IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; @@ -604,7 +604,7 @@ igx-buttongroup { } ``` ## 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. +The [`disabledSummaries`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -1065,7 +1065,7 @@ export class GridDisableSummariesComponent implements OnInit, AfterViewInit { } ``` ## 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. +By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid [`locale`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale) and column [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=summaryFormatter) property. ```typescript public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { const result = summary.summaryResult; @@ -1149,17 +1149,17 @@ import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scro } ``` ## 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: +When you have grouped by columns, the Grid allows you to change the summary position and calculation mode using the [`summaryCalculationMode`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=summaryCalculationMode) and [`summaryPosition`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=summaryPosition) properties. Along with these two properties the IgxGrid exposes and [`showSummaryOnCollapse`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +The available values of the [`summaryPosition`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +The [`showSummaryOnCollapse`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +> The [`summaryPosition`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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'; @@ -1330,8 +1330,8 @@ igx-buttongroup{ ```
## 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: +There is an [`exportSummaries`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions&member=exportSummaries) option in `IgxExcelExporterOptions` that specifies whether the exported data should include the grid's summaries. Default `exportSummaries` value is **false**. +The [`IgxExcelExporterService`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) 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'; @@ -1784,14 +1784,14 @@ $custom-theme: grid-summary-theme( } ``` ## API References -- [IgxGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html) +- [IgxGridComponent API](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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) +- [IgxSummaryOperand](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand) +- [IgxNumberSummaryOperand](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand) +- [IgxDateSummaryOperand](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand) +- [IgxColumnGroupComponent](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) ## Additional Resources
- [Grid overview](grid.md) 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 index b12edbcc8..d42c8d912 100644 --- 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 @@ -7,7 +7,7 @@ _tocName: Toolbar _premium: true --- # 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: +The Grid in Ignite UI for Angular provides an [`IgxGridToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent) 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 @@ -135,7 +135,7 @@ The predefined `actions` and `title` UI components are added inside the ` ``` -> 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. +> Note: As seen in the code snippet above, the predefined `actions` UI components are wrapped in the [`` container](mcp:get_api_reference?platform=angular&component=IgxGridToolbarActionsComponent). 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 @@ -317,7 +317,7 @@ export class GridToolbarSample2Component { } ``` ### 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). +Setting a title for the toolbar in your grid is achieved by using the [IgxGridToolbarTitleComponent](mcp:get_api_reference?platform=angular&component=IgxGridToolbarTitleComponent). Users can provide anything from simple text to more involved templates. ```html @@ -325,7 +325,7 @@ Users can provide anything from simple text to more involved templates. ``` ### 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. +The toolbar exposes a [specific container](mcp:get_api_reference?platform=angular&component=IgxGridToolbarActionsComponent) 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 @@ -337,7 +337,7 @@ toolbar interaction components. ``` -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: +Each action now exposes a way to change the overlay settings of the actions dialog by using the [`overlaySettings`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent&member=overlaySettings) input, example: ```html @@ -369,7 +369,7 @@ constructor() { ``` 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. +[Toolbar Pinning component](mcp:get_api_reference?platform=angular&component=IgxGridToolbarPinningComponent) 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 @@ -385,7 +385,7 @@ title, the placeholder for the component input and the height of the dropdown it ``` ### Column hiding -[Toolbar Hiding component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) provides the default +[Toolbar Hiding component](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent) 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 @@ -401,7 +401,7 @@ title, the placeholder for the component input and the height of the dropdown it ``` ### 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. +[Toolbar Advanced Filtering component](mcp:get_api_reference?platform=angular&component=IgxGridToolbarAdvancedFilteringComponent) provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button. ```html @@ -410,8 +410,8 @@ title, the placeholder for the component input and the height of the dropdown it ``` ### 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 +As with the rest of the toolbar actions, exporting is provided through a [Toolbar Exporter component](mcp:get_api_reference?platform=angular&component=IgxGridToolbarExporterComponent) out of the box. +The exporting component is using the respective service for the target data format ([Excel](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService), [CSV](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService), [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. @@ -429,7 +429,7 @@ export class AppModule { ... } > 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. +generated file. For full reference, consult the [API documentation](mcp:get_api_reference?platform=angular&component=IgxGridToolbarExporterComponent) for the toolbar exporter component. Here is a snippet showing some of the options which can be customized through the Angular template: ```html @@ -452,7 +452,7 @@ Here is a snippet showing some of the options which can be customized through th ``` -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. +In addition to changing the exported filename, the user can further configure the exporter options by waiting for the [toolbarExporting](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. @@ -631,7 +631,7 @@ export class GridToolbarSample3Component {
## 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 +Moreover, users can set the toolbar [showProgress](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent&member=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 @@ -1062,15 +1062,15 @@ igx-grid {
## 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) +- [`IgxGridToolbarActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarActionsComponent) +- [`IgxGridToolbarAdvancedFilteringComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarAdvancedFilteringComponent) +- [`IgxGridToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent) +- [`IgxGridToolbarExporterComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarExporterComponent) +- [`IgxGridToolbarHidingComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent) +- [`IgxGridToolbarPinningComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarPinningComponent) +- [`IgxGridToolbarTitleComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarTitleComponent) +[`IgxGridComponent`](mcp:get_api_reference?platform=angular&component=IgxGridComponent) events: +- [`toolbarExporting`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=toolbarExporting) Styles: - [`IgxGridComponent Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources 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 index 0d74c29e3..757709ae6 100644 --- 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 @@ -122,18 +122,18 @@ We expose the `FormGroup` that will be used for validation when editing starts o } 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. +The grid exposes a validation service via the [`validation`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +- [`valid`](mcp:get_api_reference?platform=angular&component=IgxGridValidationService&member=valid) - returns if the grid validation state is valid. +- [`getInvalid`](mcp:get_api_reference?platform=angular&component=IgxGridValidationService&member=getInvalid) - returns records with invalid states. +- [`clear`](mcp:get_api_reference?platform=angular&component=IgxGridValidationService&member=clear) - clears state for record by id or clears all state if no id is provided. +- [`markAsTouched`](mcp:get_api_reference?platform=angular&component=IgxGridValidationService&member=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. +- While editing via the cell editor based on the grid's [`validationTrigger`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=updateRow), [`updateCell`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=updateCell) etc.. +- When using batch editing and the [`undo`](mcp:get_api_reference?platform=angular&component=IgxTransactionService&member=undo)/[`redo`](mcp:get_api_reference?platform=angular&component=IgxTransactionService&member=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 @@ -173,8 +173,8 @@ This is useful in scenarios where you want to add your own custom error message ``` ### 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) +In that scenarios you can use the [`cellEdit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellEdit) or [`rowEdit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEdit) events and cancel the event in case the new value is invalid. +Both events' arguments have a [`valid`](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs&member=valid) property and can be canceled accordingly. How it is used can be seen in the [Cross-field Validation example](#cross-field-example) ```html ``` @@ -419,7 +419,7 @@ public calculateDealsRatio(dealsWon, dealsLost) { 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: +The cross-field validator can be added to the `formGroup` of the row from [`formGroupCreated`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=formGroupCreated) event, which returns the new `formGroup` for each row when entering edit mode: ```html ## 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) +- [IgxBaseTransactionService](mcp:get_api_reference?platform=angular&component=IgxBaseTransactionService) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) ## Known Issues and Limitations | Limitation | Description | | :------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 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 index a7a7839f0..6ef4a3259 100644 --- 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 @@ -7,7 +7,7 @@ _tocName: Virtualization and performance _premium: true --- # 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. +In Ignite UI for Angular, the [IgxGrid](mcp:get_api_reference?platform=angular&component=IgxGridComponent) control now utilizes the [`igxForOf`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) 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'; @@ -139,10 +139,10 @@ export class FinancialSampleComponent { } ``` ## 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`). +By utilizing the [`igxForOf`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) 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](mcp:get_api_reference?platform=angular&component=IgxGridComponent)'s [`width`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=width) and [`height`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=width) and/or [`height`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=width) is `null` and rows if [`height`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +- The row height for the vertical (row) virtualization. This is determined by the [`rowHeight`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -154,11 +154,11 @@ The Grid supports remote virtualization, which is demonstrated in the [`Grid Rem 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](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxForOfDirective](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) +- [IForOfState](mcp:get_api_reference?platform=angular&component=IForOfState) ## Additional Resources
- [Grid overview](grid.md) 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 index 6d7bbbe53..a532a0bcd 100644 --- 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 @@ -120,16 +120,16 @@ export class HGridAdvancedFilteringSampleComponent implements AfterViewInit{ ```
## 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 open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. The dialog is using the [`IgxQueryBuilder`](mcp:get_api_reference?platform=angular&component=IgxQueryBuilderComponent) 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`. +To enable the advanced filtering, the [`allowAdvancedFiltering`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +The advanced filtering generates a [`FilteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=FilteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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); @@ -156,7 +156,7 @@ ngAfterViewInit(): void { 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: +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`](mcp:get_api_reference?platform=angular&component=FilteringExpressionsTree) with a subquery: ```TypeScript ngAfterViewInit(): void { const albumsTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Albums', ['Artist']); @@ -176,8 +176,8 @@ ngAfterViewInit(): void { 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. +If remote data is used, the [`schema`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 @@ -272,7 +272,7 @@ export class HGridExternalAdvancedFilteringComponent { } ``` ### 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: +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`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarAdvancedFilteringComponent&member=grid) property: ```html @@ -286,7 +286,7 @@ To get started with styling the Advanced Filtering dialog, we need to import the // 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. +Since the Advanced Filtering dialog uses the [`IgxQueryBuilder`](mcp:get_api_reference?platform=angular&component=IgxQueryBuilderComponent) 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 @@ -417,8 +417,8 @@ $custom-query-builder: query-builder-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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxHierarchicalGridComponent API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 9d912e95b..2a299d6e0 100644 --- 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 @@ -8,12 +8,12 @@ _premium: true --- # 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. +The Batch Editing feature of the IgxHierarchicalGrid is based on the [`TransactionService`](mcp:get_api_reference?platform=angular&component=IgxTransactionService). 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). +In order to use the [`HierarchicalTransactionService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicaltransactionservice.html) with [`IgxHierarchicalGrid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent), 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. +The following sample demonstrates a scenario, where the hierarchicalGrid has [`batchEditing`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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'; @@ -335,7 +335,7 @@ Then, all you need to do is enable `batchEditing` from your Hierarchical Grid: ``` 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: +After batch editing is enabled, define a `IgxHierarchicalGrid` with bound data source and [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowEditable) set to true and bind: ```html @@ -358,7 +358,7 @@ After batch editing is enabled, define a `IgxHierarchicalGrid` with bound data s ... ``` -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. +The following code demonstrates the usage of the [`transactions`](mcp:get_api_reference?platform=angular&component=IgxTransactionService) API - undo, redo, commit. ```typescript ... export class HierarchicalGridBatchEditingSampleComponent { @@ -384,9 +384,9 @@ export class HierarchicalGridBatchEditingSampleComponent { } ``` > [!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. +> 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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +> Disabling [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 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 index 4a08f206d..da295729b 100644 --- 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 @@ -236,7 +236,7 @@ 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): +Another way to update cell is directly through [`update`](mcp:get_api_reference?platform=angular&component=IgxGridCell&member=update) method of [`IgxGridCell`](mcp:get_api_reference?platform=angular&component=IgxGridCell): ```typescript public updateCell() { const cell = this.hierarchicalGrid.getCellByColumn(rowIndex, 'ReorderLevel'); @@ -247,7 +247,7 @@ public updateCell() { ``` ### 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): +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](mcp:get_api_reference?platform=angular&component=IgxCellTemplateDirective). 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`](mcp:get_api_reference?platform=angular&component=IgxGridCell&member=editValue): ```html @@ -357,7 +357,7 @@ export class GridSelectComponent implements OnInit { ```
> [!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). +> Any changes made to the cell's [`editValue`](mcp:get_api_reference?platform=angular&component=IgxGridCell&member=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. @@ -367,9 +367,9 @@ For more information on how to configure columns and their templates, you can se ## 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. +The [`IgxHierarchicalGridComponent`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. +The Hierarchical Grid component exposes the [`addRow`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=addRow) method which will add the provided data to the data source itself. ```typescript public addRow() { // Adding a new record @@ -379,7 +379,7 @@ public addRow() { } ``` ### 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. +Updating data in the Hierarchical Grid is achieved through [`updateRow`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=updateRow) and [`updateCell`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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); @@ -392,7 +392,7 @@ 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. +Please keep in mind that [`deleteRow()`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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); @@ -407,7 +407,7 @@ These can be wired to user interactions, not necessarily related to the **igx-hi
### 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). +In this example, we'll validate a cell based on the data entered in it by binding to the [`cellEdit`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 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) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [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) +_[IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxInputDirective](mcp:get_api_reference?platform=angular&component=IgxInputDirective) +- [IgxDatePickerComponent](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) - [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](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) - [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](mcp:get_api_reference?platform=angular&component=OverlaySettings) - [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) ## Additional Resources
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 index 3f2c81cac..0577e347b 100644 --- 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 @@ -282,7 +282,7 @@ Due to the specific behavior of merged cells it has to be noted how exactly it t - **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 API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 851a539f7..5366c8e20 100644 --- 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 @@ -8,7 +8,7 @@ _tocName: Cell selection _premium: true --- # 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. @@ -204,7 +204,7 @@ How to select cells: ### 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. +> When single cell is selected [`selected`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -321,9 +321,9 @@ $custom-grid-theme: 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 API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +_[IgxGridRow API](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxGridCell API](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 5536b209a..61f4db9f4 100644 --- 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 @@ -201,8 +201,8 @@ Another way to achieve this behavior is to use the igxCollapsibleIndicator direc > 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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [IgxGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
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 index ef10fcc8a..9b41e2933 100644 --- 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 @@ -8,7 +8,7 @@ _tocName: Column Hiding _premium: true --- # 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. +The Ignite UI for Angular Hierarchical Grid provides an [`IgxColumnActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent) with an [`IgxColumnHidingDirective`](mcp:get_api_reference?platform=angular&component=IgxColumnHidingDirective) 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'; @@ -149,8 +149,8 @@ Let's start by creating our Hierarchical Grid and binding it to our data. We wil ``` ## 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. +The built-in Column Hiding UI is placed inside an [`IgxDropDownComponent`](mcp:get_api_reference?platform=angular&component=IgxDropDownComponent) 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`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarActionsComponent) and the [`IgxGridToolbarHidingComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent) inside of the Hierarchical Grid. We will also add a title to our toolbar by using the [`IgxGridToolbarTitleComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarTitleComponent) and a custom style for our Hierarchical Grid's wrapper. ```html
@@ -198,7 +198,7 @@ For this purpose all we have to do is set both the [`IgxGridToolbarActionsCompon ``` } 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. +By using the `igx-grid-toolbar-hiding` [`title`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent&member=title) property, we will set the title that is displayed inside the dropdown button in the toolbar. @@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') { ```html @@ -226,14 +226,14 @@ By using the `igx-grid-toolbar-hiding` [`title`](https://www.infragistics.com/pr
``` -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. +By using the [`columnsAreaMaxHeight`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent&member=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. +In order to use the expanded set of functionalities for the column hiding UI, we can use the IgxColumnActionsComponent's [`columnsAreaMaxHeight`](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent&member=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: @@ -400,22 +400,22 @@ $dark-checkbox-theme: 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](mcp:get_api_reference?platform=angular&component=IgxColumnActionsComponent) - [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) +[`IgxHierarchicalGridComponent`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) properties: +- [hiddenColumnsCount](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=hiddenColumnsCount) +[`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) properties: +- [disableHiding](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=disablehiding) +[`IgxGridToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent) properties: +- [showProgress](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent&member=showProgress) +[`IgxGridToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent) components: +- [IgxGridToolbarTitleComponent](mcp:get_api_reference?platform=angular&component=IgxGridToolbarTitleComponent) +- [IgxGridToolbarActionsComponent](mcp:get_api_reference?platform=angular&component=IgxGridToolbarActionsComponent) +[`IgxGridToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent) methods: +[`IgxHierarchicalGridComponent`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) events: +- [columnVisibilityChanged](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=columnVisibilityChanged) +[IgxRadioComponent](mcp:get_api_reference?platform=angular&component=IgxRadioComponent) 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) 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 index f5d338650..908f9d07d 100644 --- 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 @@ -219,7 +219,7 @@ export class HGridColumnMovingSampleComponent { ```
## 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). +**Column moving** feature is enabled on a per-grid level, meaning that the [**igx-hierarchical-grid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) could have either movable or immovable columns. This is done via the [`moving`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=moving) input of the [`igx-grid`](mcp:get_api_reference?platform=angular&component=IgxGridComponent). ```html ... @@ -228,23 +228,23 @@ export class HGridColumnMovingSampleComponent { ``` ## 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. +[`moveColumn`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +[`move`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +Note that when using the API, only the [`columnMovingEnd`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=columnMovingStart), [`columnMoving`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=columnMoving) and [`columnMovingEnd`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=columnMovingEnd). +You can subscribe to the [`columnMovingEnd`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=columnMovingEnd) event of the [`igx-hierarchical-grid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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 @@ -439,8 +439,8 @@ $dark-grid-column-moving-theme: grid-theme( >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) +- [ColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxHierarchicalGridComponent](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) 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 index 7435225a0..66fa44d5b 100644 --- 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 @@ -101,7 +101,7 @@ export class HGridToolbarPinningComponent implements OnInit { } ``` ## 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. +Column pinning is controlled through the `pinned` input of the [`igx-column`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent). 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 @@ -109,13 +109,13 @@ Column pinning is controlled through the `pinned` input of the [`igx-column`](ht ``` -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: +You may also use the Hierarchical Grid's [`pinColumn`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=pinColumn) or [`unpinColumn`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=unpinColumn) methods of the [`IgxHierarchicalGridComponent`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. +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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=columnPin) event and changing the [`insertAtIndex`](mcp:get_api_reference?platform=angular&component=IPinColumnEventArgs&member=insertAtIndex) property of the event arguments to the desired position index. ```html @@ -721,8 +721,8 @@ export class HGridPinningSampleComponent implements AfterViewInit { - 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) +- [IgxHierarchicalGridComponent](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) 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 index 8478d16c4..2fdf1c97e 100644 --- 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 @@ -139,11 +139,11 @@ export class HGridColumnResizingSampleComponent { } ```
-**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). +**Column resizing** is also enabled per-column level, meaning that the [**igx-hierarchical-grid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=resizable) input of the [`igx-column`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent). ```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. +You can subscribe to the [`columnResized`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=columnResized) event of the [`igx-hierarchical-grid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) object, are exposed through the event arguments. ```html @@ -177,7 +177,7 @@ Resizing columns with width in pixels works by directly adding or subtracting th **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). +You can also configure the minimum and maximum allowable column widths. This is done via the [`minWidth`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=minWidth) and [`maxWidth`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=maxWidth) inputs of the [`igx-column`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent). 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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=minWidth) and [`maxWidth`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=maxWidth). ```html @@ -194,8 +194,8 @@ or [minWidth]="'60px'" [maxWidth]="'15%'"> ``` ## 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). +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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=maxWidth) is set on that column and the new width exceeds that [`maxWidth`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=maxWidth) value. In this case the column will be sized according to preset [`maxWidth`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=maxWidth) value. +You can also auto-size a column dynamically using the exposed [`autosize()`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=autosize) method on [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent). ```typescript @ViewChild('hierarchicalGrid') hierarchicalGrid: IgxHierarchicalGridComponent; let column = this.hierarchicalGrid.columnList.filter(c => c.field === 'Artist')[0]; @@ -378,8 +378,8 @@ $custom-grid-theme: grid-theme( >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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxHierarchicalGridComponent](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
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 index 0a1e8ee30..ed91b8964 100644 --- 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 @@ -115,11 +115,11 @@ export class HierarchicalGridColumnSelectionComponent implements OnInit, AfterVi ```
## 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. +The column selection feature can be enabled through the [`columnSelection`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +The default selection mode is `none`. If set to `single` or `multiple` all of the presented columns will be [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable). With that being said, in order to select a column, we just need to click on one, which will mark it as [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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). +> [`Multi-column Headers`](multi-column-headers.md) don't reflect on the [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable) input. The [`IgxColumnGroupComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) is [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable), if at least one of its children has the selection behavior enabled. In addition, the component is marked as [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=selected) if all of its `selectable` descendants are [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selected). *Under _Location_ Column Group only column _City_ is selectable. ```typescript import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, inject } from '@angular/core'; @@ -217,14 +217,14 @@ export class HierarchicalGridColumnGroupSelectionComponent implements OnInit, Af
## 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`. +> The keyboard combinations are available only when the grid [`columnSelection`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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**. +The **API** provides some additional capabilities when it comes to the **non-visible** columns such that, every **hidden** column could be marked as [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +> The above statement also applies to the [`IgxColumnGroupComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent), except that when the [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=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. @@ -351,25 +351,25 @@ $custom-grid-theme: grid-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](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxColumnGroupComponent](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) - [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) +[`IgxHierarchicalGridComponent`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) properties: +- [columnSelection](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=columnSelection) +- [selectedColumns](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=selectedColumns) +- [selectColumns](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=selectColumns) +- [deselectColumns](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=deselectColumns) +- [selectAllColumns](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=selectAllColumns) +- [deselectAllColumns](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=deselectAllColumns) +[`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) properties: +- [selectable](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selectable) +- [selected](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selected) +[`IgxColumnGrpupComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) properties: +- [selectable](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=selectable) +- [selected](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=selected) +[`IgxHierarchicalGridComponent`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) events: +- [onColumnsSelectionChange](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=onColumnsSelectionChange) ## Additional Resources - [Hierarchical Grid overview](hierarchical-grid.md) - [Selection](selection.md) 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 index f85093eb1..74240e1a2 100644 --- 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 @@ -9,11 +9,11 @@ _premium: true # 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. +If you want to enable a data type-specific template, you should set the column [`dataType`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +This column [`dataType`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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: +If the [`dataType`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=dataType) is set to _number_, the cell value will be formatted based on application or grid's [`locale`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale) settings, as well as when [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 @@ -27,7 +27,7 @@ public formatOptions = this.options; ``` ### 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): +The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale) format or [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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: @@ -73,9 +73,9 @@ public timeFormats = [ ``` #### 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. +- dateTime - [IgxDateTimeEditor directive](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective) will be used. This editor will give you a mask directions for the input elements part of the DateTime object. +- date - [IgxDatePicker component](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) will be used. +- time - [IgxTimePicker component](mcp:get_api_reference?platform=angular&component=IgxTimePickerComponent) 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; @@ -87,14 +87,14 @@ Time type column sorts based on the time portion of the object, ms will be disre 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. +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](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) 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). +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale). _By using LOCALE_ID_ ```ts import { LOCALE_ID } from '@angular/core'; @@ -111,7 +111,7 @@ _By using Grid's locale_ ``` -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_. +By using the [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=pipeArgs) input the end-user can customize the number format by _decimal point_, _currencyCode_ and _display_. ```ts public options = { digitsInfo: '3.4-4', @@ -165,7 +165,7 @@ Default template is using the value coming from the data as an image source to a ``` -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. +When [auto-generating](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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 @@ -196,10 +196,10 @@ public init(column: IgxColumnComponent) { } ``` ## 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) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) +- Column [pipeArgs](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=pipeArgs) +- Hierarchical Grid [locale](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale) +- Column [dataType](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=dataType) ## Additional Resources
- For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates) 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 index 88d4fe2ac..fd1149d7e 100644 --- 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 @@ -11,17 +11,17 @@ _premium: true 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; +- By setting [`rowClasses`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowClasses) input on the IgxHierarchicalGrid component; +- By setting [`rowStyles`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +You can conditionally style the IgxHierarchicalGrid rows by setting the [`rowClasses`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +The [`rowClasses`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 = { @@ -306,7 +306,7 @@ export class HGridRowStylesSampleComponent implements OnInit { ## 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. +- By setting the [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) input [`cellClasses`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 = { @@ -328,12 +328,12 @@ private downFontCondition = (rowData: any, columnKey: any): boolean => { } ``` ### 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. +You can conditionally style the IgxHierarchicalGrid cells by setting the [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) [`cellClasses`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +The [`cellClasses`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 => { @@ -364,7 +364,7 @@ public grammyClasses = { ### 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. +- By using the [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) input [`cellStyles`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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%)', @@ -465,7 +465,7 @@ Define a `popin` animation
## 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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) => { @@ -486,8 +486,8 @@ editDone(evt) { ``` ## 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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxHierarchicalGridComponent](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#mixin-grid) ## Additional Resources
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 index 44522e322..b28fd8120 100644 --- 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 @@ -122,15 +122,15 @@ igx-buttongroup{ ```
## 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: +As you can see in the demo above, the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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`; +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**](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=width) is `80px`; +- **--ig-size-medium** - this is the middle size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=width) is `64px`; +- **--ig-size-small** - this is the smallest size with `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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: @@ -214,11 +214,11 @@ 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. +Another option that [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) provides for you, in order to be able to change the height of the rows in the Hierarchical Grid, is the property [`rowHeight`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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` CSS variable will have **NO** impact on row height **if there is [rowHeight](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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: +And now we can extend our sample and add [`rowHeight`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent)
## Additional Resources - [Hierarchical Grid overview](hierarchical-grid.md) 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 index 680fdf14f..f4d8d2a72 100644 --- 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 @@ -15,7 +15,7 @@ _tocName: 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). +In order to specify which edit mode should be enabled, the Hierarchical Grid exposes the following boolean properties - [`editable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=editable) and [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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; @@ -29,22 +29,22 @@ In the Hierarchical Grid if you set rowEditable property to true, and editable p - _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. + If you want to use a data type specific _edit templates_, you should specify the column [`dataType`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=dataType) property. So let's now see what are the default templates for each type: +- For `string` data type, default template is using [igxInput](mcp:get_api_reference?platform=angular&component=IgxInputDirective) +- For `number` data type, default template is using [igxInput](mcp:get_api_reference?platform=angular&component=IgxInputDirective) 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](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) +- For `dateTime` data type, default template is using [IgxDateTimeEditor directive](mcp:get_api_reference?platform=angular&component=IgxDateTimeEditorDirective). 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](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent). +- For `time` - data type, default template is using [IgxTimePicker component](mcp:get_api_reference?platform=angular&component=IgxTimePickerComponent). +- For `boolean` data type, default template is using [igxCheckbox](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) +- For `currency` data type, default template is using [IgxInputGroup](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) with prefix/suffix configuration based on application or grid locale settings. +- For `percent` data type, default template is using [IgxInputGroup](mcp:get_api_reference?platform=angular&component=IgxInputGroupComponent) 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. +The template editors of `date`, `dateTime` and `time` column data types use a default input format as per the `IgxGrid`'s [`locale`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale). +In case the [`pipeArgs`](mcp:get_api_reference?platform=angular&component=ColumnType&member=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`](mcp:get_api_reference?platform=angular&component=ColumnType&member=editorOptions) object of type [`IColumnEditorOptions`](mcp:get_api_reference?platform=angular&component=IColumnEditorOptions) 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', @@ -57,17 +57,17 @@ const editorOptions: IColumnEditorOptions = { 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` | +| [`rowEditEnter`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowEditEnter) | If `rowEditing` is enabled, fires when a row enters edit mode | [IGridEditEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`cellEditEnter`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=cellEditEnter) | Fires when a cell **enters edit mode** (after `rowEditEnter`) | [IGridEditEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`cellEdit`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=cellEdit) | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | [IGridEditEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`cellEditDone`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=celleditdone) | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditDoneEventArgs) | `false` | +| [`cellEditExit`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=cellEditExit) | Fires when a cell **exits edit mode** | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `false` | +| [`rowEdit`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`rowEditDone`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowEditDone) | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `false` | +| [`rowEditExit`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowEditExit) | If `rowEditing` is enabled, fires when a row **exits edit mode** | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `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. +- `CellEditEnter` - Prevents entering cell edit. If [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: @@ -288,15 +288,15 @@ public onSorting(event: ISortingEventArgs) { } ``` ## API References -- [IgxGridCell](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcell.html) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [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) +_[IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxInputDirective](mcp:get_api_reference?platform=angular&component=IgxInputDirective) +- [IgxDatePickerComponent](mcp:get_api_reference?platform=angular&component=IgxDatePickerComponent) - [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](mcp:get_api_reference?platform=angular&component=IgxCheckboxComponent) - [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](mcp:get_api_reference?platform=angular&component=OverlaySettings) - [IgxOverlay Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-overlay-theme) ## Additional Resources
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 index af3641553..c0b195a76 100644 --- 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 @@ -142,20 +142,20 @@ igx-buttongroup{ ```
## 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`. +To turn on the grid excel filtering, two inputs should be set. The [`allowFiltering`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=allowFiltering) should be set to `true` and the [`filterMode`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 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`](mcp:get_api_reference?platform=angular&component=FilteringLogic&member=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). +Sorting, pinning and hiding features can be removed from the filter menu using the corresponding inputs: [`sortable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=sortable), [`selected`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=selected), [`disablePinning`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=disablePinning), [`disableHiding`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=disableHiding). ```html @@ -282,7 +282,7 @@ If you want to further customize the Excel style filter menu without disabling t - `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. +The following code demonstrates how to define a custom Excel style filter menu using the [`igx-excel-style-header`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleHeaderComponent), [`igx-excel-style-sorting`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleSortingComponent) and [`igx-excel-style-search`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleSearchComponent) components. ```html @@ -454,20 +454,20 @@ export class HGridExcelStyleFilteringSample3Component { } ``` 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) +- [`igx-excel-style-header`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleHeaderComponent) +- [`igx-excel-style-sorting`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleSortingComponent) +- [`igx-excel-style-moving`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleMovingComponent) +- [`igx-excel-style-pinning`](mcp:get_api_reference?platform=angular&component=IgxExcelStylePinningComponent) +- [`igx-excel-style-hiding`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleHidingComponent) +- [`igx-excel-style-selecting`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleSelectingComponent) +- [`igx-excel-style-clear-filters`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleClearFiltersComponent) +- [`igx-excel-style-conditional-filter`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleConditionalFilterComponent) +- [`igx-excel-style-search`](mcp:get_api_reference?platform=angular&component=IgxExcelStyleSearchComponent)
## 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: +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`](mcp:get_api_reference?platform=angular&component=FormattedValuesFilteringStrategy). } 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'; @@ -662,7 +662,7 @@ export class HGridExternalExcelStyleFilteringComponent implements AfterViewInit{ ```
### 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. +In order to configure the Excel style filtering component, you should set its [`column`](mcp:get_api_reference?platform=angular&component=IgxGridExcelStyleFilteringComponent&member=column) property to one of the Hierarchical Grid's columns. In the sample above, we have bound the [`column`](mcp:get_api_reference?platform=angular&component=IgxGridExcelStyleFilteringComponent&member=column) property to the value of an IgxSelectComponent that displays the Hierarchical Grid's columns. ```html @@ -675,7 +675,7 @@ In order to configure the Excel style filtering component, you should set its [` ``` ## 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. +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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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'; @@ -1039,8 +1039,8 @@ $custom-drop-down: drop-down-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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxHierarchicalGridComponent API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index aa29211e5..9a37fb9d3 100644 --- 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 @@ -10,12 +10,12 @@ _premium: true # 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. +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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html), call the respective [`export`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=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 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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) or [`IgxPdfExporterService`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxpdfexporterservice.html), call the appropriate [`export`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=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. @@ -58,7 +58,7 @@ export class HGridExcelExportSampleComponent {
## 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. +1. Import the [`IgxExcelExporterService`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) 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 @@ -76,7 +76,7 @@ To initiate an export process you may use the handler of a button in your compon ``` -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. +You may access either exporter service by defining it as a constructor dependency and letting Angular provide an instance. Calling the shared [`export`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=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 @@ -194,7 +194,7 @@ export class ExcelExportSample1Component implements OnInit { ``` } ## 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. +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](mcp:get_api_reference?platform=angular&component=IgxExporterOptionsBase) [ignoreMultiColumnHeaders](mcp:get_api_reference?platform=angular&component=IgxExporterOptionsBase&member=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') { @@ -458,7 +458,7 @@ export class HGridMultiColumnHeadersExportComponent implements OnInit { ``` } ## 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. +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](mcp:get_api_reference?platform=angular&component=IgxExporterOptionsBase) [freezeHeaders](mcp:get_api_reference?platform=angular&component=IgxExporterOptionsBase&member=freezeHeaders) flag to `true` before calling `export` and the service will handle the rest. ```typescript public exportButtonHandler() { const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile'); @@ -468,7 +468,7 @@ public exportButtonHandler() { ``` 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. +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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=columnexporting) and [`rowExporting`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService&member=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 @@ -479,7 +479,7 @@ this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventAr }); 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. +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`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions) 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 | @@ -491,12 +491,12 @@ Before shipping exports to production users, review the following platform const | 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) +- [IgxExcelExporterService API](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) +- [IgxExcelExporterOptions API](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions) - [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 API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme)
## Additional Resources 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 index 23c6167d3..f452bb4e9 100644 --- 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 @@ -88,17 +88,17 @@ export class HGridFilteringSampleComponent { ```
## 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: +In order to specify if filtering is enabled and which filtering mode should be used, the Hierarchical Grid exposes the following boolean properties - [`allowFiltering`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=allowFiltering), [`allowAdvancedFiltering`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=allowAdvancedFiltering), [`filterMode`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=filterMode) and [`filterable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=filterable). +Property **[allowFiltering](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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: +Property **[allowAdvancedFiltering](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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: +Property **[filterMode](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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: +Property **[filterable](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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 @@ -107,7 +107,7 @@ Property **[filterable](https://www.infragistics.com/products/ignite-ui-angular/ ``` -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`. +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=allowAdvancedFiltering) input properties to `true`. ```html @@ -118,8 +118,8 @@ To enable the [Advanced filtering](advanced-filtering.md) however, you need to s 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`. +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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=dataType) of the column, the correct set of [**filtering operations**](mcp:get_api_reference?platform=angular&component=IFilteringOperation) is loaded inside the filter UI dropdown. Additionally, you can set the [`ignoreCase`](mcp:get_api_reference?platform=angular&component=IFilteringExpression) and the initial [`condition`](mcp:get_api_reference?platform=angular&component=IFilteringExpression&member=condition) properties. +Filtering feature is enabled for the Hierarchical Grid component by setting the [`allowFiltering`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=allowFiltering) input to `true`. The default [`filterMode`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=filterMode) is `quickFilter` and it **cannot** be changed run time. To disable this feature for a certain column – set the [`filterable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=filterable) input to `false`. ```html @@ -128,14 +128,14 @@ Filtering feature is enabled for the Hierarchical Grid component by setting the ``` > [!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. +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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=filter), [`filterGlobal`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=filterglobal) and [`clearFilter`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=clearFilter). +- [`filter`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +- [`IgxFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxFilteringOperand): this is a base filtering operand, which can be inherited when defining custom filtering conditions. +- [`IgxBooleanFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxBooleanFilteringOperand) defines all default filtering conditions for `boolean` type. +- [`IgxNumberFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxNumberFilteringOperand) defines all default filtering conditions for `numeric` type. +- [`IgxStringFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxStringFilteringOperand) defines all default filtering conditions for `string` type. +- [`IgxDateFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxDateFilteringOperand) 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 @@ -167,13 +167,13 @@ 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. +- [`filterGlobal`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +- [`clearFilter`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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'); @@ -181,7 +181,7 @@ this.hierarchicalGrid.clearFilter('ProductName'); 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. +To set the initial filtering state of the Hierarchical Grid, set the [`IgxHierarchicalGridComponent`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) [`filteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=filteringExpressionsTree) property to an array of [`IFilteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IFilteringExpressionsTree) for each column to be filtered. ```typescript constructor(private cdr: ChangeDetectorRef) { } public ngAfterViewInit() { @@ -201,15 +201,15 @@ public ngAfterViewInit() { } ``` ### 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. +The [`filteringLogic`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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/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. +The default value of [`AND`](mcp:get_api_reference?platform=angular&component=FilteringLogic&member=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`](mcp:get_api_reference?platform=angular&component=FilteringLogic&member=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 @@ -217,9 +217,9 @@ The Hierarchical Grid supports remote filtering, which is demonstrated in the [`
} ## 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. +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`](mcp:get_api_reference?platform=angular&component=IgxBooleanFilteringOperand), [`IgxDateFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxDateFilteringOperand), [`IgxNumberFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxNumberFilteringOperand) and [`IgxStringFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxStringFilteringOperand)). You can extend these classes or their base class [`IgxFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxFilteringOperand) 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. +To do that, extend the [`IgxStringFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxStringFilteringOperand) and [`IgxBooleanFilteringOperand`](mcp:get_api_reference?platform=angular&component=IgxBooleanFilteringOperand), modify the operations and their logic, and set the column [`filters`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=filters) input to the new operands. ```typescript // grid-custom-filtering.component.ts export class GridCustomFilteringComponent { @@ -790,8 +790,8 @@ $dark-button: flat-button-theme( > 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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxHierarchicalGridComponent API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 30daba8ae..4eda2daf5 100644 --- 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 @@ -357,7 +357,7 @@ export class RemoteLoDService { ## 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. +If you have a way to provide information whether a row has children prior to its expanding, you could use the [`hasChildrenKey`](mcp:get_api_reference?platform=angular&component=IgxTreeGridComponent&member=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 @@ -365,9 +365,9 @@ If you have a way to provide information whether a row has children prior to its ``` -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. +Note that setting the [`hasChildrenKey`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +Additionally if you wish to show/hide the header expand/collapse all indicator you can use the [showExpandAll](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 @@ -613,13 +613,13 @@ platformBrowserDynamic() ## 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) +- [IgxHierarchicalGridComponent](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +- [IgxRowIslandComponent](mcp:get_api_reference?platform=angular&component=IgxRowIslandComponent) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) - [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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxHierarchicalGridRow](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridRow) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) ## Theming Dependencies 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 index 803b732ed..5afa1835c 100644 --- 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 @@ -1794,22 +1794,22 @@ $custom-checkbox-theme: checkbox-theme( 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 | +| [`gridKeydown`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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](mcp:get_api_reference?platform=angular&component=IGridKeydownEventArgs) | +| [`activeNodeChange`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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](mcp:get_api_reference?platform=angular&component=IActiveNodeChangeEventArgs) | +| [`navigateTo`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=getNextCell) | returns [`ICellPosition`](mcp:get_api_reference?platform=angular&component=ICellPosition) object, which defines the next cell by `rowIndex` and `visibleColumnIndex`. A callback function can be passed as a third parameter of [`getNextCell`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=getPreviousCell) | returns [`ICellPosition`](mcp:get_api_reference?platform=angular&component=ICellPosition) object, which defines the previous cell by `rowIndex` and `visibleColumnIndex`. A callback function can be passed as a third parameter of [`getPreviousCell`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 +> Both [`getNextCell`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=getNextCell) and [`getPreviousCell`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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: +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +In order to add custom keyboard navigation to igxHierarchicalGrid child grids too, each child grid should subscribe to [`gridKeydown`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=gridKeydown) event. That's why in example above we have registered and event handler for for the [`gridCreated`](mcp:get_api_reference?platform=angular&component=IgxRowIslandComponent&member=gridCreated) event: ```typescript public childGridCreated(event: IGridCreatedEventArgs) { const grid = event.grid; @@ -1832,7 +1832,7 @@ public customKeydown(args: IGridKeydownEventArgs) { } } ``` -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: +Based on the [IGridKeydownEventArgs](mcp:get_api_reference?platform=angular&component=IGridKeydownEventArgs) 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) { @@ -1954,7 +1954,7 @@ export class HGridCustomKBNavigationComponent implements OnInit { | :--------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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 API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 9cc8100f1..de1faa3a9 100644 --- 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 @@ -9,7 +9,7 @@ _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. +The Ignite UI for Angular [`IgxHierarchicalGrid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. @@ -181,7 +181,7 @@ export class HierarchicalGridLoDSampleComponent implements OnInit, AfterViewInit ### 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: +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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 @@ -194,17 +194,17 @@ Let's setup our hierarchical grid. First we will define our hierarchical grid te 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. +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`](mcp:get_api_reference?platform=angular&component=IgxRowIslandComponent) component provides the [`gridCreated`](mcp:get_api_reference?platform=angular&component=IgxRowIslandComponent&member=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. +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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. +We display a loading indicator by setting the [`isLoading`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +Finally, let's turn the [`autoGenerate`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: @@ -236,7 +236,7 @@ The template file `hierarchical-grid-lod.component.html`, after all changes adde ### 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 order to use Advanced Filtering in the `IgxHierarchicalGrid` with load on demand, you need to set the [`schema`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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: @@ -280,7 +280,7 @@ public schema: EntityType[] = [ #### 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. +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`](mcp:get_api_reference?platform=angular&component=FilteringExpressionsTree) and set it to the [`advancedFilteringExpressionsTree`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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: @@ -351,7 +351,7 @@ Next we will define how we should build our URL for the GET request in order to 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: +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`](mcp:get_api_reference?platform=angular&component=IgxRowIslandComponent&member=gridCreated) and build our URL with it: ````TypeScript public gridCreated(event: IGridCreatedEventArgs) { @@ -373,8 +373,8 @@ private buildUrl(event: IGridCreatedEventArgs) { ## 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) +- [IgxHierarchicalGridComponent](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +- [IgxRowIslandComponent](mcp:get_api_reference?platform=angular&component=IgxRowIslandComponent) ## Additional Resources 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 index 3bd17245e..9893e69e4 100644 --- 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 @@ -8,7 +8,7 @@ _tocName: Multi-column Headers _premium: true --- # 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. +[`IgxHierarchicalGrid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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'; @@ -121,7 +121,7 @@ export class HGridMultiHeadersSampleComponent implements OnInit { 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. +The declaration of `Multi-column header` could be achieved by wrapping a set of columns into [`igx-column-group`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) component with [`header`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=header) title passed. ```html @@ -139,7 +139,7 @@ The declaration of `Multi-column header` could be achieved by wrapping a set of ``` -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. +For achieving `n-th` level of nested headers, the declaration above should be followed. So by nesting [`igx-column-group`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) leads to the desired result. ```html @@ -152,7 +152,7 @@ For achieving `n-th` level of nested headers, the declaration above should be fo ``` -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). +Every [`igx-column-group`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) 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.
@@ -184,7 +184,7 @@ The `ng-template` is provided with the column group object as a context. ... ``` -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: +If you want to re-use a single template for several column groups, you could set the [`headerTemplate`](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent&member=headertemplate) property of the column group like this: ```html {{ columnGroup.header | uppercase }} @@ -469,9 +469,9 @@ $custom-theme: grid-theme( >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](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [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) +- [IgxColumnGroupComponent](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent)
## Additional Resources
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 index 1fab85ac9..8c4aec92d 100644 --- 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 @@ -90,7 +90,7 @@ export class HGridPagingSampleComponent { } ```
-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: +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`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=perPage) input controls the visible records per page. Let’s update our Hierarchical Grid to enable paging: ```html @@ -482,7 +482,7 @@ $dark-drop-down-theme: drop-down-theme( } ``` ## API References -- [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) +- [IgxHierarchicalGridComponent API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [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 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 index 1732665fd..5a8642759 100644 --- 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 @@ -22,13 +22,13 @@ You can perform these tasks remotely and feed the resulting data to the Hierarch ## 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: +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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +> When the [`uniqueColumnValuesStrategy`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=uniqueColumnValuesStrategy) input is provided, the default unique values generating process in the excel style filtering will not be used. ```html @@ -224,7 +224,7 @@ export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, } 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. +If you want to use the _default paging template_ you need to set the Paginator's [`totalRecords`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=pagingMode) property to _GridPagingMode.remote_. Also it is necessary to either subscribe to [`pagingDone`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=pagingDone) or [`perPageChange`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=perPageChange) events in order to fetch the data from your remote service, it depends on the use case which event will be used. ```html @@ -418,7 +418,7 @@ export class HGridRemotePagingDefaultTemplateComponent implements OnInit, AfterV ```
### 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. +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`](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent&member=perPage). We are going to use the `` in order to ease our example configuration, along with the [`IgxPageSizeSelectorComponent`](mcp:get_api_reference?platform=angular&component=IgxPageSizeSelectorComponent) and [`IgxPageNavigationComponent`](mcp:get_api_reference?platform=angular&component=IgxPageNavigationComponent) 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 -- [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) +- [IgxPaginatorComponent API](mcp:get_api_reference?platform=angular&component=IgxPaginatorComponent) +- [IgxHierarchicalGridComponent API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 0601f7b5d..c5041e090 100644 --- 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 @@ -22,8 +22,8 @@ import { IgxActionStripModule } from 'igniteui-angular/action-strip'; }) ``` 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. +- [`IgxGridEditingActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) - 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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditable) option and row deletion of the grid. +- [`IgxGridPinningActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) - 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 @@ -150,9 +150,9 @@ export class HGridActionStripSampleComponent implements AfterViewInit{ > 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) +- [`IgxActionStripComponent API`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent) 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) +- [`IgxGridActionsBaseDirective`](mcp:get_api_reference?platform=angular&component=IgxGridActionsBaseDirective) +- [`IgxGridPinningActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) +- [`IgxGridEditingActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) +- [`IgxDividerDirective`](mcp:get_api_reference?platform=angular&component=IgxDividerDirective) 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 index ae33b749f..236e341f6 100644 --- 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 @@ -120,7 +120,7 @@ import { IgxHierarchicalGridModule } from 'igniteui-angular'; }) 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. +Then define a Hierarchical Grid with bound data source and [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowEditable) set to true and an [Action Strip](../action-strip.md) component with editing actions enabled. The [`addRow`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent&member=addRow) input controls the visibility of the button that spawns the row adding UI. ```html @@ -161,10 +161,10 @@ Then define a Hierarchical Grid with bound data source and [`rowEditable`](https > [!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`. +> 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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +> The IgxGridEditingActions input controlling the visibility of the add row button may use the action strip context (which is of type [`RowType`](mcp:get_api_reference?platform=angular&component=RowType)) to fine tune which records the button shows for. +The internal [`IgxBaseTransactionService`](mcp:get_api_reference?platform=angular&component=IgxBaseTransactionService) 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. @@ -219,7 +219,7 @@ In most remote data scenarios the Primary Key assignment happens on the create s 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. + 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](mcp:get_api_reference?platform=angular&component=TransactionService&member=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: @@ -227,16 +227,16 @@ The row adding UI comprises the buttons in the `IgxActionStrip` editing actions, - [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) +- [rowEditable](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowEditable) +- [onRowEditEnter](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=onRowEditEnter) +- [onRowEdit](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=onRowEdit) +- [rowEditDone](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowEditDone) +- [onRowEditCancel](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=onRowEditCancel) +- [endEdit](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=endEdit) +- [primaryKey](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=primaryKey) +- [IgxHierarchicalGridComponent](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +- [IgxActionStripComponent](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent) +- [IgxGridEditingActionsComponent](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) ## Additional Resources
- [Hierarchical Grid Overview](hierarchical-grid.md) 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 index 51d0a645e..5c534173b 100644 --- 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 @@ -8,7 +8,7 @@ _tocName: Row Drag _premium: true --- # 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. +In Ignite UI for Angular Hierarchical Grid, **RowDrag** is initialized on the root `igx-hierarchical-grid` component and is configurable via the [`rowDraggable`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 */ @@ -120,13 +120,13 @@ export class HGridRowDragBaseComponent { ```
## 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. +In order to enable row-dragging for your `igx-hierarchical-grid`, all you need to do is set the grid's [`rowDraggable`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +Clicking on the drag-handle and _moving the cursor_ while holding down the button will cause the grid's [`rowDragStart`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowDragStart) event to fire. Releasing the click at any time will cause [`rowDragEnd`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. @@ -153,7 +153,7 @@ Then, in our template, we define a drop-area using the directive's selector: ``` } -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 when a row is dropped on a non-droppable area using the `animation` parameter of the [`rowDragEnd`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 { @@ -164,7 +164,7 @@ export class IgxHierarchicalGridRowDragComponent { } ``` ### 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. +Once we've defined our drop-area in the template, we have to declare our handlers for the `igxDrop`'s [`enter`](mcp:get_api_reference?platform=angular&component=IgxDropDirective&member=enter), [`leave`](mcp:get_api_reference?platform=angular&component=IgxDropDirective&member=leave) and [`dropped`](mcp:get_api_reference?platform=angular&component=IgxDropDirective&member=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 { @@ -207,7 +207,7 @@ export class IgxHierarchicalGridRowDragComponent { } } ``` -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 +Once the row is dropped, we just call the row's [`delete()`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridRowComponent&member=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. @@ -394,7 +394,7 @@ export class HGridMultiRowDragComponent { ```
### 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`. +The drag handle icon can be templated using the grid's [`dragIndicatorIconTemplate`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 @@ -739,10 +739,10 @@ export class HGridRowReorderComponent { ## 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) +- [rowDraggable](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowDraggable) +- [rowDragStart](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowDragStart) +- [rowDragEnd](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowDragEnd) +- [IgxHierarchicalGridComponent](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) ## Additional Resources
- [Hierarchical Grid Overview](hierarchical-grid.md) 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 index 19a0631f7..6f1225649 100644 --- 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 @@ -103,7 +103,7 @@ import { IgxHierarchicalGridModule } from 'igniteui-angular'; }) 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: +Then define a Hierarchical Grid with bound data source and [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowEditable) set to true: ```html @@ -138,7 +138,7 @@ Then define a Hierarchical Grid with bound data source and [`rowEditable`](https > [!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`. +> It's not needed to enable editing for individual columns. Using the [`rowEditable`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=editable) column's input to `false`. ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid'; @@ -164,7 +164,7 @@ export class HGridRowEditingSampleComponent implements OnInit { } ``` > [!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. +> The Hierarchical Grid uses internally a provider [`IgxBaseTransactionService`](mcp:get_api_reference?platform=angular&component=IgxBaseTransactionService) 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. @@ -382,16 +382,16 @@ igx-hierarchical-grid { - 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) +- [rowEditable](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowEditable) +- [onRowEditEnter](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=onRowEditEnter) +- [onRowEdit](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=onRowEdit) +- [rowEditDone](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowEditDone) +- [onRowEditCancel](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=onRowEditCancel) +- [endEdit](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=endEdit) +- [field](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=field) +- [editable](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=editable) +- [primaryKey](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=primaryKey) +- [IgxHierarchicalGridComponent](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) ## Additional Resources
- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) 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 index 91849feaa..2b77f2561 100644 --- 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 @@ -114,17 +114,17 @@ The built-in row pinning UI is enabled by adding an `igxActionStrip` component w ``` ## 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. +Row pinning is controlled through the `pinned` input of the [`row`](mcp:get_api_reference?platform=angular&component=RowType). 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: +You may also use the Hierarchical Grid's [`pinRow`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=pinRow) or [`unpinRow`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=unpinRow) methods of the [`IgxHierarchicalGridComponent`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. +Note that the row ID is the primary key value, defined by the [`primaryKey`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=rowPinning) event and changing the [`insertAtIndex`](mcp:get_api_reference?platform=angular&component=IPinRowEventArgs&member=insertAtIndex) property of the event arguments to the desired position index. ```html @@ -135,7 +135,7 @@ public rowPinning(event) { } ``` ## 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. +You can change the row pinning position via the [`pinning`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 @@ -459,11 +459,11 @@ $custom-theme: grid-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](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +- [IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxTreeGridRow](mcp:get_api_reference?platform=angular&component=IgxTreeGridRow) +- [IgxHierarchicalGridRow](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridRow) +- [RowType](mcp:get_api_reference?platform=angular&component=RowType) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index a699ac85f..61492ab17 100644 --- 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 @@ -214,9 +214,9 @@ export class HGridSelectionSampleComponent implements OnInit, OnDestroy { ```
## 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. +In order to setup row selection in the [`igx-hierarchical-grid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent), 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. +In the [`igx-hierarchical-grid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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 @@ -233,7 +233,7 @@ public handleRowSelection(event) { } ``` ### 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. +To enable multiple row selection in the [`igx-hierarchical-grid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) just set the [`rowSelection`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 @@ -249,14 +249,14 @@ To enable multiple row selection in the [`igx-hierarchical-grid`](https://www.in } ``` **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. +- In order to have proper row selection and cell selection, while Hierarchical Grid has remote virtualization, a [`primaryKey`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +- Row selection will trigger [`rowSelectionChanging`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +The code snippet below can be used to select one or multiple rows simultaneously (via [`primaryKey`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 @@ -287,7 +287,7 @@ If you need to deselect rows programmatically, you can use the `deselectRows(row ``` ### 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: +When there is some change in the row selection **[`rowSelectionChanging`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. @@ -296,7 +296,7 @@ When there is some change in the row selection **[`rowSelectionChanging`](https: - `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. +In remote data scenarios, when the grid has a `primaryKey` set, [`rowSelectionChanging.oldSelection`](mcp:get_api_reference?platform=angular&component=IRowSelectionEventArgs&member=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 @@ -310,11 +310,11 @@ public handleRowSelectionChange(args) { } ``` ### 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. +Another useful API method that [`igx-hierarchical-grid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. +[`igx-hierarchical-grid`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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 @@ -607,9 +607,9 @@ export class HGridConditionalRowSelectorsComponent implements OnInit { ```
## 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 API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +_[IgxGridRow API](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxGridCell API](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 78b14dd4a..82f831be0 100644 --- 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 @@ -189,21 +189,21 @@ export class HierarchicalGridCellSelectionComponent implements OnInit { ```
## 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. +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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowSelection), [`cellSelection`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellSelection) or [`selectable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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: +Property [`rowSelection`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +Property [`cellSelection`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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**: +The [`selectable` property](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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: @@ -223,9 +223,9 @@ The [`selectable` property](https://www.infragistics.com/products/ignite-ui-angu - 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 API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +_[IgxGridRow API](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxGridCell API](mcp:get_api_reference?platform=angular&component=IgxGridCell) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index 15548efe6..01de0d195 100644 --- 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 @@ -8,14 +8,14 @@ _tocName: Sizing _premium: true --- # 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. +There are many different ways to size the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent), 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. +> If the Border box sizing is overridden by the user we cannot guarantee that the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. +If the `width` input does not have value assigned, its default value is `100%` and the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. +> Setting manually the `width` style of the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. @@ -33,16 +33,16 @@ The grid's `width` can accepts value of `null`, which when set, renders all colu > [!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 the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) `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: +- 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**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) `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. +When the `width` of the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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% @@ -54,11 +54,11 @@ When the `width` of the [**IgxHierarchicalGrid**](https://www.infragistics.com/p 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. +By default if no height is defined for the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent), 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. +> Setting manually the `height` style of the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. +The [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) `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 @@ -72,7 +72,7 @@ The [**IgxHierarchicalGrid**](https://www.infragistics.com/products/ignite-ui-an > [!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. +Setting the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) `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 @@ -84,7 +84,7 @@ Setting the [**IgxHierarchicalGrid**](https://www.infragistics.com/products/igni 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 `height` input is set to percentages the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. @@ -93,10 +93,10 @@ Let's have `width` set to `1200px` and the parent element not having any size ap - 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`. +- If we set the parent element height to `800px` and the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. +- If the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) `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 @@ -108,7 +108,7 @@ Depending on the grid size itself, the columns inside it can also be sized diffe ### 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`. +- If a column does not have specified `width` and the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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`. @@ -126,11 +126,11 @@ When the grid is resized in these scenarios, the column width is also updated to > [!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. +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**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) `width` or exceed it. +- If the combined `width` of all columns is less than the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) `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**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent). 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. +- If the combined `width` of all columns is bigger than the actual [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) `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 @@ -152,18 +152,18 @@ When columns have set `width` in percentages, their size is calculated relativel 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. +Because the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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 `width` for the children does not behave much different than the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) itself, since each child grid is instance of [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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 `height` of each child in the [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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. +The [**IgxHierarchicalGrid**](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) 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 @@ -231,8 +231,8 @@ While the spacing properties affect both header and body cells, you can target t > [!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 API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +_[IgxGridRow API](mcp:get_api_reference?platform=angular&component=IgxGridRow) - [IgxHierarchicalGridComponent Styles](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources
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 index d3fe0da15..befa88b8f 100644 --- 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 @@ -12,7 +12,7 @@ In Ignite UI for Angular Hierarchical Grid, data sorting is enabled on a per-col >[!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. +Additionally there is a custom context menu added for sorting using **igx-hierarchical-grid**'s [`contextMenu`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=contextMenu) Output. ```typescript import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core'; @@ -127,7 +127,7 @@ export class HGridSortingSampleComponent implements OnInit, AfterViewInit { } ```
-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: +This is done via the [`sortable`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=sortable) input. With the Hierarchical Grid sorting, you can also set the [`sortingIgnoreCase`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=sortingIgnoreCase) property to perform case sensitive sorting: ```html ``` @@ -220,7 +220,7 @@ export class GridSortingIndicatorsComponent implements OnInit, AfterViewInit { ``` } ## 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: +You can sort any column or a combination of columns through the Hierarchical Grid API using the Hierarchical Grid [`sort`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=sort) method: ```typescript import { SortingDirection } from 'igniteui-angular/core'; // import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package @@ -233,8 +233,8 @@ this.hierarchicalGrid.sort([ ]); ``` > [!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: +> Sorting is performed using our [`DefaultSortingStrategy`](mcp:get_api_reference?platform=angular&component=DefaultSortingStrategy) algorithm. Any [`IgxColumnComponent`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=sortStrategy) or [`ISortingExpression`](mcp:get_api_reference?platform=angular&component=ISortingExpression&member=strategy) can use a custom implementation of the [`ISortingStrategy`](mcp:get_api_reference?platform=angular&component=ISortingStrategy) 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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=clearsort) method: ```typescript // Removes the sorting state from the ProductName column this.hierarchicalGrid.clearSort('ProductName'); @@ -242,11 +242,11 @@ this.hierarchicalGrid.clearSort('ProductName'); 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. +> The [`sortStrategy`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=sortStrategy) of the **Hierarchical Grid** is of different type compared to the [`sortStrategy`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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. +It is possible to set the initial sorting state of the Hierarchical Grid by passing an array of sorting expressions to the [`sortingExpressions`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=sortingExpressions) property of the Hierarchical Grid. ```typescript public ngOnInit(): void { this.hierarchicalGrid.sortingExpressions = [ @@ -258,7 +258,7 @@ public ngOnInit(): void { } ``` > [!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. +> If values of type `string` are used by a column of [`dataType`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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): @@ -395,9 +395,9 @@ $custom-theme: 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) +- [IgxHierarchicalGridComponent API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [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) +- [ISortingExpression](mcp:get_api_reference?platform=angular&component=ISortingExpression) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) 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 index eee87f38b..5cf021699 100644 --- 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 @@ -8,9 +8,9 @@ _tocName: State Persistence _premium: true --- # 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. +Тhe igxGridState directive allows developers to easily save and restore the grid state. When the [`IgxGridState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective) directive is applied on the grid, it exposes the [`getState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=getState) and [`setState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=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: +[`IgxGridState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective) directive supports saving and restoring the state of the following features: - `RowIslands` - saving/restoring features for all child grids down the hierarchy - `Sorting` @@ -25,14 +25,14 @@ _premium: true - `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. + - Column properties defined by the [`IColumnState`](mcp:get_api_reference?platform=angular&component=IColumnState) 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. +> The [`IgxGridState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective) 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. +> The `Row Selection` feature requires the [`primaryKey`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +[`getState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=getState) will return an [`IGridState`](mcp:get_api_reference?platform=angular&component=IGridState) 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 @@ -42,12 +42,12 @@ 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. +[`setState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=setState) - The [`setState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=setState) method accepts the serialized JSON string or [`IGridState`](mcp:get_api_reference?platform=angular&component=IGridState) 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. +`options` - The [`options`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=options) object implements the [`IGridStateOptions`](mcp:get_api_reference?platform=angular&component=IGridStateOptions) 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`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=getState) method will not put the state of these features in the returned value and [`setState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=setState) method will not restore state for it. ```typescript public options = { cellSelection: false; sorting: false; } ``` @@ -79,7 +79,7 @@ public restoreGridState() { ## 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: +1. Define a template reference variable (in the example below it is `#activeTemplate`) and assign an event handler for the [`columnInit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnInit) event: @@if (igxName === 'IgxGrid') { ```html @@ -116,7 +116,7 @@ For such scenarios, the following [`limitations`](state-persistence.md#limitatio ``` } -1. 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: +1. Query the template view in the component using @ViewChild or @ViewChildren decorator. In the [`columnInit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=columnInit) event handler, assign the template to the column `bodyTemplate` property: ```typescript @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef; public onColumnInit(column: IgxColumnComponent) { @@ -128,7 +128,7 @@ public onColumnInit(column: IgxColumnComponent) { } ``` ## 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: +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`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective) 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 @@ -444,11 +444,11 @@ 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. +- [`getState`](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective&member=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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=formatter), [`filters`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=filters), [`summaries`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=summaries), [`sortStrategy`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=sortstrategy), [`cellClasses`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=cellClasses), [`cellStyles`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=cellstyles), [`headerTemplate`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=headerTemplate) and [`bodyTemplate`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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) +- [IgxHierarchicalGridComponent](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) +- [IgxGridStateDirective](mcp:get_api_reference?platform=angular&component=IgxGridStateDirective) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.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 index 66b778862..086b1cb59 100644 --- 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 @@ -133,7 +133,7 @@ export class HGridSummarySampleComponent { > [!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: +For `string` and `boolean` [`data types`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=dataType), the following function is available: - count For `number`, `currency` and `percent` data types, the following functions are available: - count @@ -146,7 +146,7 @@ For `date` data type, the following functions are available: - 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). +**Hierarchical Grid summaries** are enabled per-column by setting [`hasSummary`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=datatype) property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid [`locale`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale) and column [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=pipeArgs). ```html @@ -162,7 +162,7 @@ All available column data types could be found in the official [Column types top ``` -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**. +The other way to enable/disable summaries for a specific column or a list of columns is to use the public method [`enableSummaries`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=enableSummaries)/[`disableSummaries`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=disableSummaries) of the **igx-hierarchical-grid**. ```html @@ -192,7 +192,7 @@ public disableSummary() { } ``` ## 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). +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`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand), [`IgxNumberSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand) or [`IgxDateSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand) according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. [`IgxSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand) class provides the default implementation only for the [`count`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand&member=count) method. [`IgxNumberSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand) extends [`IgxSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand) and provides implementation for the [`min`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand&member=min), [`max`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand&member=max), [`sum`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand&member=sum) and [`average`](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand&member=average). [`IgxDateSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand) extends [`IgxSummaryOperand`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand) and additionally gives you [`earliest`](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand&member=earliest) and [`latest`](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand&member=latest). ```typescript import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxSummaryResult } from 'igniteui-angular/core'; @@ -215,8 +215,8 @@ class MySummary extends IgxNumberSummaryOperand { } } ``` -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). +As seen in the examples, the base classes expose the [`operate`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand&member=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`](mcp:get_api_reference?platform=angular&component=IgxSummaryResult). ```typescript interface IgxSummaryResult { key: string; @@ -227,8 +227,8 @@ interface IgxSummaryResult { 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. +> In order to calculate the summary row height properly, the Hierarchical Grid needs the [`operate`](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand&member=operate) method to always return an array of [`IgxSummaryResult`](mcp:get_api_reference?platform=angular&component=IgxSummaryResult) 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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=summaries) property to the class we create below. ```html @@ -383,9 +383,9 @@ export class HGridAllDataSummaryComponent implements OnInit { ``` -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. +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](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +> Column summary template could be defined through API by setting the column [summaryTemplate](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=summaryTemplate) property to the required TemplateRef. ```typescript import { Component, HostBinding, OnInit } from '@angular/core'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxNumberSummaryOperand, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; @@ -606,7 +606,7 @@ igx-buttongroup { } ``` ## 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. +The [`disabledSummaries`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 @@ -1038,7 +1038,7 @@ export class HierarchicalGridDisableSummariesComponent implements OnInit, AfterV } ``` ## 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. +By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid [`locale`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=locale) and column [`pipeArgs`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxColumnComponent&member=summaryFormatter) property. ```typescript public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string { const result = summary.summaryResult; @@ -1133,8 +1133,8 @@ export class HGridSummaryFormatterComponent { ```
## 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: +There is an [`exportSummaries`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterOptions&member=exportSummaries) option in `IgxExcelExporterOptions` that specifies whether the exported data should include the grid's summaries. Default `exportSummaries` value is **false**. +The [`IgxExcelExporterService`](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService) 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'; @@ -1516,14 +1516,14 @@ $custom-theme: grid-summary-theme( } ``` ## API References -- [IgxHierarchicalGridComponent API](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxhierarchicalgridcomponent.html) +- [IgxHierarchicalGridComponent API](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [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) +- [IgxSummaryOperand](mcp:get_api_reference?platform=angular&component=IgxSummaryOperand) +- [IgxNumberSummaryOperand](mcp:get_api_reference?platform=angular&component=IgxNumberSummaryOperand) +- [IgxDateSummaryOperand](mcp:get_api_reference?platform=angular&component=IgxDateSummaryOperand) +- [IgxColumnGroupComponent](mcp:get_api_reference?platform=angular&component=IgxColumnGroupComponent) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) 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 index 486d45308..b47681a0d 100644 --- 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 @@ -8,7 +8,7 @@ _tocName: Toolbar _premium: true --- # 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: +The Hierarchical Grid in Ignite UI for Angular provides an [`IgxGridToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent) 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 @@ -119,7 +119,7 @@ The predefined `actions` and `title` UI components are added inside the ` ``` -> 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. +> Note: As seen in the code snippet above, the predefined `actions` UI components are wrapped in the [`` container](mcp:get_api_reference?platform=angular&component=IgxGridToolbarActionsComponent). 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 @@ -285,7 +285,7 @@ export class HGridToolbarOptionsSampleComponent { } ``` ### 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). +Setting a title for the toolbar in your grid is achieved by using the [IgxGridToolbarTitleComponent](mcp:get_api_reference?platform=angular&component=IgxGridToolbarTitleComponent). Users can provide anything from simple text to more involved templates. ```html @@ -293,7 +293,7 @@ Users can provide anything from simple text to more involved templates. ``` ### 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. +The toolbar exposes a [specific container](mcp:get_api_reference?platform=angular&component=IgxGridToolbarActionsComponent) 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 @@ -305,7 +305,7 @@ toolbar interaction components. ``` -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: +Each action now exposes a way to change the overlay settings of the actions dialog by using the [`overlaySettings`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent&member=overlaySettings) input, example: ```html @@ -337,7 +337,7 @@ constructor() { ``` 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. +[Toolbar Pinning component](mcp:get_api_reference?platform=angular&component=IgxGridToolbarPinningComponent) 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 @@ -353,7 +353,7 @@ title, the placeholder for the component input and the height of the dropdown it ``` ### Column hiding -[Toolbar Hiding component](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridtoolbarhidingcomponent.html) provides the default +[Toolbar Hiding component](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent) 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 @@ -369,7 +369,7 @@ title, the placeholder for the component input and the height of the dropdown it ``` ### 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. +[Toolbar Advanced Filtering component](mcp:get_api_reference?platform=angular&component=IgxGridToolbarAdvancedFilteringComponent) provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button. ```html @@ -381,8 +381,8 @@ title, the placeholder for the component input and the height of the dropdown it > [!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 +As with the rest of the toolbar actions, exporting is provided through a [Toolbar Exporter component](mcp:get_api_reference?platform=angular&component=IgxGridToolbarExporterComponent) out of the box. +The exporting component is using the respective service for the target data format ([Excel](mcp:get_api_reference?platform=angular&component=IgxExcelExporterService), [CSV](mcp:get_api_reference?platform=angular&component=IgxCsvExporterService), [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. @@ -400,7 +400,7 @@ export class AppModule { ... } > 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. +generated file. For full reference, consult the [API documentation](mcp:get_api_reference?platform=angular&component=IgxGridToolbarExporterComponent) for the toolbar exporter component. Here is a snippet showing some of the options which can be customized through the Angular template: ```html @@ -426,7 +426,7 @@ Here is a snippet showing some of the options which can be customized through th 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 +Moreover, users can set the toolbar [showProgress](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent&member=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 @@ -725,15 +725,15 @@ $dark-grid-toolbar-theme: grid-toolbar-theme(
## 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) +- [`IgxGridToolbarActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarActionsComponent) +- [`IgxGridToolbarAdvancedFilteringComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarAdvancedFilteringComponent) +- [`IgxGridToolbarComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarComponent) +- [`IgxGridToolbarExporterComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarExporterComponent) +- [`IgxGridToolbarHidingComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarHidingComponent) +- [`IgxGridToolbarPinningComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarPinningComponent) +- [`IgxGridToolbarTitleComponent`](mcp:get_api_reference?platform=angular&component=IgxGridToolbarTitleComponent) +[`IgxHierarchicalGridComponent`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) events: +- [`toolbarExporting`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=toolbarExporting) Styles: - [`IgxHierarchicalGridComponent Styles`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) ## Additional Resources 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 index b26e4dd6c..e798d7268 100644 --- 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 @@ -117,18 +117,18 @@ We expose the `FormGroup` that will be used for validation when editing starts o } 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. +The grid exposes a validation service via the [`validation`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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. +- [`valid`](mcp:get_api_reference?platform=angular&component=IgxGridValidationService&member=valid) - returns if the grid validation state is valid. +- [`getInvalid`](mcp:get_api_reference?platform=angular&component=IgxGridValidationService&member=getInvalid) - returns records with invalid states. +- [`clear`](mcp:get_api_reference?platform=angular&component=IgxGridValidationService&member=clear) - clears state for record by id or clears all state if no id is provided. +- [`markAsTouched`](mcp:get_api_reference?platform=angular&component=IgxGridValidationService&member=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. +- While editing via the cell editor based on the grid's [`validationTrigger`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=updateRow), [`updateCell`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=updateCell) etc.. +- When using batch editing and the [`undo`](mcp:get_api_reference?platform=angular&component=IgxTransactionService&member=undo)/[`redo`](mcp:get_api_reference?platform=angular&component=IgxTransactionService&member=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 @@ -168,8 +168,8 @@ This is useful in scenarios where you want to add your own custom error message ``` ### 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) +In that scenarios you can use the [`cellEdit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellEdit) or [`rowEdit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEdit) events and cancel the event in case the new value is invalid. +Both events' arguments have a [`valid`](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs&member=valid) property and can be canceled accordingly. How it is used can be seen in the [Cross-field Validation example](#cross-field-example) ```html ``` @@ -407,7 +407,7 @@ In that case a custom validator can be used to compare the values in the record - 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. + Cross-field validators can be added to the formGroup on the [`formGroupCreated`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=formGroupCreated) event. In them multiple fields can be compared for validity. ```ts public formCreateCustomerHandler(event: IGridFormGroupCreatedEventArgs) { @@ -897,9 +897,9 @@ igx-hierarchical-grid { ```
## 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) +- [IgxBaseTransactionService](mcp:get_api_reference?platform=angular&component=IgxBaseTransactionService) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) ## Known Issues and Limitations | Limitation | Description | | :------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 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 index 72bddec53..b2c453233 100644 --- 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 @@ -8,7 +8,7 @@ _tocName: Virtualization and performance _premium: true --- # 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. +In Ignite UI for Angular, the [IgxHierarchicalGrid](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) control now utilizes the [`igxForOf`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) directive and virtualizes its content both vertically and horizontally. ## Angular Hierarchical Grid Virtualization and Performance Example ```typescript import { AfterViewInit, Component, OnInit, ViewChild, inject } from '@angular/core'; @@ -173,10 +173,10 @@ export class HierarchicalGridLoDSampleComponent implements OnInit, AfterViewInit ```
## 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`). +By utilizing the [`igxForOf`](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) 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](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent)'s [`width`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=width) and [`height`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=width) and/or [`height`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=width) is `null` and rows if [`height`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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. +- The row height for the vertical (row) virtualization. This is determined by the [`rowHeight`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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`](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent&member=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 @@ -186,11 +186,11 @@ Explicitly setting column widths in percentages (%) will, in most cases, create 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](mcp:get_api_reference?platform=angular&component=IgxHierarchicalGridComponent) - [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) +- [IgxColumnComponent](mcp:get_api_reference?platform=angular&component=IgxColumnComponent) +- [IgxForOfDirective](mcp:get_api_reference?platform=angular&component=IgxForOfDirective) +- [IForOfState](mcp:get_api_reference?platform=angular&component=IForOfState) ## Additional Resources
- [Hierarchical Grid overview](hierarchical-grid.md) 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 index 79f185296..362b3efb1 100644 --- 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 @@ -398,7 +398,7 @@ Go to [Batch Editing](../../grid/batch-editing.md) for more details and demo sam 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): +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](mcp:get_api_reference?platform=angular&component=IgxCellTemplateDirective). 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`](mcp:get_api_reference?platform=angular&component=IgxGridCell&member=editValue): ```html @@ -420,14 +420,14 @@ The grid exposes a wide array of events that provide greater control over the ed | 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` | +| [`rowEditEnter`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditEnter) | If `rowEditing` is enabled, fires when a row enters edit mode | [IGridEditEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`cellEditEnter`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellEditEnter) | Fires when a cell **enters edit mode** (after `rowEditEnter`) | [IGridEditEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`cellEdit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellEdit) | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing `Enter`) | [IGridEditEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`cellEditDone`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellEditDone) | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditDoneEventArgs) | `false` | +| [`cellEditExit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=cellEditExit) | Fires when a cell **exits edit mode** | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `false` | +| [`rowEdit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `true` | +| [`rowEditDone`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditDone) | If `rowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `false` | +| [`rowEditExit`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=rowEditExit) | If `rowEditing` is enabled, fires when a row **exits edit mode** | [IGridEditDoneEventArgs](mcp:get_api_reference?platform=angular&component=IGridEditEventArgs) | `false` | Go to [Events](../../grid/editing.md#event-arguments-and-sequence) for more details and demo samples. @@ -435,12 +435,12 @@ Go to [Events](../../grid/editing.md#event-arguments-and-sequence) for more deta 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) +- [`updateRow`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=updateRow) +- [`updateCell`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=updateCell) +- [`deleteRow`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=deleteRow) +- [`addRow`](mcp:get_api_reference?platform=angular&component=IgxGridComponent&member=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: +and `update` method exposed by the [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) and [IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) instances: ```typescript // Through the grid methods @@ -464,11 +464,11 @@ Enabling CRUD in a robust way is major milestone for any data-driven application ## 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) +- [IgxGridComponent](mcp:get_api_reference?platform=angular&component=IgxGridComponent) +- [IgxGridRow](mcp:get_api_reference?platform=angular&component=IgxGridRow) +- [IgxGridCell](mcp:get_api_reference?platform=angular&component=IgxGridCell) +- [`IgxActionStripComponent API`](mcp:get_api_reference?platform=angular&component=IgxActionStripComponent) +- [`IgxGridActionsBaseDirective`](mcp:get_api_reference?platform=angular&component=IgxGridActionsBaseDirective) +- [`IgxGridPinningActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridPinningActionsComponent) +- [`IgxGridEditingActionsComponent`](mcp:get_api_reference?platform=angular&component=IgxGridEditingActionsComponent) 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 index 295a5f329..6dc8a47d0 100644 --- 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 @@ -103,7 +103,7 @@ Now that you have the Ignite UI for Angular Icon Button directive imported, you ### 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: +Use the [`igxIconButton`](mcp:get_api_reference?platform=angular&component=IgxIconButtonDirective) directive to add a simple flat icon button in your component template: ```html