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 902d01e40..ceafbfc09 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/db/igniteui-docs.db b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db index 902d01e40..ceafbfc09 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/pivotGrid-pivot-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid.md index 8ed4d9e0a..5e4e6f6e0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid.md @@ -99,11 +99,9 @@ export class PivotDataSelectorSampleComponent { ``` ```html
-
- - -
+ +
``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accordion.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accordion.md index c47b59383..c369e6550 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accordion.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accordion.md @@ -84,7 +84,6 @@ In it, you can see how to define an accordion and its expansion panels. The samp } ``` -
## Getting Started with Blazor Accordion @@ -341,7 +340,6 @@ The sample below demonstrates how elaborate filtering options can be implemented } ``` -
### Nested Blazor Accordions Scenario @@ -453,7 +451,6 @@ In the following Blazor Accordion example is created a complex FAQ section in or } ``` -
## Keyboard Navigation diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/ai-assisted-development-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/ai-assisted-development-overview.md new file mode 100644 index 000000000..8da4f382d --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/ai-assisted-development-overview.md @@ -0,0 +1,245 @@ +--- +title: AI-Assisted Development with Ignite UI - Ignite UI for Blazor +_description: Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command — npx igniteui-cli ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs. +_keywords: Blazor, Ignite UI for Blazor, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" +last_updated: "2026-05-03" +namespace: Infragistics.Controls +mentionedTypes: [] +_tocName: Agent Workflow +--- + + + +# AI-Assisted Development with Ignite UI + +Ignite UI for Blazor provides a complete AI toolchain - Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server and the MAKER MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server (`@igniteui/mcp-server`) exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server (`igniteui-theming`) exposes the Ignite UI Theming Engine as queryable agent context. The MAKER MCP (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. Skills, CLI MCP and Theming MCP - all three are configured by a single command: `npx igniteui-cli ai-config` + +The MCP servers and Agent Skills serve different purposes and have different prerequisites: + +| Component | What it provides | Requires Ignite UI installed? | +| -------------------- | -------------------------------------------------------------- | ----------------------------- | +| Ignite UI MCP server | Documentation queries, API reference, scaffolding tools | No | +| Theming MCP server | Design tokens, palette tools, WCAG contrast validation | No | +| Agent Skills | Project-level instruction packages for correct component usage | Yes | + +You can start evaluating Ignite UI AI assistance with the MCP servers alone - Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages. + +The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts. + +## Configure the AI Toolchain + +Run this command from the root of your existing Angular, React, Blazor, or Web Components project. It configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. Existing files are only updated if their content has changed. + +```bash +npx igniteui-cli ai-config +``` + +> [!IMPORTANT] +> Without a version pin, `npx` may pull an older CLI version that does not recognize the `ai-config` subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x. + +After the command finishes, start the MCP servers in your AI client. The servers are configured but not yet running - the client needs to launch each server before its tools are available to the agent. + +### What to Expect + +If Ignite UI is **not** installed in the project: + +``` +Ignite UI MCP servers configured in .vscode/mcp.json +No AI skill files found. Make sure packages are installed (npm install) and your Ignite UI packages are up-to-date. +``` + +The MCP servers are ready to use. Skills will be added automatically the next time you run `ai-config` after installing Ignite UI. + +If Ignite UI **is** installed in the project: + +``` +Ignite UI MCP servers configured in .vscode/mcp.json +Agent Skills copied to .claude/skills/ +``` + +Both the MCP servers and Skills are configured. + +### Start the Servers + +**VS Code with GitHub Copilot:** + +Open `.vscode/mcp.json`. VS Code displays an inline **Start** button above each server entry. Click **Start** for both `igniteui` and `igniteui-theming`. Once started, VS Code shows the available tool count next to each server (for example, _"13 tools | 1 prompt"_). Alternatively, run **MCP: List Servers** from the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`), select each server, and choose **Start**. + +**Cursor:** + +Open **Settings → MCP**, locate the `igniteui` and `igniteui-theming` entries, and toggle each one on. Cursor starts each server immediately and displays its tool count. + +**Claude Code:** + +Run `claude mcp list` to confirm both servers are registered. Claude Code starts MCP servers automatically when their tools are first invoked - no manual start step is required. + +**JetBrains AI Assistant:** + +Open **Settings → Tools → AI Assistant → Model Context Protocol (MCP)**. Click the play icon next to each server entry to start it. + +**Claude Desktop:** + +Quit and relaunch Claude Desktop. The servers start automatically on launch. + +### Install Ignite UI and Add Skills Later + +If you ran `ai-config` without Ignite UI installed and want to add Skills, install the Ignite UI package for your framework and re-run the command: + +> [!Note] +> For Blazor, the `ai-config` command is currently not available. Install the skills using the GitHub CLI: + +```bash +gh skill install IgniteUI/igniteui-blazor +``` + +The command detects that Skills are now available and copies them. The MCP server entries in `.vscode/mcp.json` are left unchanged (already up-to-date) + +## The AI Toolchain at a Glance + +Ignite UI's AI toolchain consists of three independently usable layers. Each layer can be enabled on its own; they are designed to work together. + +| Layer | What it provides | Owner | Frameworks | +| --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- | +| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor | +| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components, Blazor | +| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS custom property generation, WCAG AA contrast validation | Infragistics | Angular, React, Web Components, Blazor | + +The CLI MCP server and Theming MCP server are both started through `npx` and connect to any MCP-compatible client through STDIO transport. Agent Skills are local files placed in your project that the AI client reads from disk. + +## Agent Skills + +Agent Skills are structured, developer-owned packages that tell AI coding assistants exactly how to use Ignite UI for a specific framework. A Skill package can contain a `SKILL.md` instruction file with component patterns, import paths, and decision flows; references to authoritative Ignite UI documentation; and assets such as schema files or diagrams. When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data - which may reference outdated API signatures or import paths. + +Ignite UI ships dedicated Skill packages for Angular, React, Web Components, and Blazor. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, reference your internal design system, and version the package alongside your codebase. + +For full setup instructions and IDE wiring, see [Agent Skills](skills.md). + +## CLI MCP Server + +The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, Blazor or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session. + +The CLI MCP server is configured via `npx` without a global install: + +```bash +npx igniteui-cli ai-config +``` + +The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see the CLI MCP setup guides below. + +It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. + +## Theming MCP Server + +The Ignite UI Theming MCP server (`igniteui-theming`) is a separate MCP server that exposes the Ignite UI Theming Engine as queryable agent context. It covers design token access, palette definitions, CSS custom property generation, and WCAG AA contrast validation. It is architecturally separate from the CLI MCP server - it can be connected independently to give the AI agent access to theming tools without exposing project scaffolding tools. + +The Theming MCP server starts via `npx`: + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +The Theming MCP server supports Angular, React, Web Components, and Blazor. It updates with every Ignite UI release so agents always work against the current token surface. + +For configuration details, see [Theming MCP](theming-mcp.md). + +## Supported AI Clients + +The CLI MCP server and Theming MCP server work with any editor or AI client that supports MCP with STDIO transport. + +| Client | Configuration method | +| --------------------------- | ----------------------------------------------------------------- | +| VS Code with GitHub Copilot | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` or the Claude Code MCP CLI command | +| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)*- | + +Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings. + +### Quick Setup + +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. + +**Using the Ignite UI CLI:** + +```bash +npx igniteui-cli ai-config +``` + +If you have the Ignite UI CLI installed globally, use the shorter form: + +```bash +ig ai-config +``` + +### Step 1 - Load Agent Skills + +Copy the Ignite UI Skill package for your framework into your project's agent discovery path. The Skill package ships with the library in `node_modules/igniteui-{framework}/skills/`. Wire it to your IDE using the persistent setup for your client. + +See [Agent Skills](skills.md) for the complete setup. + +### Step 2 - Connect the CLI MCP Server + +Add the `igniteui-cli` MCP server entry to the configuration file for your AI client. Use the JSON structure that matches your client: + +**VS Code (`.vscode/mcp.json`):** + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:** + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.md). + +### Step 3 - Connect the Theming MCP Server (optional) + +Add the `igniteui-theming` entry to the same MCP configuration file, alongside `igniteui-cli`: + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +For configuration details and theming workflows, see [Theming MCP](theming-mcp.md). + +## Additional Resources + +- [Agent Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/area-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/area-chart.md index 5dcafcfe6..694768563 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/area-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/area-chart.md @@ -109,7 +109,6 @@ public class CountryRenewableElectricity } ``` -
## Area Chart Recommendations @@ -223,7 +222,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Area Chart with Multiple Series @@ -322,7 +320,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Area Chart Styling @@ -426,7 +423,6 @@ public class CountryRenewableElectricity } ``` -
## Advanced Types of Area Charts @@ -532,7 +528,6 @@ public class CountryRenewableElectricity } ``` -
The following sections explain more advanced types of Blazor Area Charts that can be created using the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control instead of [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control with simplified API. @@ -681,7 +676,6 @@ public class TemperatureRangeData } ``` -
## Blazor Stacked Area Chart @@ -862,7 +856,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked 100% Area Chart @@ -1040,7 +1033,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked Spline Area Chart @@ -1221,7 +1213,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked 100% Spline Area Chart @@ -1398,7 +1389,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Radial Area Chart @@ -1547,7 +1537,6 @@ public class FootballPlayerStats } ``` -
## Blazor Polar Area Chart @@ -1701,7 +1690,6 @@ public class BoatSailingData } ``` -
## Blazor Polar Spline Area Chart @@ -1838,7 +1826,6 @@ public class BoatSailingData } ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md index c5e60f85f..2e0df1441 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/avatar.md @@ -40,7 +40,6 @@ The Ignite UI for Blazor Avatar helps to display initials, images, or icons in y } ``` -
## Usage @@ -101,7 +100,6 @@ If the [`Initials`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Bl } ``` - ### Image The avatar can also display an image when the [`Src`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html#IgniteUI_Blazor_Controls_IgbAvatar_Src) attribute is assigned a valid URL to a static asset. In that case the [`Initials`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html#IgniteUI_Blazor_Controls_IgbAvatar_Initials) value will be ignored and children elements will not be rendered. @@ -127,7 +125,6 @@ The avatar can also display an image when the [`Src`](https://www.infragistics.c } ``` - ### Shape The avatar supports three shapes - `circle`, `rounded`, and `square`. The default shape of the avatar is `square` and it can be changed via the `shape` attribute. @@ -159,7 +156,6 @@ The avatar supports three shapes - `circle`, `rounded`, and `square`. The defaul } ``` - ### Size Apart from the shape, the size of the avatar can also be changed by utilizing the `--ig-size` CSS variable. The supported sizes are `small` (default), `medium`, and `large`. The following code snippet shows how to use a different component size: @@ -185,7 +181,6 @@ igc-avatar { } ``` - ### Styling The [`IgbAvatar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html) component exposes several CSS parts, giving you full control over its style: @@ -227,7 +222,6 @@ igc-avatar::part(base) { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md index dda708c76..75ef20e03 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md @@ -26,7 +26,6 @@ The Ignite UI for Blazor Badge is a component used in conjunction with avatars, } ``` -
## Usage @@ -80,7 +79,6 @@ The Ignite UI for Blazor badge supports several pre-defined stylistic variants. } ``` - ### Shape The badge component supports `rounded`(default) and `square` shapes. These values can be assigned to the [`Shape`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBadge.html#IgniteUI_Blazor_Controls_IgbBadge_Shape) attribute. @@ -102,7 +100,6 @@ The badge component supports `rounded`(default) and `square` shapes. These value } ``` - ### Dot The Ignite UI for Blazor badge component can also render as a minimal dot indicator for notifications by setting its `dot` attribute. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.). @@ -113,7 +110,6 @@ The Ignite UI for Blazor badge component can also render as a minimal dot indica - ## Styling The [`IgbBadge`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBadge.html) component exposes a `base` CSS part that can be used to change all of its style properties. @@ -138,7 +134,6 @@ igc-badge::part(base) { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/banner.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/banner.md index 91f906423..fde4e080b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/banner.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/banner.md @@ -106,7 +106,6 @@ The Ignite UI for Blazor Banner component provides a way to easily display a pro } ``` - ## Usage Before using the [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html), you need to register it as follows: @@ -321,7 +320,6 @@ The [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blaz } ``` - ### Binding to events The banner component emits the `Closing` and `Closed` events when being closed. The `Closing` event is cancelable - it uses the [`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent) interface and the emitted object has its `cancelable` property set to **true**. If we cancel the `Closing` event, the corresponding end action and event will not be triggered - the banner will not be closed and the `Closed` event will not be emitted. @@ -571,7 +569,6 @@ Finally, we will add a [`IgbToast`](https://www.infragistics.com/blazor/docs/api } ``` - ## Styling The [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html) component exposes several CSS parts which give you full control over its style: @@ -744,7 +741,6 @@ igc-banner::part(content) { } ``` - ## API References - [`IgbBanner`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBanner.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bar-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bar-chart.md index 4a1a7c10c..06135f15f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bar-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bar-chart.md @@ -164,7 +164,6 @@ public class HighestGrossingMovies } ``` -
## Bar Chart Recommendations @@ -339,7 +338,6 @@ public class OnlineShoppingSearches } ``` -
## Blazor Bar Chart with Multiple Series @@ -493,7 +491,6 @@ public class HighestGrossingMovies } ``` -
## Blazor Bar Chart Styling @@ -635,7 +632,6 @@ public class OnlineShoppingSearches } ``` -
## Blazor Stacked Bar Chart @@ -807,7 +803,6 @@ public class EnergyRenewableConsumption } ``` -
## Blazor Stacked 100% Bar Chart @@ -976,7 +971,6 @@ public class EnergyRenewableConsumption } ``` -
## Additional Resources @@ -994,7 +988,7 @@ You can find more information about related chart types in these topics: The following table lists API members mentioned in the above sections: - [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) -- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html#IgniteUI_Blazor_Controls_IgbBarSeries_DataSource) - [`IgbBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBarSeries.html) - [`IgbCalloutLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalloutLayer.html) - [`IgbStackedBarSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbStackedBarSeries.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bubble-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bubble-chart.md index 37b2e6a55..ed802d413 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bubble-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bubble-chart.md @@ -250,12 +250,11 @@ public class CountryStatsEurope } ``` -
## Blazor Bubble Chart with Single Series -You can bind your data to [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) property of [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html) and map data columns using its [`XMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_XMemberPath), [`YMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_YMemberPath), [`RadiusMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_RadiusMemberPath) properties, as shown in the example below: +You can bind your data to [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) property of [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html) and map data columns using its [`XMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_XMemberPath), [`YMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_YMemberPath), [`RadiusMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_RadiusMemberPath) properties, as shown in the example below: ```razor @using IgniteUI.Blazor.Controls @@ -421,7 +420,6 @@ public class WorldStats } ``` -
## Blazor Bubble Chart with Multiple Series @@ -661,12 +659,11 @@ public class CountryStatsEurope } ``` -
## Blazor Bubble Chart Styling -In Blazor Bubble Chart, you can customize shape of bubble markers using [`MarkerType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerType) property, their size with [`RadiusScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_RadiusScale) property, and their appearance using [`MarkerBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerBrush), [`MarkerOutline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerOutline), [`MarkerThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerThickness) properties. In addition, you can also color bubble markers based on a data column using [`FillMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_FillMemberPath) and [`FillScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_FillScale) properties. In this example, usage of above properties is demonstrated. +In Blazor Bubble Chart, you can customize shape of bubble markers using [`MarkerType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_MarkerType) property, their size with [`RadiusScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_RadiusScale) property, and their appearance using [`MarkerBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_MarkerBrush), [`MarkerOutline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_MarkerOutline), [`MarkerThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_MarkerThickness) properties. In addition, you can also color bubble markers based on a data column using [`FillMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_FillMemberPath) and [`FillScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_FillScale) properties. In this example, usage of above properties is demonstrated. ```razor @using IgniteUI.Blazor.Controls @@ -837,7 +834,6 @@ public class WorldStats } ``` -
## Additional Resources @@ -855,11 +851,11 @@ The following table lists API members mentioned in the above sections: - [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) - [`FillMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_FillMemberPath) - [`FillScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_FillScale) -- [`MarkerType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerType) -- [`MarkerBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerBrush) -- [`MarkerOutline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerOutline) -- [`MarkerThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMarkerSeries.html#IgniteUI_Blazor_Controls_IgbMarkerSeries_MarkerThickness) +- [`MarkerType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_MarkerType) +- [`MarkerBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_MarkerBrush) +- [`MarkerOutline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_MarkerOutline) +- [`MarkerThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_MarkerThickness) - [`RadiusScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_RadiusScale) - [`RadiusMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_RadiusMemberPath) -- [`XMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_XMemberPath) -- [`YMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterBase.html#IgniteUI_Blazor_Controls_IgbScatterBase_YMemberPath) +- [`XMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_XMemberPath) +- [`YMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html#IgniteUI_Blazor_Controls_IgbBubbleSeries_YMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bullet-graph.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bullet-graph.md index 5c1c24613..1193a5310 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bullet-graph.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/bullet-graph.md @@ -379,7 +379,6 @@ The following sample demonstrates how setting multiple properties on the same [` } ``` -
The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the [`TransitionDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_TransitionDuration) property. @@ -483,7 +482,6 @@ Performance value is the primary measure displayed by the component and it is vi } ``` - ## Highlight Value The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_Value) appear with a lower opacity. A good example is if [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_Value) is 50 and [`HighlightValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_HighlightValue) is set to 25. This would represent a performance of 50% regardless of what the value of [`TargetValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_TargetValue) is set to. To enable this first set [`HighlightValueDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_HighlightValueDisplayMode) to Overlay and then apply a [`HighlightValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_HighlightValue) to something lower than [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_Value). @@ -529,7 +527,6 @@ The bullet graph's performance value can be further modified to show progress re } ``` - ## Comparative Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state. @@ -598,7 +595,6 @@ The ranges are visual elements that highlight a specified range of values on a s } ``` - ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. @@ -657,7 +653,6 @@ The tick marks serve as a visual division of the scale into intervals in order t } ``` - ## Labels The labels indicate the measures on the scale. @@ -699,7 +694,6 @@ The labels indicate the measures on the scale. } ``` - ## Backing The backing element represents background and border of the bullet graph component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. @@ -739,7 +733,6 @@ The backing element represents background and border of the bullet graph compone } ``` - ## Scale The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using [`IsScaleInverted`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_IsScaleInverted) property) and all labels will be rendered from right-to-left instead of left-to-right. @@ -781,7 +774,6 @@ The scale is visual element that highlights the full range of values in the gaug } ``` - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the bullet graph with all features and visuals enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md index 91da64eef..1f8f5103b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button-group.md @@ -71,7 +71,6 @@ The Blazor Button Group component is used to organize [`IgbToggleButton`](https: } ``` - ## Usage Before using the [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html), you need to register it as follows: @@ -160,7 +159,6 @@ Use the [`Alignment`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI. } ``` - ### Selection In order to configure the Ignite UI for Blazor [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) selection, you could use its [`Selection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html#IgniteUI_Blazor_Controls_IgbButtonGroup_Selection) property. This property accepts the following three modes: @@ -256,7 +254,6 @@ The sample below demonstrates the exposed [`IgbButtonGroup`](https://www.infragi } ``` - A [`IgbToggleButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html) could be marked as selected via its [`Selected`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToggleButton.html#IgniteUI_Blazor_Controls_IgbToggleButton_Selected) attribute or through the [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) [`SelectedItems`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html#IgniteUI_Blazor_Controls_IgbButtonGroup_SelectedItems) attribute: ```razor @@ -310,7 +307,6 @@ The `--ig-size` CSS custom property can be used to control the size of the butto } ``` - ## Styling The [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) component exposes `group` CSS part that allows us to style the button group container. @@ -386,7 +382,6 @@ igc-toggle-button::part(toggle) { } ``` - ## API Reference - [`IgbButtonGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonGroup.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button.md index 602cc12f3..7a6432bc8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/button.md @@ -38,7 +38,6 @@ The Blazor Button Component lets you enable clickable elements that trigger acti } ``` - ## Usage Before using the [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html), you need to register it as follows: @@ -73,8 +72,8 @@ With `prefix` and `suffix` slots of the [`IgbButton`](https://www.infragistics.c ## Type -The button component will change its internal structure from a [` - - - - - -
- @if (Data != null) - { -
- - 150")" /> - 160")" /> - 120")" /> - 120")" /> - 110")" /> - 170")" /> - - -
- } -
- - -@code { - - public static IgbDataGrid DataGridRef; - private EditModeClickAction GridEditModeClickAction = EditModeClickAction.SingleClick; - private EditModeType _editMode; - public EditModeType GridEditMode - { - get { return _editMode; } - set - { - _editMode = value; - if (_editMode == EditModeType.CellBatch) - { - ButtonsDisabled = false; - } - else - { - ButtonsDisabled = true; - } - } - } - - private bool ButtonsDisabled { get; set; } - - public static ObservableCollection Data { get; set; } - - protected override void OnInitialized() - { - Data = ObsEmployeeData.Create(100, false); - this.GridEditMode = EditModeType.Cell; - } - - private void OnCommitClick(MouseEventArgs e) - { - DataGridRef.CommitEdits(); - StateHasChanged(); - - } - - private void OnUndoClick(MouseEventArgs e) - { - DataGridRef.Undo(); - StateHasChanged(); - - } - - private void OnRedoClick(MouseEventArgs e) - { - DataGridRef.Redo(); - StateHasChanged(); - - } - - private void OnRowEditEnded(IgbGridRowEditEndedEventArgs e) - { - if (_editMode == EditModeType.CellBatch) - { - ButtonsDisabled = false; - } - else - { - ButtonsDisabled = true; - } - StateHasChanged(); - } - private void OnRowEditStarted(IgbGridRowEditStartedEventArgs e) - { - if (_editMode == EditModeType.CellBatch) - { - ButtonsDisabled = true; - } - else - { - ButtonsDisabled = false; - } - StateHasChanged(); - } - - [JSInvokable] - public static void ButtonClickActionAtBlazorLevel(object parameter) - { - int param = int.Parse(parameter.ToString()); - var rowItem = DataGridRef.ActualDataSource.GetItemAtIndex(param); - DataGridRef.RemoveItem(rowItem); - } -} -``` - - -
- -## Overview - -Editing in the Blazor data grid is configured by using the [`EditMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_EditMode) option of the Blazor grid. This property takes three different options, listed below: - -- `None`: Editing is not enabled. -- `Cell`: Allow cells to enter edit mode and commit the value on exiting edit mode. -- `CellBatch`: Allows cells to enter edit mode but changes will be cached later until they are committed. -- `Row`: Allow rows to enter edit mode and commit the value on exit. - -When set to `CellBatch`, in order to commit the changes you must perform the `commitEdits` method from the grid. The grid will italicize the cells until they are committed providing control over when to push changes back to the datasource. - -In addition, error handling can be performed by hooking the `onCellValueChanging` event and inspecting new values before they are committed. The grid exposes a `setEditError` method that can output an error message. This keeps the cell in edit mode until a valid value is entered. Otherwise the grid's `rejectEdit` method can be performed to revert the invalid value. If no invalid value is found, you can also commit your changes by calling the grid's `acceptEdit` method. - -Commits can be approved or declined at the grid level by hooking `onDataCommitting` via the `acceptCommit` or `rejectCommit` methods passing the `commitID` event argument as the parameter. This event also exposes a `changes` collection which stores all the modifications prior to being committed. For example, you can check if a commit was from an add, update, or delete operation via the `TransactionType` property exposed on the `changes` collection and perform an `acceptCommit` or `rejectCommit` when necessary. - -## Excel Style Editing - -[`EditOnKeyPress`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_EditOnKeyPress) enables you to instantly begin editing when typing similar to how Excel behaves. In addition you may set the [`EditModeClickAction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_EditModeClickAction) property to `SingleClick` to allow users to quickly edit cells while navigating to other cells. By default double-clicking is required to enter edit mode. - -## Code Snippet - -The following demonstrates how to configure editing on the data grid and committing the data. - -```razor - - - -@code { - public IgbDataGrid DataGridRef; - - private void OnCommitClick(MouseEventArgs e) - { - this.DataGridRef.CommitEdits(); - } -} -``` - -## Undo/Redo batch changes - -The following demonstrates how to revert changes while batch updating is enabled. - -```razor - - - - -@code { - public IgbDataGrid DataGridRef; - - private void OnUndoClick(MouseEventArgs e) - { - this.DataGridRef.Undo(); - } - - private void OnRedoClick(MouseEventArgs e) - { - this.DataGridRef.Redo(); - } -} -``` - -## Error Validation and Commit Integrity - -The following demonstrates how incorporate error by checking if cells are empty when leaving edit mode and accepts commits that are from updated cells only. - -```razor - - - -@code { - public IgbDataGrid DataGridRef; - - public void OnCellValueChanging(IgbGridCellValueChangingEventArgs e) - { - //check if value is empty upon exiting edit mode. - if (e.NewValue == "") - { - this.DataGridRef.SetEditError(e.EditID, "Error, cell is empty"); - //or revert changes - this.DataGridRef.RejectEdit(e.EditID); - } - else - { - this.DataGridRef.AcceptEdit(e.EditID); - } - } - - public void OnDataCommitting(IgbGridDataCommittingEventArgs e) - { - if (e.Changes[0].TransactionType == TransactionType.Update) - { - //commit was passed - this.DataGridRef.AcceptCommit(e.CommitID); - } - else - { - //commit was prevented - this.DataGridRef.RejectCommit(e.CommitID); - } - } -} -``` - -## API References - -- `CellBatch` -- [`EditModeClickAction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_EditModeClickAction) -- [`EditMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_EditMode) -- `SingleClick` -- `TransactionType` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-cell-merging.md deleted file mode 100644 index 6d0dfdb58..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-cell-merging.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Blazor Data Grid | Cell Merging | Merging | Infragistics -_description: Use the cell merging feature of the Infragistics' Blazor data grid to join cells with duplicate values. -_keywords: Blazor Table, Data Grid, cell merging, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "MergedCellMode", "MergedCellEvaluationCriteria"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Cell Merging -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Cell Merging - -The Ignite UI for Blazor Data Table / Data Grid supports cell merging. You may opt-in and detect when adjacent sibling records for a specific column contains the same value. While the cells are not active, selected, or in edit mode, the value displays across the cells. - -## Blazor Grid Cell Merging Example - -```razor -@using IgniteUI.Blazor.Controls - -
- -
- - - - -
-
- - @if (Data != null) - { -
- - - 140")" Field="Category" /> - 160")" Field="Type" /> - 140")" Field="Contract" /> - 150")" Field="Settlement" /> - 150")" Field="Region" /> - 160")" Field="Country" /> - - 140")" Field="Open" HeaderText="Open" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" /> - 140")" Field="Price" HeaderText="Close" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" /> - 130")" Field="Change" MinFractionDigits="2" MaxFractionDigits="2" /> - 150")" Field="ChangePercent" NegativeSuffix="%" PositiveSuffix="%" MinFractionDigits="2" MaxFractionDigits="2" /> - 110")" Field="Buy" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" /> - 110")" Field="Sell" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" /> - 130")" Field="Spread" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" /> - 130")" Field="Volume" ShowGroupingSeparator="true" MinFractionDigits="0" MaxFractionDigits="0" /> - 130")" Field="DailyHigh" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" /> - 130")" Field="DailyLow" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" /> - 130")" Field="YearlyHigh" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" /> - 130")" Field="YearlyLow" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" /> - 130")" Field="YearlyStart" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" /> - - 140")" Field="Maturity" HorizontalAlignment="@CellContentHorizontalAlignment.Right" /> - 120")" Field="Currency" /> - 110")" Field="Risk" /> - 130")" Field="Sector" /> - 130")" Field="Security" /> - 170")" Field="Issuer" /> - - -
- } - - -
-
- -@code { - - private List Data; - private MergedCellMode MergedCellSelection { get; set; } - - protected override void OnInitialized() - { - this.MergedCellSelection = MergedCellMode.Always; - this.Data = PortfolioData.Create(100); - } - - private void OnMergedCellModeChange(ChangeEventArgs args) - { - string value = (string)args.Value; - if (value == "Always") - { - this.MergedCellSelection = MergedCellMode.Always; - } - else if (value == "Never") - { - this.MergedCellSelection = MergedCellMode.Never; - } - else if (value == "OnlyWhenSorted") - { - this.MergedCellSelection = MergedCellMode.OnlyWhenSorted; - } - else - { - this.MergedCellSelection = MergedCellMode.Default; - } - StateHasChanged(); - } - -} -``` - - -
- -## Overview - -Cell Merging in the Blazor data grid can be configured by using the [`MergedCellMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_MergedCellMode) option of the entire Blazor grid or individual columns. This property can be set to one of the following options, listed below: - -- `Never`: The grid or column will never merge cells. This is the default behavior. -- `Always`: The grid or column will always attempt to merge cells. -- `OnlyWhenSorted`: The grid or column will only attempt to merge cells when a column is sorted. - -Note, regardless of the value of this property, cells can only be merged across sibling records. - -Cell merging can be evaluated based on whether the data is formatted or not using the [`MergedCellEvaluationCriteria`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_MergedCellEvaluationCriteria) property. This is applicable to the entire grid or individual columns and can be set to one of the following options, listed below: - -- `RawValue`: Merge cells from adjacent rows when the raw values from the cells are the same. This is the default value. -- `FormattedText`: Merge cells from adjacent rows when the formatted value from the cells is the same. - -
- -## API References - -- `FormattedText` -- [`MergedCellEvaluationCriteria`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_MergedCellEvaluationCriteria) -- [`MergedCellMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_MergedCellMode) -- `OnlyWhenSorted` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-cell-selection.md deleted file mode 100644 index 7e6bd97a5..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-cell-selection.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Blazor Data Grid | Cell Selection | Selection | Infragistics -_description: Use cell and row selection of the Infragistics' Blazor data grid to highlight areas of the table. Learn how to configure single or multiple row selection for the Ignite UI for Blazor table. -_keywords: Blazor Table, Data Grid, cell selection, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "DataGridSelectionMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/cell-selection -_tocName: Cell Selection -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Selection - -The Ignite UI for Blazor Data Table / Data Grid supports single or multiple row and cell selection. - -## Blazor Grid Selection Example - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- Selection Mode: - -
-
- @if (Data != null) - { -
- - 150")" /> - 160")"/> - 120")"/> - 120")"/> - 110")"/> - 170")"/> - -
- } -
-
- -@code { - - private DataGridSelectionMode SelectionMode; - private List Data; - - protected override void OnInitialized() - { - this.SelectionMode = DataGridSelectionMode.MultipleRow; - - Data = EmployeeData.Create(100, false); - } -} -``` - - -
- -## Overview - -Selection in the Blazor data grid is enabled on a row and cell level and can be configured by using the [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_SelectionMode) option of the Blazor grid. This property takes five different options, listed below: - -- `None`: Selection is not enabled. -- `SingleCell`: Selection of a single cell is enabled. -- `SingleRow`: Selection of a single row is enabled. -- `MultipleCell`: Selection of multiple cells is enabled. -- `MultipleRow`: Selection of multiple rows is enabled. -- `RangeCell`: Selection of a range of multiple cells by clicking and dragging is enabled. - -[`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_SelectionBehavior) defaults to `ModifierBased`, where only one row or cell is selected at a time and modifier keys (CTRL) are required to multi-select items. [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_SelectionBehavior) set to `Toggle` will allow multiple rows or cells to be selected on single click only. - -`MultipleRow` includes the following functionality: - -- Click and drag to select rows -- SHIFT and click to select multiple rows. -- SHIFT and press the ↑ + ↓ arrow keys to select multiple rows. - -Pressing the space bar toggles selection of active row via `MultipleRow` or `SingleRow`. - -## Row Range Selection - -The following example demonstrates how to selected or deselected all rows in the grid. Note, [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_SelectionMode) must be set to MultipleRow. - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- - -
-
- @if (Data != null) - { -
- - 150")" /> - 160")"/> - 120")"/> - 120")"/> - 110")"/> - 170")"/> - -
- } -
-
- -@code { - - private IgbDataGrid DataGridRef; - private List Data; - - protected override void OnInitialized() - { - Data = EmployeeData.Create(100, false); - } - - private void OnSelectAllRowsClick(MouseEventArgs e) - { - this.DataGridRef.SelectAllRows(); - } - - private void OnDeselectAllRowsClick(MouseEventArgs e) - { - this.DataGridRef.DeselectAllRows(); - } -} -``` - - -
- -## API References - -- `ModifierBased` -- `MultipleCell` -- `MultipleRow` -- `RangeCell` -- [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_SelectionBehavior) -- [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_SelectionMode) -- `SingleCell` -- `SingleRow` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-animation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-animation.md deleted file mode 100644 index 4902aa1d4..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-animation.md +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Blazor Data Grid | Column Animations | Infragistics -_description: Learn how to display column animations through events when moving or hiding columns with Infragistics' Ignite UI for Blazor data table & grid. Check out Ignite UI for Blazor table tutorials! -_keywords: Blazor Table, Data Grid, column animations, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Animations -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Column Animations - -The Ignite UI for Blazor Data Table / Data Grid supports Column Animation during events like Column Hiding or Column Moving. When Column Animation on the Blazor data grid is set, the corresponding animation will fire for all of the cells in that column. - -## Blazor Grid Column Animations Example - -```razor -@using IgniteUI.Blazor.Controls - - -
-
- - - Exchange Animation: - -
-
- Hiding Animation: - - Updating Animation: - -
-
- Moving Animation: - - - - -
- -
- @if (Data != null) - { -
- - 170")" /> - 150")" /> - 120")" /> - 120")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 170")" /> - 120")" /> - 120")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 120")" /> - 120")" /> - -
- } -
-
- -@code { - - private List Data; - private IgbDataGrid DataGridRef; - - private ColumnShowingAnimationMode ShowingAddingAnimation = ColumnShowingAnimationMode.SlideFromLeft; - private ColumnExchangingAnimationMode ExchangeAnimation = ColumnExchangingAnimationMode.Crossfade; - private ColumnHidingAnimationMode HidingAnimation = ColumnHidingAnimationMode.FadeOut; - private ColumnPropertyUpdatingAnimationMode UpdatingAnimation = ColumnPropertyUpdatingAnimationMode.Interpolate; - private ColumnMovingAnimationMode MovingAnimation = ColumnMovingAnimationMode.SlideOver; - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(100, false); - } - - private void OnHideClick(MouseEventArgs e) - { - foreach (IgbDataGridColumn col in this.DataGridRef.ActualColumns) - { - if (!col.IsHidden) - { - col.IsHidden = true; - break; - } - } - } - - private void OnReloadClick(MouseEventArgs e) - { - List newData = EmployeeData.Create(100, false); - for (int i = 0; i < newData.Count; i++) - { - Employee oldData = this.Data[i]; - this.Data[i].Salary = newData[i].Salary; - this.DataGridRef.NotifySetItem(this.Data, i, oldData, newData[i]); - } - } - - private void OnShowClick(MouseEventArgs e) - { - IEnumerable revColumns = this.DataGridRef.ActualColumns.Reverse(); - - foreach (IgbDataGridColumn col in revColumns) - { - if (col.IsHidden) - { - col.IsHidden = false; - break; - } - } - - this.DataGridRef.ActualColumns.Reverse(); - } -} -``` - - -
- -## Animation Properties - -Each column animation property is listed and described below: - -- [`ColumnAddingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnAddingAnimationMode): When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in. -- [`ColumnExchangingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnExchangingAnimationMode): When a column is exchanged, you have the option to have the exchanged column header and its cells slide to the left, right, top, or bottom. There are also options to have it fade as well as slide and fade. -- [`ColumnHidingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnHidingAnimationMode): When a column is hidden, you have the option to have the column header and its cells slide out to the left, right, top, or bottom. There are also options to have it fade out as well as slide and fade out. -- [`ColumnMovingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnMovingAnimationMode): When a column is moved, you have the option to have the column header and its cells slide over. -- [`ColumnPropertyUpdatingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnPropertyUpdatingAnimationMode): When a column's property changes, you have the option to have that property change animate by interpolating or deeply interpolating its change. -- [`ColumnShowingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnShowingAnimationMode): When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in. - -## Code Snippet - -The following demonstrates the implementation of each of the column animations described in this topic: - -```razor - -``` - -## API References - -- [`ColumnAddingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnAddingAnimationMode) -- [`ColumnExchangingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnExchangingAnimationMode) -- [`ColumnHidingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnHidingAnimationMode) -- [`ColumnMovingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnMovingAnimationMode) -- [`ColumnPropertyUpdatingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnPropertyUpdatingAnimationMode) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-chooser.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-chooser.md deleted file mode 100644 index 988efcdd6..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-chooser.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: Blazor Data Grid | Column Chooser | Infragistics -_description: Learn how Infragistics' Ignite UI for Blazor grid component supports the ability to show and hide columns directly through the UI or by using the Blazor control. View Ignite UI for Blazor table demos for more information! -_keywords: Blazor Table, Data Grid, column chooser, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "DataGridColumn", "DataGridToolbar", "Button", "ColumnChooser", "ColumnHidingAnimationMode", "ColumnShowingAnimationMode", "ColumnChooserTitle"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Chooser -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Column Chooser Overview - -The Ignite UI for Blazor Data Grid supports the ability show and hide columns with the UI through the [`IgbDataGridToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html) component or by the [`ColumnChooser`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ColumnChooser) component that provides flexibility to place it anywhere on the page. The [`IsHidden`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridColumn.html#IgniteUI_Blazor_Controls_IgbDataGridColumn_IsHidden) property on the columns can also be used to quickly hide or show a single column programmatically for manual column generation, and the value of [`IsHidden`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridColumn.html#IgniteUI_Blazor_Controls_IgbDataGridColumn_IsHidden) will reflect in the [`ColumnChooser`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ColumnChooser) component. Each approach can be used interchangeably to change the visible state of the columns. - -## Blazor Grid Column Chooser Example - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- @if (Data != null) - { - - - - - 120")" /> - 120")" PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - 110")" PositivePrefix="$" ShowGroupingSeparator="true" MinFractionDigits="2" /> - 110")" /> - 150")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 150")" HorizontalAlignment="@CellContentHorizontalAlignment.Right" DateTimeFormat="@DateTimeFormats.DateShort" /> - 120")" PositiveSuffix="%" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - 120")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 110")" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - - } -
-
- -@code { - - private IgbDataGrid _grid; - public IgbDataGrid DataGridRef - { - get - { - return _grid; - } - set - { - _grid = value; - StateHasChanged(); - } - } - - private List Data; - - protected override void OnInitialized() - { - Data = SalesDataService.Create(100); - } -} -``` - - -
- -## Toolbar's Column Chooser UI - -The Column Chooser UI is accessible within the [`IgbDataGridToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html) component separate from the grid. For this purpose all we have to do is set the toolbar's [`ColumnChooser`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ColumnChooser) property to true. The toolbar will then display a [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html), when clicked, will display the column chooser UI. This button also displays the total of hidden columns. If the toolbar is not created, enabling the [`ColumnChooser`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ColumnChooser) property will have no effect and hide the button. - -The [`IgbDataGridToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html) provides additional properties such as adding a title to the toolbar by using the [`ToolbarTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ToolbarTitle) property, placing text in the [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html) by setting the [`ColumnChooserText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ColumnChooserText) property, and adding a title header to the column chooser UI by setting [`ColumnChooserTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ColumnChooserTitle). - -The Column Chooser can be configured with animations by setting the grid's [`ColumnHidingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnHidingAnimationMode) and [`ColumnShowingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnShowingAnimationMode) properties. - -## Code Snippet - -The following demonstrates how to implement the Column Chooser Toolbar UI for the Blazor Data Grid: - -```razor - - - - -@code { - private DataGrid grid; - public DataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } -} -``` - -## Simple Column Chooser - -Let's say we want to manually display the [`ColumnChooser`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ColumnChooser) UI without the toolbar and put it anywhere we want on our page. This can be easily done by simply creating an instance of the component in our markup. - -## Demo - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - - -
-
- -
- -
- @if (Data != null) - { - - - 120")" /> - 120")" PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - 110")" PositivePrefix="$" ShowGroupingSeparator="true" MinFractionDigits="2" /> - 110")" /> - 150")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 150")" HorizontalAlignment="@CellContentHorizontalAlignment.Right" DateTimeFormat="@DateTimeFormats.DateShort" /> - 120")" PositiveSuffix="%" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - 120")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 110")" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - - } -
-
- -@code { - - private IgbDataGrid _grid; - public IgbDataGrid DataGridRef - { - get - { - return _grid; - } - set - { - _grid = value; - StateHasChanged(); - } - } - - private List Data; - - protected override void OnInitialized() - { - Data = SalesDataService.Create(100); - } -} -``` - - -
- -## Code Snippet - -The following demonstrates how to implement the Column Chooser UI for the Data Grid: - -```razor - - - -@code { - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } -} -``` - -## API References - -- [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html) -- [`ColumnChooserText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ColumnChooserText) -- [`ColumnChooserTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ColumnChooserTitle) -- [`ColumnChooser`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ColumnChooser) -- [`ColumnHidingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnHidingAnimationMode) -- [`ColumnShowingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnShowingAnimationMode) -- [`IgbDataGridToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-filtering.md deleted file mode 100644 index 6b308634a..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-filtering.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: Blazor Data Grid | Filtering | Infragistics -_description: Use Infragistics' Ignite UI for Blazor grid component to perform expressive sort conditions and return data easily. View Ignite UI for Blazor table's demo for more information! -_keywords: Blazor Table, Data Grid, column, filtering, filter expressions, filter operands, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "FilterExpressions", "FilterLogicalOperator", "FilterOperand"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/filtering -_tocName: Column Filtering -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Filtering Overview - -The Ignite UI for Blazor Data Table / Data Grid includes column filtering with both a filter row and API that gives you the ability to perform expressive sort conditions based on the data type of the column being filtered. - -## Blazor Grid Filtering Example - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- @if (Data != null) - { -
- - 170")" /> - 170")" /> - 180")" /> - 120")" /> - 140")" /> - 120")" /> - 170")" /> - -
- } -
-
- -@code { - - private List Data; - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(100, false); - } -} -``` - - -
- -As seen above, setting the [`FilterUIType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_FilterUIType) property to FilterRow will enables the record filtering record to the user interface where the user can specify filter criteria to filter records. Records that do not match the specified filter criteria will be hidden. - -Filtering is also exposed in the column options UI by hovering a field and clicking the vertical ellipsis. This is achieved when setting the [`FilterUIType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_FilterUIType) to ColumnOptions. Please refer to the sample below. - -## Filter Expressions - -In the example below, the data grid's FilterExpressions collection is updated to incorporate custom [`FilterExpressions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_FilterExpressions). - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- Column: - - - - -
- -
- @if (Data != null) - { -
- - 170")" /> - 170")" /> - 180")" /> - 120")" /> - 140")" /> - 120")" /> - 170")" /> - -
- } -
-
- -@code { - - private List Data; - private IgbDataGrid DataGridRef; - - private string FilterText = ""; - private string FilterMode = "Contains"; - private string FilterColumn = "Name"; - - private FilterFactory FilterFactory = new FilterFactory(); - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(100, false); - } - - private void OnFilterTextChanged(ChangeEventArgs e) - { - this.FilterText = e.Value.ToString(); - this.ApplyFilter(); - } - - private void OnFilterModeChanged(ChangeEventArgs e) - { - this.FilterMode = e.Value.ToString(); - this.ApplyFilter(); - } - - private void OnFilterColumnChanged(ChangeEventArgs e) - { - this.FilterColumn = e.Value.ToString(); - this.ApplyFilter(); - } - - private void ApplyFilter() - { - this.DataGridRef.FilterExpressions.Clear(); - - if (this.FilterText == "") - { - return; - } - - string expression = this.FilterText.ToUpper(); - - IgbFilterExpression column = this.FilterFactory.Property(this.FilterColumn).ToUpper(); - - IgbFilterExpression filter = new IgbFilterExpression(); - - switch (this.FilterMode) - { - case "Contains": - { - filter = column.Contains(expression); - break; - } - case "StartsWith": - { - filter = column.StartsWith(expression); - break; - } - case "EndsWith": - { - filter = column.EndsWith(expression); - break; - } - } - - this.DataGridRef.FilterExpressions.Add(filter); - - StateHasChanged(); - } -} -``` - - -
- -## Filter Operators - -Columns can be given a custom [`IgbFilterOperand`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFilterOperand.html) that will appear in the filter-row operand dropdown. The key requirements is to ensure the operand is given a [`DisplayName`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFilterOperand.html#IgniteUI_Blazor_Controls_IgbFilterOperand_DisplayName) and to utilize the `FilterRequested` event on the operand so you can apply a [`FilterFactory`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.FilterFactory.html), which is responsible for assigning the operator and value you wish to the filter the column by, e.g. StartsWith with value of "A". - -In addition, the grid's [`FilterLogicalOperator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_FilterLogicalOperator) property is responsible for indicating how filters across fields are combined: - -- [`and`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.FilterFactory.html#IgniteUI_Blazor_Controls_FilterFactory_and) logical operator. In order for a successful match, all conditions have to pass. -- [`or`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.FilterFactory.html#IgniteUI_Blazor_Controls_FilterFactory_or) logical operator. In order for a successful match, at least one of the conditions have to pass. - -Since the operands are applied to the column they can be added in several ways, such as inline, in-code, or in a separate class. Each approach is demonstrated in the example below. - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
- -
- @if (Data != null) - { -
- - @*In code Filter Operand*@ - 170")"> - @*Scroll down to see OnAfterRender, OnFilter*@ - - - @*In class Filter Operand*@ - - - - - @*In-line Filter Operand*@ - 120")"> - - - - - -
- } -
-
- -@code { - - private List Data; - private IgbDataGrid DataGridRef; - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(100, false); - } - - protected override void OnAfterRender(bool firstRender) - { - if (this.DataGridRef != null && firstRender) - { - this.DataGridRef.EnsureReady().ContinueWith(new Action - ((e) => - { - this.DataGridRef.ActualColumns[0].FilterOperands.Add( - new IgbFilterOperand { - EditorType = EditorType.Text, - DisplayName = "(Custom) In Code Filter", - FilterRequested = OnFilter, - }); - })); - } - } - - private IgbFilterExpression OnFilter(IgbGridCustomFilterRequestedEventArgs args) - { - var prop = args.FilterFactory.Property(args.Column.Field); - //Filter-in only records with France - return prop.IsEqualTo("France"); - } -} -``` - - -
- -## API References - -- [`DisplayName`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFilterOperand.html#IgniteUI_Blazor_Controls_IgbFilterOperand_DisplayName) -- [`FilterExpressions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_FilterExpressions) -- [`FilterFactory`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.FilterFactory.html) -- [`FilterLogicalOperator`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_FilterLogicalOperator) -- [`IgbFilterOperand`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFilterOperand.html) -- `FilterRequested` -- [`FilterUIType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_FilterUIType) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-moving.md deleted file mode 100644 index 099d7fc55..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-moving.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Blazor Data Grid | Column Moving | Infragistics -_description: See how Infragistics' Ignite UI for Blazor Data Grid supports the ability to move columns and gives you the flexibility over how you wish to display your columns. View Ignite UI for Blazor table demos for more information! -_keywords: Blazor Table, Data Grid, column moving, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "ColumnMovingMode", "ColumnMovingAnimationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-moving -_tocName: Column Moving -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Column Moving Overview - -The Ignite UI for Blazor Data Grid supports the ability to move columns, giving you the flexibility over how you wish to display your columns with respect to the order of the columns shown. - -## Blazor Grid Column Moving Example - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- Column Moving Mode: - - Separator Width: - -
-
- Column Moving Animation: - -
- -
- @if (Data != null) - { -
- - 170")" /> - 150")"/> - 120")"/> - 120")"/> - 170")"/> - -
- } -
-
- -@code { - - private List Data; - - private ColumnMovingMode GridColumnMovingMode = ColumnMovingMode.Deferred; - private ColumnMovingAnimationMode GridColumnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; - private int GridColumnMovingSeparatorWidth = 1; - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(100, false); - } -} -``` - - -
- -Column moving in the Ignite UI for Blazor Data Grid is on by default, and can be controlled by setting the [`ColumnMovingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnMovingMode) property of the grid. This property has two options, `Deferred` or `None`. `Deferred` will allow column moving, while `None` will disable column moving for the entire grid. - -When column moving is set to `Deferred`, a separator will show up while moving a column. While moving a column, once the mouse pointer is released, the moved column will take the place of the column placed to the right of the separator. This separator can also be customized in width and color by using the [`ColumnMovingSeparatorWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnMovingSeparatorWidth) and [`ColumnMovingSeparatorBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnMovingSeparatorBackground) properties, respectively. - -You can also animate the column movements, if you wish. This can be done by setting the [`ColumnMovingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnMovingAnimationMode) property of the grid. Animations are not on by default. - -## Code Snippet - -The following demonstrates how to implement column moving in the Ignite UI for Blazor Data Grid with deferred column moving, animations enabled, and a 5px wide separator: - -```razor - -``` - -## API References - -- [`ColumnMovingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnMovingAnimationMode) -- [`ColumnMovingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnMovingMode) -- [`ColumnMovingSeparatorBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnMovingSeparatorBackground) -- [`ColumnMovingSeparatorWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnMovingSeparatorWidth) -- `Deferred` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-options.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-options.md deleted file mode 100644 index c429ffed4..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-options.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Blazor Data Grid | Column Options | Infragistics -_description: See how Infragistics' Ignite UI for Blazor Data Grid supports the ability to pin, move, filter, and sort columns individually through a drop down UI from each column header. Check out Ignite UI for Blazor table's column option! -_keywords: Blazor Table, Data Grid, column options, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "HeaderClickAction", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Options -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Column Options Overview - -The Ignite UI for Blazor Data Grid supports the ability to group, hide, sort, move, pin, filter, and sort columns directly from a UI exposed on each column header. - -To enable the column options ui you can set the grid's [`IsColumnOptionsEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_IsColumnOptionsEnabled) property to true. - -## Blazor Grid Column Options Example - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- @if (Data != null) - { -
- - - 120")" /> - 120")" PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - 110")" PositivePrefix="$" ShowGroupingSeparator="true" MinFractionDigits="2"/> - 110")" /> - 150")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 150")" HorizontalAlignment="@CellContentHorizontalAlignment.Right" DateTimeFormat="@DateTimeFormats.DateShort" /> - 120")" PositiveSuffix="%" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - 120")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 110")" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - -
- } -
-
- -@code { - - private List Data; - - protected override void OnInitialized() - { - this.Data = SalesDataService.Create(100); - } -} -``` - - -
- -## Column Options Configurations - -Filtering can be toggled per column by setting the column's [`IsFilteringEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridColumn.html#IgniteUI_Blazor_Controls_IgbDataGridColumn_IsFilteringEnabled) property. Setting true or false will show or hide the filtering section in the column's options ui. - -Sorting can be toggled for the entire grid if the [`HeaderClickAction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_HeaderClickAction) property is applied. Setting this to `None` for example will completely remove sorting from grid and reflect in the options ui for each column. And setting `SortByOneColumnOnly` for example will continue to allow one column to be sorted at a time. - -## Code Snippet - -The following code demonstrates how to programmatically enable the column options ui adjust filtering and sorting in the column options ui by adjusting the grid and column. - -```razor - - - -``` - -## API References - -- [`HeaderClickAction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_HeaderClickAction) -- [`IsColumnOptionsEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_IsColumnOptionsEnabled) -- [`IsFilteringEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridColumn.html#IgniteUI_Blazor_Controls_IgbDataGridColumn_IsFilteringEnabled) -- `SortByOneColumnOnly` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-pinning.md deleted file mode 100644 index b3ef74fc0..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-pinning.md +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: Blazor Data Grid | Column Pinning | Infragistics -_description: See how Infragistics' Ignite UI for Blazor grid component supports the ability to pin columns and gives you the flexibility over how you wish to position your columns. View Ignite UI for Blazor table demos for more information! -_keywords: Blazor Table, Data Grid, column pinning, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "PinnedPositions", "PinColumn", "ColumnPinning", "DataGridToolbar", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-pinning -_tocName: Column Pinning -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Column Pinning Overview - -The Ignite UI for Blazor Data Grid supports the ability to pin columns, allowing the end users to lock a column in a particular column order. - -A column or multiple columns can be pinned to the left-hand or right-hand side of the Data Grid. In addition, you can change the pin state of the columns by utilizing the [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_PinColumn) function. - -## Blazor Grid Column Pinning Example - -```razor -@using IgniteUI.Blazor.Controls - -
- -
- - - -
- -
- - @if (Data != null) - { -
- - 110")" /> - 190")" /> - 190")" /> - 170")" /> - 120")" /> - - 160")" /> - - 170")" /> - 170")" /> - 120")" /> - 120")" PositivePrefix="$" - ShowGroupingSeparator="true" - MaxFractionDigits="0" - MinFractionDigits="0" /> - -
- } - -
-
- -@code { - - private List Data; - public IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } - public Boolean IsPinningToLeftDisabled { get; set; } = false; - public Boolean IsPinningToRightDisabled { get; set; } = false; - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(200, false); - } - - private async Task OnPinLeft() - { - IsPinningToLeftDisabled = true; - IsPinningToRightDisabled = true; - - var idColumn = this.grid.ActualColumns[0]; - var firstNameColumn = this.grid.ActualColumns[1]; - var lastNameColumn = this.grid.ActualColumns[2]; - await this.grid.PinColumnAsync(idColumn, PinnedPositions.Left); - await this.grid.PinColumnAsync(firstNameColumn, PinnedPositions.Left); - await this.grid.PinColumnAsync(lastNameColumn, PinnedPositions.Left); - } - - private async Task OnPinRight() - { - IsPinningToLeftDisabled = true; - IsPinningToRightDisabled = true; - - var streetColumn = this.grid.ActualColumns[6]; - var cityColumn = this.grid.ActualColumns[7]; - var countryColumn = this.grid.ActualColumns[8]; - await this.grid.PinColumnAsync(streetColumn, PinnedPositions.Right); - await this.grid.PinColumnAsync(cityColumn, PinnedPositions.Right); - await this.grid.PinColumnAsync(countryColumn, PinnedPositions.Right); - } - - private async Task OnUnPin() - { - IsPinningToLeftDisabled = false; - IsPinningToRightDisabled = false; - - var idColumn = this.grid.ActualColumns[0]; - var firstNameColumn = this.grid.ActualColumns[1]; - var lastNameColumn = this.grid.ActualColumns[2]; - await this.grid.PinColumnAsync(idColumn, PinnedPositions.None); - await this.grid.PinColumnAsync(firstNameColumn, PinnedPositions.None); - await this.grid.PinColumnAsync(lastNameColumn, PinnedPositions.None); - - var streetColumn = this.grid.ActualColumns[6]; - var cityColumn = this.grid.ActualColumns[7]; - var countryColumn = this.grid.ActualColumns[8]; - await this.grid.PinColumnAsync(streetColumn, PinnedPositions.None); - await this.grid.PinColumnAsync(cityColumn, PinnedPositions.None); - await this.grid.PinColumnAsync(countryColumn, PinnedPositions.None); - } - -} -``` - - -
- -The Column Pinning API in the Data Grid can be enabled by setting either a column's [`Pinned`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridColumn.html#IgniteUI_Blazor_Controls_IgbDataGridColumn_Pinned) property, or when setting it by utilizing the [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_PinColumn) function of the grid. - -The [`Pinned`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridColumn.html#IgniteUI_Blazor_Controls_IgbDataGridColumn_Pinned) property has three options: - -- Left - enabling `Left` will position pinned columns to the left-hand side of the grid. -- Right - enabling `Right` will position pinned columns to the right side of the grid. -- None - enabling `None` will unpin a column and reposition its default placement within the grid. - -Unpinned columns that are adjacent to pinned columns will still maintain horizontal scrolling. - -The [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_PinColumn) function contains two required parameters. The first parameter is the column to be pinned, and the second is with the `PinnedPositions` enumeration setting. - -## Code Snippet - -The following code demonstrates how to implement column pinning in the Blazor Data Grid with column pinning by using the [`Pinned`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridColumn.html#IgniteUI_Blazor_Controls_IgbDataGridColumn_Pinned) property and [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_PinColumn) function: - -```razor - - - @*Columns Pinned Left*@ - - - - - @*Columns Unpinned*@ - - - - - @*Columns Pinned Right*@ - - - - -``` - -## Toolbar's Column Pinning UI - -The Column Pinning UI is accessible within the [`IgbDataGridToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html) component separate from the grid. For this purpose all we have to do is set the toolbar's `columnPinning` property to true. The toolbar will then display a [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html), when clicked, will display the column pinning UI. This button also displays the total of pinned-left columns. If the toolbar is not created, enabling the `columnPinning` property will have no effect and hide the button. - -The [`IgbDataGridToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html) provides additional properties such as adding a title to the toolbar by using the [`ToolbarTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html#IgniteUI_Blazor_Controls_IgbDataGridToolbar_ToolbarTitle) property, placing text in the [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html) by setting the `columnPinningText` property, and adding a title header to the column hiding UI by setting `columnPinningTitle`. - -## Demo - -```razor -@using IgniteUI.Blazor.Controls - -
- -
- - @if (Data != null) - { - - -
- - 110")" /> - 190")" /> - 190")" /> - 170")" /> - 120")" /> - - 160")"/> - - 170")"/> - 170")"/> - 120")"/> - 120")" PositivePrefix="$" - ShowGroupingSeparator="true" - MaxFractionDigits="0" - MinFractionDigits="0" /> - -
- } - -
-
- -@code { - - private List Data; - private IgbDataGrid grid; - public IgbDataGrid Grid - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } - - protected override void OnInitialized() - {; - - this.Data = EmployeeData.Create(200, false); - } -} -``` - - -## Code Snippet - -```razor - - - -@code { - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } -} -``` - -## API References - -- [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html) -- [`IgbDataGridToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridToolbar.html) -- [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_PinColumn) -- `PinnedPositions` -- [`Pinned`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridColumn.html#IgniteUI_Blazor_Controls_IgbDataGridColumn_Pinned) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-resizing.md deleted file mode 100644 index 1cd6d4b81..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-resizing.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Blazor Data Grid | Column Resizing | Infragistics -_description: Start using Infragistics' Blazor grid component to resize columns, giving you flexibility over how you wish to display your columns with respect to the width of each. View Ignite UI for Blazor table demos for more information! -_keywords: Blazor Table, Data Grid, column resizing, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "ColumnResizingMode", "ColumnResizingAnimationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-resizing -_tocName: Column Resizing -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Column Resizing - -The Ignite UI for Blazor Data Grid supports the ability to resize columns, giving you flexibility over how you wish to display your columns with respect to the width of each. - -## Blazor Grid Column Resizing Example - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- Resizing Mode: - - - Resizing Animation: - -
- -
- @if (Data != null) - { -
- - 170")" /> - 150")" /> - 120")" /> - 120")" /> - 170")" /> - -
- } -
-
- -@code { - - private List Data; - - private ColumnResizingAnimationMode GridResizingAnimationMode; - private ColumnResizingMode GridResizingMode; - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(100, false); - this.GridResizingAnimationMode = ColumnResizingAnimationMode.Interpolate; - this.GridResizingMode = ColumnResizingMode.Deferred; - } -} -``` - - -
- -Column resizing in the Ignite UI for Blazor DataGrid is on by default, and can be controlled by using the [`ColumnResizingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnResizingMode) property of the grid. This property has three options. Each option is explained below: - -- `Deferred`: The default option. When resizing, a separator will appear showing how large or small the column will become when resized. -- `Immediate`: When resizing, there will be no separator. The column's width will follow the pointer as you drag the edge of the column and resize accordingly. -- `None`: Columns cannot be resized. - -When column resizing is set to `Deferred`, the separator that shows up can be modified in color and width by using the [`ColumnResizingSeparatorBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnResizingSeparatorBackground) and [`ColumnResizingSeparatorWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnResizingSeparatorWidth) properties of the grid, respectively. - -You can also animate the columns as they resize when the resizing mode is set to `Deferred` only. This is done by setting the [`ColumnResizingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnResizingAnimationMode) property to `Interpolate`. - -Each column in the grid can be determined whether or not it can resize individually. If you want to enable or disable resizing on a particular column, you can set the IsResizingEnabled property of that column. - -When resizing a star-width column, it will change that column to a fixed column. - -## Code Snippet - -The following code snippet demonstrates how to implement column resizing in the Blazor data grid, where the Street column in this case will not be resizable. In this case, the column resizing separator will be 5 pixels wide and the columns that are resizable would animate when resized as well: - -```razor - - - - - - -``` - -## API References - -- [`ColumnResizingAnimationMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnResizingAnimationMode) -- [`ColumnResizingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnResizingMode) -- [`ColumnResizingSeparatorBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnResizingSeparatorBackground) -- [`ColumnResizingSeparatorWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_ColumnResizingSeparatorWidth) -- `Deferred` -- `Interpolate` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-sorting.md deleted file mode 100644 index 9b3811ba0..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-sorting.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Blazor Data Grid | Column Sorting | Infragistics -_description: Use Infragistics' Blazor grid component's sorting feature to configure a mix of sortable and non-sortable columns, with rich API and data sorting. View Ignite UI for Blazor tutorials! -_keywords: Blazor Table, Data Grid, column, sorting, row, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "HeaderClickAction"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/sorting -_tocName: Column Sorting -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Sorting Overview - -The Ignite UI for Blazor Data Table / Data Grid supports ascending and descending column sorting with a Single Column, Multi-Column and Tri-State Column Sorting configuration. - -## Blazor Grid Sorting Example - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- Header Click Action: - -
- -
- @if (Data != null) - { -
- - 110")" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - 150")" HeaderText="Property" /> - 160")" ContentOpacity="1" - HorizontalAlignment="@CellContentHorizontalAlignment.Center" PaddingTop="5" PaddingBottom="5" /> - 150")" /> - 130")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 110")" /> - -
- } -
-
- -@code { - - private List Data; - private HeaderClickAction GridHeaderClickAction; - - private IgbDataGrid grid; - private IgbDataGrid DataGridRef - { - get { return grid; } - set { grid = value; OnGridRefChanged(); StateHasChanged(); } - } - - protected override void OnInitialized() - { - this.Data = RealEstateData.Create(100); - this.GridHeaderClickAction = HeaderClickAction.SortByMultipleColumnsTriState; - } - - private void OnGridRefChanged() - { - if (this.DataGridRef != null) - { - this.DataGridRef.SortDescriptions.Add(new IgbColumnSortDescription() - { - Field = "Property", - SortDirection = ListSortDirection.Descending - }); - } - } -} -``` - - -
- -## Code Snippet - -You can sort by a single or multiple column ascending or descending in the Blazor data grid by using the [`HeaderClickAction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_HeaderClickAction) property. If TriState is enabled you can remove the sort applied to a column. - -- `SortByMultipleColumns` -- `SortByMultipleColumnsTriState` -- `SortByOneColumnOnly` -- `SortByOneColumnOnlyTriState` - -```razor - -``` - -## Sorting through API - -```razor -@code { - // Using the ref property above: - private IgbDataGrid grid; - private IgbDataGrid DataGridRef - { - get { return grid; } - set - { - grid = value; - OnGridRefChanged(); - StateHasChanged(); - } - } - - private void OnGridRefChanged() - { - if (this.DataGridRef != null) - { - this.DataGridRef.SortDescriptions.Add(new ColumnSortDescription() - { - Field = "Property", - SortDirection = ListSortDirection.Descending - }); - } - } -} -``` - -## API References - -- [`HeaderClickAction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_HeaderClickAction) -- `SortByMultipleColumnsTriState` -- `SortByMultipleColumns` -- `SortByOneColumnOnlyTriState` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-summaries.md deleted file mode 100644 index 6fa9dd9e1..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-summaries.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Blazor Data Grid | Column Summaries | Infragistics -_description: Use Infragistics' Blazor grid component's column summaries feature to display summarized data such as count, max, min and many more. Check out Ignite UI for Blazor table demos! -_keywords: Blazor Table, Data Grid, column, summaries, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Implementation.Grid", "SummaryScope", "GroupSummaryDisplayMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/summaries -_tocName: Column Summaries -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Column Summaries - -The Ignite UI for Blazor Data Table / Data Grid supports column summaries. In some cases, your end users may be overwhelmed by the amount of data displayed in the grid, and often may be looking for a summary of the data. Your end users may also want to derive additional information from the data of a specific column. Summaries help your end users achieve this, and you can enable them by setting the `SummaryScope` property. - -## Blazor Column Summaries Example - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- Summary Scope: - - Group Summary Display Mode: - -
-
- @if (Data != null) - { -
- - 120")" HeaderText="ID" HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - 130")" HeaderText="Product" /> - 120")" ShowGroupingSeparator="true" HeaderText="Price" /> - 140")" HeaderText="Orders" /> - 160")" ShowGroupingSeparator="true" HeaderText="Order Totals" PositivePrefix="$" /> - 150")" HeaderText="Order Date" HorizontalAlignment="@CellContentHorizontalAlignment.Right" /> - 140")" ShowGroupingSeparator="true" HeaderText="Profit" PositivePrefix="$" /> - 170")" HeaderText="Ship Country" /> - -
- } -
-
- -@code { - - private List Data; - private SummaryScope GridSummaryScope; - private GroupSummaryDisplayMode GridGroupSummaryDisplayMode; - - private IgbDataGrid _grid; - private IgbDataGrid DataGridRef - { - get { return _grid; } - set - { - _grid = value; - this.OnDataGridRef(); - StateHasChanged(); - } - } - - protected override void OnInitialized() - { - this.Data = SalesDataService.Create(50); - - this.GridSummaryScope = SummaryScope.Root; - this.GridGroupSummaryDisplayMode = GroupSummaryDisplayMode.RowBottom; - } - - private void OnDataGridRef() - { - var productGroup = new IgbColumnGroupDescription() - { - Field = "ProductName", - DisplayName = "ProductName" - }; - - var productCount = new IgbColumnSummaryDescription() - { - Field = "ProductName", - Operand = DataSourceSummaryOperand.Count - }; - - var priceMin = new IgbColumnSummaryDescription() - { - Field = "BundlePrice", - Operand = DataSourceSummaryOperand.Min - }; - - var priceMax = new IgbColumnSummaryDescription() - { - Field = "BundlePrice", - Operand = DataSourceSummaryOperand.Max - }; - - var orderSum = new IgbColumnSummaryDescription() - { - Field = "OrderItems", - Operand = DataSourceSummaryOperand.Sum - }; - - var orderValueSum = new IgbColumnSummaryDescription() - { - Field = "OrderValue", - Operand = DataSourceSummaryOperand.Sum - }; - - var orderValueAvg = new IgbColumnSummaryDescription() - { - Field = "OrderValue", - Operand = DataSourceSummaryOperand.Average - }; - - var orderDateMin = new IgbColumnSummaryDescription() - { - Field = "OrderDate", - Operand = DataSourceSummaryOperand.Min, - CalculatorDisplayName = "First" - }; - - var orderDateMax = new IgbColumnSummaryDescription() - { - Field = "OrderDate", - Operand = DataSourceSummaryOperand.Max, - CalculatorDisplayName = "Last" - }; - - var sum1 = new IgbColumnSummaryDescription() - { - Field = "Profit", - Operand = DataSourceSummaryOperand.Sum - }; - - var avg2 = new IgbColumnSummaryDescription() - { - Field = "Profit", - Operand = DataSourceSummaryOperand.Average - }; - - //var countryCustomSummary = new IgbColumnSummaryDescription() - //{ - // Field = "Country", - // Operand = DataSourceSummaryOperand.Custom, - // //ProvideCalculatorScript = "onProvideCalculator" // <= This seems like what needs to be done, but how do you specify the logic that the calculator uses? - //}; - - //TODO CUSTOM SUMMARY - - this.DataGridRef.GroupDescriptions.Add(productGroup); - - this.DataGridRef.SummaryDescriptions.Add(productCount); - this.DataGridRef.SummaryDescriptions.Add(priceMin); - this.DataGridRef.SummaryDescriptions.Add(priceMax); - this.DataGridRef.SummaryDescriptions.Add(orderSum); - this.DataGridRef.SummaryDescriptions.Add(orderValueSum); - this.DataGridRef.SummaryDescriptions.Add(orderValueAvg); - this.DataGridRef.SummaryDescriptions.Add(orderDateMin); - this.DataGridRef.SummaryDescriptions.Add(orderDateMax); - this.DataGridRef.SummaryDescriptions.Add(sum1); - this.DataGridRef.SummaryDescriptions.Add(avg2); - //this.DataGridRef.SummaryDescriptions.Add(countryCustomSummary); - } -} -``` - - -
- -## Summary Scope Property - -The Blazor data grid supports 4 summary settings that you can configure using the `SummaryScope` property. These are listed and described below: - -- `Root`: This will display a grand total for all rows in the grid for the column the summary is applied to. -- `Groups`: This is specific to grouped rows and shows the grand total for all rows in a particular group. -- `Both`: This will use the `Groups` and `Root` options simultaneously. -- `None`: This will disable summaries for the grid. - -## Group Summary Display Mode Property - -The Blazor data grid supports configuration of the locations that summaries are displayed. You can configure this by using the `GroupSummaryDisplayMode` property. The different options for this property are listed and described below: - -- **List**: This will render the group summaries in a flat list in the spanning group header. -- **Cells**: This will render the group header as cells, and the summary values will be rendered inside the cells, aligned with their corresponding column. The grid will only display a single summary per column using this option. -- **RowTop**: This will render the group summaries as summary rows at the top of the group. -- **RowBottom**: This will render the group summaries as summary rows at the bottom of the group. -- **None**: This will disable group summary rendering. - -## Code Snippets - -```razor - - - - - - - - -@code { - private IgbDataGrid grid; - private IgbDataGrid DataGridRef - { - get { return grid; } - set - { - grid = value; - this.OnDataGridRef(); - StateHasChanged(); - } - } - - private void OnDataGridRef() - { - var productCount = new ColumnSummaryDescription() { Field = "ProductName", Operand = SummaryOperand.Count }; - var priceMin = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Min }; - var priceMax = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Max }; - var orderSum = new ColumnSummaryDescription() { Field = "OrderItems", Operand = SummaryOperand.Sum }; - var orderValueAvg = new ColumnSummaryDescription() { Field = "OrderValue", Operand = SummaryOperand.Average }; - - this.DataGridRef.SummaryDescriptions.Add(productCount); - this.DataGridRef.SummaryDescriptions.Add(priceMin); - this.DataGridRef.SummaryDescriptions.Add(priceMax); - this.DataGridRef.SummaryDescriptions.Add(orderSum); - this.DataGridRef.SummaryDescriptions.Add(orderValueAvg); - } -} -``` - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) -- [`GroupSummaryDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_GroupSummaryDisplayMode) -- [`SummaryScope`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_SummaryScope) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-types.md deleted file mode 100644 index 0c8489ea5..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-column-types.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Blazor Data Grid | Column Types | Infragistics -_description: Learn how Infragistics' Ignite UI for Blazor data table & grid supports four column types to display your content such as Image, Text, Numeric, DataTime or a Template Column. View Ignite UI for Blazor tutorials! -_keywords: Blazor Table, Data Grid, column types, Ignite UI for Blazor, Infragistics -mentionedTypes: [ "Grid","CellInfo", "TemplateCellInfo", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-types -_tocName: Column Types -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Column Types - -The Ignite UI for Blazor Data Table / Data Grid supports 5 column types, plus a Template Column type, giving you complete flexibility over the way your data is displayed in the Blazor data grid. Column types supported are Text column, Numeric column, DateTime column, Image column, ComboBox and Template. - -Each column binds to data by setting the [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridColumn.html#IgniteUI_Blazor_Controls_IgbDataGridColumn_Field) property to the name of the corresponding property on the items of your underlying data source bound to the Blazor data grid. - -## Blazor Column Types Example - -```razor -@using System.ComponentModel -@using IgniteUI.Blazor.Controls - - -
- -
- - @if (Employees != null && CountryNames != null) - { -
- - - - - 130")" Field="Name" /> - - @*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@ - 160")" Field="Sales" CellUpdatingScript="onUpdatingSalesColumn" - HorizontalAlignment="@CellContentHorizontalAlignment.Center" - /> - - 130")" Field="Salary" PositivePrefix="$" - ShowGroupingSeparator="true" - MaxFractionDigits="0" - MinFractionDigits="0" /> - - 140")" Field="Birthday" HeaderText="Date of Birth" /> - - 120")" Field="Country" DataSource="CountryNames" /> - 110")" Field="CountryFlag" HeaderText="Flag" - PaddingTop="5" PaddingBottom="5" PaddingRight="10" - HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" /> - - @*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@ - 170")" Field="Address" CellUpdatingScript="onUpdatingAddressColumn" /> - 130")" Field="Phone" CellUpdatingScript="onUpdatingPhoneColumn" /> - - 120")" Field="Income" /> - - - -
- } - - -
-
- -@code { - - protected List Employees; - protected List CountryNames; - - private IgbDataGrid _grid; - private IgbDataGrid DataGridRef - { - get { return _grid; } - set { _grid = value; } - } - - protected override void OnInitialized() - { - this.Employees = EmployeeData.Create(50, false); - for (int i = 0; i < this.Employees.Count; i++) - { - this.Employees[i].PropertyChanged += OnPropertyChanged; - } - - this.CountryNames = new List { - new Country { Name = "Canada" }, - new Country { Name = "France" }, - new Country { Name = "Poland" }, - new Country { Name = "UK" }, - new Country { Name = "USA" } - }; - } - - protected void OnPropertyChanged(object item, PropertyChangedEventArgs args) - { - var employee = item as Employee; - - if (this._grid != null && employee != null) - this._grid.NotifyUpdateItem(this.Employees, employee.Index, employee); - } - - public class Country - { - public string Name { get; set; } - } - -} -``` - - -
- -## Text Column - -The Blazor data grid is used for displaying formatted text in its associated cells. This is the default column type used to display data of the string type. - -## Numeric Column - -The [`IgbNumericColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericColumn.html) is used for displaying a formatted numeric value in its associated cells and enables control of decimal place placement within cells and displaying fractional digits. - -## DateTime Column - -The [`IgbDateTimeColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateTimeColumn.html) is used for displaying Date objects in its associated cells and enables control to format the Date objects how you see fit. - -## Image Column - -The [`IgbImageColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbImageColumn.html) is used for displaying an image within a cell and exposes options for image stretch customization for cells by using its [`ImageStretchOption`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbImageColumn.html#IgniteUI_Blazor_Controls_IgbImageColumn_ImageStretchOption) option. - -You can also choose what type of resource your image is by setting the `ImageResourceType` option. - -## ComboBox Column - -The [`IgbComboBoxColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbComboBoxColumn.html) is used for displaying a drop-down list from which your end users can select a single item. - -Data binding can be achieved using an array of complex objects via the column's `DataSource` property. - -The [`TextField`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbComboBoxColumn.html#IgniteUI_Blazor_Controls_IgbComboBoxColumn_TextField) property determines which value is shown when users make a selection. - -The [`ValueField`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbComboBoxColumn.html#IgniteUI_Blazor_Controls_IgbComboBoxColumn_ValueField) property determines the bound value of the underlying data item selected. This is necessary if your list of objects have several properties. - -## Template Column - -The [`IgbTemplateColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTemplateColumn.html) is used in conjunction with a cell template. It enables you to apply a custom template to the column's cell. This is done by handling the `CellUpdating` event of the template column. - -The `CellUpdating` event's arguments expose the [`IgbTemplateColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTemplateColumn.html) that fires the event as well as a [`IgbTemplateCellUpdatingEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTemplateCellUpdatingEventArgs.html) parameter. This event arguments parameter exposes a `Content` property that returns the HTMLDivElement that will be placed within the associated cells of the column. You can then append new elements to this div. - -The [`IgbTemplateCellUpdatingEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTemplateCellUpdatingEventArgs.html) also exposes a `CellInfo` property that you can use to get a `TemplateCellInfo` object. This object exposes information about the cell and the row, such as the index, underlying data item, and appearance of the cell. - -## Sparkline Column - -You can embed Sparkline components in [`IgbTemplateColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTemplateColumn.html) to show more complex data structures. -Refer to the [Column Sparkline](type-sparkline-table.md) topic for information on how to do this. - -## Code Snippet - -The following demonstrates the implementation of each of the columns described in this topic: - -The following is a sample data source to use with the above columns. - -```razor - - - - - - - - - - -// In JS file: -function onUpdatingAddressColumn(grid, args) { - let content = args.content; - let info = args.cellInfo; - let item = info.rowItem; - let span1 = null; - let span2 = null; - - if (content.childElementCount === 0) { - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - content.style.verticalAlign = "center"; - content.style.lineHeight = "normal"; - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.justifyContent = "center"; - content.style.height = "100%"; - content.style.width = "100%"; - content.style.color = "rgb(24, 29, 31)"; - // stacking above elements in the content of grid's cell - span1 = document.createElement("span"); - span2 = document.createElement("span"); - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0]; - span2 = content.children[1]; - } - - if (span1 && span2) { - // updating elements in the content of grid's cell - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } -} - -igRegisterScript("onUpdatingAddressColumn", onUpdatingAddressColumn, false); -``` - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) -- `CellInfo` -- `CellUpdating` -- [`IgbComboBoxColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbComboBoxColumn.html) -- `Content` -- `DataSource` -- [`IgbDateTimeColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateTimeColumn.html) -- [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGridColumn.html#IgniteUI_Blazor_Controls_IgbDataGridColumn_Field) -- [`IgbImageColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbImageColumn.html) -- `ImageResourceType` -- [`ImageStretchOption`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbImageColumn.html#IgniteUI_Blazor_Controls_IgbImageColumn_ImageStretchOption) -- [`IgbNumericColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericColumn.html) -- `TemplateCellInfo` -- [`IgbTemplateCellUpdatingEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTemplateCellUpdatingEventArgs.html) -- [`IgbTemplateColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTemplateColumn.html) -- `TextField` -- `ValueField` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-horizontal-scrolling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-horizontal-scrolling.md deleted file mode 100644 index f1a40d817..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-horizontal-scrolling.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Blazor Data Grid | Horizontal Scrolling | Infragistics -_description: Use Infragistics' Blazor grid component's horizontal scrolling feature to scroll seamlessly through the columns. Check out Ignite UI for Blazor table demos! -_keywords: Blazor Table, Data Grid, column, horizontal, scrolling, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Horizontal Scrolling -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Horizontal Scrolling - -The Ignite UI for Blazor Data Table / Data Grid supports Horizontal Scrolling is enabled by setting the total width of the columns greater than the width of the Blazor data grid. - -## Blazor Horizontal Scrolling Example - -```razor -@using IgniteUI.Blazor.Controls - -
- -
- - @if (Data != null) - { -
- - 110")" /> - 190")" /> - 190")" /> - 170")" /> - 120")" /> - - 160")" /> - - 170")" /> - 170")" /> - 120")" /> - 120")" PositivePrefix="$" - ShowGroupingSeparator="true" - MaxFractionDigits="0" - MinFractionDigits="0" /> - -
- } - -
-
- -@code { - - private List Data; - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(200, false); - - } - -} -``` - - -
- -## Setting Default Column Width - -```razor - -``` - -## Setting Individual Column Widths - -```razor - - - - - - - - - - -``` - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-live-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-live-data.md deleted file mode 100644 index 2ee284a21..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-live-data.md +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Blazor Data Grid | Data Animation | Data Binding | Infragistics -_description: Use Infragistics' Blazor table to handle thousands of updates per seconds while remaining responsive. View Ignite UI for Blazor table demos! -_keywords: Blazor Table, Data Grid, live data updates, Ignite UI for Blazor, Infragistics, data binding -mentionedTypes: ["Implementation.Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Live Data -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Binding Live Data - -The Ignite UI for Blazor Data Table / Data Grid is able to handle thousands of updates per seconds, while keeping the grid responsive for any interaction that the user may undertake. You can use the following sample to check performance of the Grid handling under various live data scenarios by adjusting interval between data updates as well as volume of data updates. - -## Blazor Binding Live Data Example - -```razor -@using Infragistics.Samples.Shared.Components -@using IgniteUI.Blazor.Controls - -
- -
-
- @liveSomePricesText - @liveAllPricesText -
- -
- Grouping - Heat -
-
- -
- - @if (Data != null) - { -
- - - 140")" Field="ID" IsHidden="true" /> - 120")" Field="Category" /> - 110")" Field="Type" /> - 110")" Field="Risk" /> - - 120")" Field="Open" HeaderText="Open" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" /> - 120")" Field="Price" - CellStyleKeyRequestedScript="onPriceStyleKey" - CellUpdatingScript="onPriceCellUpdating" - DataBoundScript="onPriceDataBound" - HeaderText="Close" /> - 120")" Field="Change" HeaderText="Change ($)" MinFractionDigits="2" MaxFractionDigits="2" /> - 180")" Field="ChangePercent" HeaderText="Change (%)" NegativeSuffix="%" PositiveSuffix="%" MinFractionDigits="2" MaxFractionDigits="2" /> - - 120")" Field="Contract" /> - 130")" Field="Settlement" /> - 130")" Field="Region" /> - 120")" Field="Country" /> - - 110")" Field="Buy" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" /> - 110")" Field="Sell" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" /> - 130")" Field="Spread" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" /> - 130")" Field="Volume" ShowGroupingSeparator="true" MinFractionDigits="0" MaxFractionDigits="0" /> - 130")" Field="DailyHigh" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" /> - 130")" Field="DailyLow" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" /> - 130")" Field="YearlyHigh" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" /> - 130")" Field="YearlyLow" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" /> - 130")" Field="YearlyStart" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" /> - - 140")" Field="Maturity" HorizontalAlignment="@CellContentHorizontalAlignment.Right" /> - 120")" Field="Currency" /> - 130")" Field="Sector" /> - 130")" Field="Security" /> - 170")" Field="Issuer" /> - - -
- } - - -
-
- -@code { - - public List Data; - - public DateTime lastUpdateTime = new DateTime(); - public int frequency = 1000; // 15 - public int DataVolume = 500; - public bool isTimerTicking = false; - public bool isUpdatingAllPrices = false; - public bool isUpdatingSomePrices = false; - - public string liveSomePricesBackground = "#5E28E9"; - public string liveAllPricesBackground = "#EF2B76"; - - public string liveAllPricesText = "Live All Prices"; - public string liveSomePricesText = "Live Prices"; - - public bool liveSomePricesDisabled = false; - public bool liveAllPricesDisabled = false; - - public bool canvasChecked = false; - public bool chartOpen = false; - public bool UseRowGrouping = true; - public bool UseHeatBackground = true; - public string[] hiddenColumns; - public string[] allColumns; - - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get { return grid; } - set { grid = value; StateHasChanged(); this.onGridGroupingAdd(); } - } - - protected override void OnInitialized() - { - this.Data = PortfolioData.Create(this.DataVolume); - } - - private void onLiveAllPricesClicked(object sender) - { - if (this.liveAllPricesDisabled) return; - - this.isUpdatingAllPrices = !this.isUpdatingAllPrices; - this.isUpdatingSomePrices = false; - - if (this.isTimerTicking) - { - this.isTimerTicking = false; - this.liveAllPricesText = "Live All Prices"; - this.liveAllPricesDisabled = false; - this.liveSomePricesDisabled = false; - } - else - { - this.startTicking(); - this.liveAllPricesText = "Stop All Prices"; - this.liveAllPricesDisabled = false; - this.liveSomePricesDisabled = true; - } - - this.liveSomePricesBackground = liveSomePricesDisabled ? "gray" : "#5E28E9"; - this.liveAllPricesBackground = liveAllPricesDisabled ? "gray" : "#EF2B76"; - } - - private void onLiveSomePricesClicked(object sender) - { - if (this.liveSomePricesDisabled) return; - - this.isUpdatingAllPrices = false; - this.isUpdatingSomePrices = !this.isUpdatingSomePrices; - - if (this.isTimerTicking) - { - this.isTimerTicking = false; - this.liveSomePricesText = "Live Prices"; - this.liveSomePricesDisabled = false; - this.liveAllPricesDisabled = false; - } - else - { - this.startTicking(); - this.liveSomePricesText = "Stop Prices"; - this.liveSomePricesDisabled = false; - this.liveAllPricesDisabled = true; - } - - this.liveSomePricesBackground = liveSomePricesDisabled ? "gray" : "#5E28E9"; - this.liveAllPricesBackground = liveAllPricesDisabled ? "gray" : "#EF2B76"; - } - - public void stopTicking() - { - if (this.isTimerTicking) - { - this.isTimerTicking = false; - } - } - - public void startTicking() - { - if (!this.isTimerTicking) - { - this.isTimerTicking = true; - //Task.Delay(16).ContinueWith((t) => onTimerTick()); - Task.Delay(this.frequency).ContinueWith((t) => onTimerTick()); - } - } - - public static Random random = new Random(); - public void onTimerTick() - { - if (!this.isTimerTicking) - { - return; - } - if (this.grid == null) - { - //Task.Delay(16).ContinueWith((t) => onTimerTick()); - Task.Delay(this.frequency).ContinueWith((t) => onTimerTick()); - return; - } - - var stillAnimating = false; - - var useClear = this.isUpdatingAllPrices; - var updateAll = this.isUpdatingAllPrices; - - var toChangeIndexes = new List(); - foreach (var item in this.Data) - { - toChangeIndexes.Add(false); - if (!this.UseHeatBackground) - { - item.PriceHeat = 0; - } - else if (item.PriceHeat != 0) - { - stillAnimating = true; - } - } - - var toChange = (int)Math.Round(this.DataVolume / 10.0); - if (updateAll) - { - toChange = this.Data.Count; - } - else - { - toChange = (int)(random.Next(2, this.Data.Count - 1)); - } - - var sortingByPrice = false; - for (var i = 0; i < this.grid.SortDescriptions.Count; i++) - { - if (this.grid.SortDescriptions[i].Field == "Price" || - this.grid.SortDescriptions[i].Field.Contains("Change")) - { - sortingByPrice = true; - } - } - - var changing = false; - var toChangeCount = 0; - - var now = DateTime.Now; - var elapsedTime = now.Subtract(this.lastUpdateTime); - var elapsedInterval = elapsedTime.TotalMilliseconds > this.frequency; - if (elapsedInterval) - { - this.lastUpdateTime = DateTime.Now; - for (var i = 0; i < toChange; i++) - { - var index = (int)(random.Next(0, this.Data.Count - 1)); - //while (toChangeIndexes[index] != true) - //{ - // index = (int)Math.Round(random.NextDouble() * this.Data.Count - 1); - //} - - toChangeIndexes[index] = true; - toChangeCount++; - changing = true; - - } - } - - for (var i = 0; i < this.Data.Count; i++) - { - var item = this.Data[i]; - if (toChangeIndexes[i] == true) - { - if (sortingByPrice && !useClear) - { - this.grid.NotifyRemoveItem(this.Data, i, item); - PortfolioData.RandomizeDataValues(item); - this.grid.NotifyInsertItem(this.Data, i, item); - } - else - { - PortfolioData.RandomizeDataValues(item); - this.grid.NotifyUpdateItem(this.Data, i, item, true); - } - - if (this.UseHeatBackground) - { - if (item.Change > 0) - { - item.PriceHeat = 1; - } - else - { - item.PriceHeat = -1; - } - } - } - else - { - if (this.UseHeatBackground) - { - if (item.PriceHeat > 0) - { - item.PriceHeat -= .06; - if (item.PriceHeat < 0) - { - item.PriceHeat = 0; - } - } - if (item.PriceHeat < 0) - { - item.PriceHeat += .06; - if (item.PriceHeat > 0) - { - item.PriceHeat = 0; - } - } - } - } - } - - if (sortingByPrice && useClear && elapsedInterval) - { - this.grid.NotifyClearItems(Data); - } - else if (useClear) - { - this.grid.NotifyClearItems(Data); - } - - if (!sortingByPrice || !elapsedInterval) - { - this.grid.InvalidateVisibleRows(); - } - // } - // this.grid.invalidateVisibleRows(); - - if (elapsedInterval && this.chartOpen) - { - //this.updatePricesByCountry(); - //this.chart.NotifyClearItems(this.pricesByCountry); - } - - Task.Delay(this.frequency).ContinueWith((t) => onTimerTick()); - } - - private void onToggleHeat(bool isCheched) - { - this.UseHeatBackground = isCheched; - this.grid.Flush(); - } - - private void onToggleGrouping(bool isCheched) - { - this.UseRowGrouping = isCheched; - if (this.UseRowGrouping) - this.onGridGroupingAdd(); - else - this.onGridGroupingRemove(); - } - - private void onGridGroupingRemove() - { - this.grid.GroupDescriptions.Clear(); - this.grid.Flush(); - } - - private void onGridGroupingAdd() - { - var g = new IgbColumnGroupDescription(); - g.Field = "Category"; - g.SortDirection = ListSortDirection.Descending; - this.grid.GroupDescriptions.Add(g); - - g = new IgbColumnGroupDescription(); - g.Field = "Type"; - g.SortDirection = ListSortDirection.Descending; - this.grid.GroupDescriptions.Add(g); - - g = new IgbColumnGroupDescription(); - g.Field = "Contract"; - g.SortDirection = ListSortDirection.Descending; - this.grid.GroupDescriptions.Add(g); - } -} - - -@* - - Checkbox *@ -``` - - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-load-save-layout.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-load-save-layout.md deleted file mode 100644 index 1179eb3ac..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-load-save-layout.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Blazor Data Grid | Real-Time Data Grid and Tables | Load & Save | Infragistics -_description: Use Infragistics' Ignite UI for Blazor Data Table & Grid which supports loading and saving the layout the user makes. -_keywords: Blazor Table, Data Grid, cell activation, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Load & Save Grid Layout -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Load & Save Layout - -The Ignite UI for Blazor Data Table / Data Grid supports loading and saving the grid layout. This is performed by calling the [`LoadLayout`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_LoadLayout) and [`SaveLayout`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_SaveLayout) methods of the grid. These features are useful when an end user can move, sort, and group columns, and wants to preserve the state of the grid and be able to recover the layout and resume work at a later time. - -## Blazor Grid Load & Save Layout Example - -```razor -@using Microsoft.AspNetCore.Components -@using Microsoft.AspNetCore.Components.Rendering -@using Microsoft.AspNetCore.Components.Forms -@using Microsoft.AspNetCore.Components.RenderTree -@using Microsoft.AspNetCore.Components.Web - -@using IgniteUI.Blazor.Controls - - -
- -
-
- - - -
- - @if (Employees != null) - { - - - -
- - - 120")" Field="Photo" PaddingTop="5" PaddingBottom="5" PaddingRight="10" - HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" /> - - 130")" Field="Name" /> - - @*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@ - 160")" Field="Sales" CellUpdatingScript="onUpdatingSalesColumn" - HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - - 130")" Field="Salary" PositivePrefix="$" - ShowGroupingSeparator="true" - MaxFractionDigits="0" - MinFractionDigits="0" /> - - - 140")" Field="Birthday" HeaderText="Date of Birth" /> - - 110")" Field="CountryFlag" HeaderText="Country" PaddingTop="5" PaddingBottom="5" PaddingRight="10" - HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" /> - - @*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@ - 170")" Field="Address" CellUpdatingScript="onUpdatingAddressColumn" /> - 130")" Field="Phone" CellUpdatingScript="onUpdatingPhoneColumn" /> - - 120")" Field="Income" /> - 120")" Field="Email" IsEditable="false" /> - - -
- } - - -
-
- -@code { - - private List Employees; - public string savedLayout; - private IgbDataGrid _grid; - private IgbDataGrid DataGridRef - { - get { return _grid; } - set { _grid = value; this.OnDataGridRef(); StateHasChanged(); } - } - - protected override void OnInitialized() - { - this.Employees = EmployeeData.Create(100, false); - } - - private void OnDataGridRef() - { - var peopleGroup = new IgbColumnGroupDescription() { Field = "Country", DisplayName = "Country" }; - var incomeGroup = new IgbColumnGroupDescription() { Field = "Income", DisplayName = "Income" }; - this._grid.GroupDescriptions.Add(peopleGroup); - this._grid.GroupDescriptions.Add(incomeGroup); - - var ageSummary = new IgbColumnSummaryDescription() { Field = "Age", Operand = DataSourceSummaryOperand.Average }; - var peopleSummary = new IgbColumnSummaryDescription() { Field = "Photo", Operand = DataSourceSummaryOperand.Count }; - var salarySummary = new IgbColumnSummaryDescription() { Field = "Salary", Operand = DataSourceSummaryOperand.Sum }; - var saleSummary = new IgbColumnSummaryDescription() { Field = "Sales", Operand = DataSourceSummaryOperand.Max }; - - this._grid.SummaryDescriptions.Add(ageSummary); - this._grid.SummaryDescriptions.Add(peopleSummary); - this._grid.SummaryDescriptions.Add(salarySummary); - this._grid.SummaryDescriptions.Add(saleSummary); - - // TODO fix onSummarziePeopleGender - //var nameSummary = new IgbColumnSummaryDescription() { Field = "Name", Operand = DataSourceSummaryOperand.Custom, - // ProvideCalculatorScript = "onSummarziePeopleGender" }; - //this._grid.SummaryDescriptions.Add(nameSummary); - } - - - private void OnLoadLayoutClick(MouseEventArgs e) - { - this.DataGridRef.LoadLayout(this.savedLayout); - } - - private void OnSaveLayoutClick(MouseEventArgs e) - { - this.DataGridRef.SaveLayout(); - this.savedLayout = this.DataGridRef.SaveLayout(); - } -} -``` - - -
- -## Supported Features - -The grid supports saving the following features: - -- [Column Visibility](column-chooser.md) -- [Column Pinning](column-pinning.md) -- [Column Moving](column-moving.md) -- [Column Resizing](column-resizing.md) -- [Column Sorting](column-sorting.md) -- [Column Filtering](column-filtering.md) -- [Row Grouping](row-grouping.md) - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) -- [`LoadLayout`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_LoadLayout) -- [`SaveLayout`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_SaveLayout) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-local-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-local-data.md deleted file mode 100644 index 7a1a0da41..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-local-data.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: Blazor Data Grid | Binding Local Data | Infragistics -_description: Use Infragistics' Blazor grid control to bind to an array of data. Learn how Ignite UI for Blazor table can help you better display your data! -_keywords: Blazor Table, Data Grid, binding to data, Ignite UI for Blazor, Infragistics, data binding -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Local Data -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Binding Local Data - -The following sample demonstrates the Ignite UI for Blazor Data Table / Data Grid data binding to an array of data. - -## Blazor Binding Local Data Example - -```razor -@using IgniteUI.Blazor.Controls - -
-
- - @if (Data != null) - { -
- - 110")" HeaderText="ID" HorizontalAlignment="CellContentHorizontalAlignment.Center" /> - 120")" /> - 130")" /> - 110")" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" /> - 140")" PositivePrefix="" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" /> - 160")" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" /> - 150")" DateTimeFormat="DateTimeFormats.DateShort" /> - 140")" PositivePrefix="$" /> - 140")" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" /> - 140")" /> - -
- } -
-
- -@code { - - private List Data; - - private Random Rand = new Random(); - - public IgbDataGrid GridRef { get; set; } - - protected override void OnInitialized() - { - string[] names = new string[] { - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" }; - - string[] countries = new string[] { - "United-States", "United-Kingdom", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain", }; - string[] status = new string[] { "Packing", "Shipped", "Delivered" }; - - var sales = new List(); - - for (var i = 0; i < 200; i++) - { - var price = GetRandomNumber(10000, 90000) / 100; - var items = GetRandomNumber(4, 30); - var value = Math.Round(price * items); - var margin = GetRandomNumber(2, 5); - var profit = Math.Round((price * margin / 100) * items); - var country = GetRandomItem(countries); - - var item = new SaleInfo() - { - Country = country, - CountryFlag = GetCountryFlag(country), - Margin = margin, - OrderDate = GetRandomDate(), - OrderItems = items, - OrderValue = value, - ProductID = 1001 + i, - ProductName = GetRandomItem(names), - ProductPrice = price, - Profit = Math.Round(profit), - Status = GetRandomItem(status) - }; - sales.Add(item); - } - - this.Data = sales; - } - - public double GetRandomNumber(double min, double max) - { - return Math.Round(min + (Rand.NextDouble() * (max - min))); - } - - public string GetRandomItem(string[] array) - { - var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1)); - return array[index]; - } - - public DateTime GetRandomDate() - { - var today = new DateTime(); - var year = today.Year; - var month = this.GetRandomNumber(1, 9); - var day = this.GetRandomNumber(10, 27); - return new DateTime(year, (int)month, (int)day); - } - - public string GetCountryFlag(string country) - { - var flag = "https://dl.infragistics.com/x/img/flags/" + country + ".png"; - return flag; - } - - public class SaleInfo - { - public string Status { get; set; } - public string ProductName { get; set; } - public string CountryFlag { get; set; } - public string Country { get; set; } - public DateTime OrderDate { get; set; } - public double Profit { get; set; } - public double ProductPrice { get; set; } - public double ProductID { get; set; } - public double OrderValue { get; set; } - public double OrderItems { get; set; } - public double Margin { get; set; } - } -} -``` - - -## Code Snippet - -```razor - - - - - - - - - - - - - -@code { - - private List DataSource; - private Random Rand = new Random(); - - protected override void OnInitialized() - { - base.OnInitialized(); - - GenerateData(); - } - - public void GenerateData() - { - string[] names = new string[] { - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" }; - - string[] countries = new string[] { - "USA", "UK", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain", }; - string[] status = new string[] { "Packing", "Shipped", "Delivered" }; - - var sales = new List(); - - for (var i = 0; i < 200; i++) - { - var price = GetRandomNumber(10000, 90000) / 100; - var items = GetRandomNumber(4, 30); - var value = Math.Round(price * items); - var margin = GetRandomNumber(2, 5); - var profit = Math.Round((price * margin / 100) * items); - var country = GetRandomItem(countries); - - var item = new SaleInfo() - { - Country = country, - CountryFlag = GetCountryFlag(country), - Margin = margin, - OrderDate = GetRandomDate(), - OrderItems = items, - OrderValue = value, - ProductID = 1001 + i, - ProductName = GetRandomItem(names), - ProductPrice = price, - Profit = Math.Round(profit), - Status = GetRandomItem(status) - }; - sales.Add(item); - } - - this.DataSource = sales; - } - - public double GetRandomNumber(double min, double max) - { - return Math.Round(min + (Rand.NextDouble() * (max - min))); - } - - public string GetRandomItem(string[] array) - { - var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1)); - return array[index]; - } - - public DateTime GetRandomDate() { - var today = new DateTime(); - var year = today.Year; - var month = this.GetRandomNumber(1, 9); - var day = this.GetRandomNumber(10, 27); - return new DateTime(year, (int)month, (int)day); - } - - public string GetCountryFlag(string country) - { - var flag = "https://static.infragistics.com/xplatform/images/flags/" + country + ".png"; - return flag; - } - - public class SaleInfo - { - public string Status { get; set; } - public string ProductName { get; set; } - public string CountryFlag { get; set; } - public string Country { get; set; } - public DateTime OrderDate { get; set; } - public double Profit { get; set; } - public double ProductPrice { get; set; } - public double ProductID { get; set; } - public double OrderValue { get; set; } - public double OrderItems { get; set; } - public double Margin { get; set; } - } -} -``` - - - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-localization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-localization.md deleted file mode 100644 index 7feecf50f..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-localization.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: Blazor Data Grid | Real-Time Data Grid and Tables | Localization | Infragistics -_description: Use Infragistics' Ignite UI for Blazor Data Table & Grid which supports localization. View Ignite UI for Blazor table tutorials! -_keywords: Blazor Table, Data Grid, cell accessibility, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Localization -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Localization - -The Ignite UI for Blazor Data Table / Data Grid supports localizing the resource strings specific to the column options pop-up and summaries. Note, this is not intended to be used nor capable of translating the data. - -The Data Grid contains `SetCustomizedStringAsync` for assigning strings associated with the column options. The grid's `ActualDataSource` property also has this method for assigning resource strings necessary for the summaries. - -## Blazor Grid Localization Example - -```razor -@using Microsoft.AspNetCore.Components -@using Microsoft.AspNetCore.Components.Rendering -@using Microsoft.AspNetCore.Components.Forms -@using Microsoft.AspNetCore.Components.RenderTree -@using Microsoft.AspNetCore.Components.Web -@inject HttpClient Http; - -@using IgniteUI.Blazor.Controls - - -
- @if (Employees != null) - { -
- - - 120")" Field="Photo" HeaderText="写真" PaddingTop="5" PaddingBottom="5" PaddingRight="10" - HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" /> - - 130")" Field="Name" HeaderText="名前" /> - - 130")" Field="Sales" - HorizontalAlignment="@CellContentHorizontalAlignment.Center" HeaderText="売上高" /> - - 130")" Field="Salary" PositivePrefix="$" - ShowGroupingSeparator="true" - MaxFractionDigits="0" - MinFractionDigits="0" - HeaderText="給料"/> - - - 140")" Field="Birthday" HeaderText="生年月日" /> - - 110")" Field="CountryFlag" HeaderText="国旗" PaddingTop="5" PaddingBottom="5" PaddingRight="10" - HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" /> - - 170")" Field="Address" HeaderText="住所"/> - 130")" Field="Phone" HeaderText="電話"/> - - 120")" Field="Income" HeaderText="所得"/> - - -
- } -
- -@code { - - private List Employees; - private String GridStrings; - private IgbDataGrid _grid; - private IgbDataGrid DataGridRef - { - get { return _grid; } - set { _grid = value; Task.Delay(1).ContinueWith((t) => this.OnDataGridRef()); StateHasChanged(); } - } - - protected override void OnInitialized() - { - this.Employees = EmployeeDataJA.Create(100, false); - } - - private async Task OnDataGridRef() - { - var countryGroup = new IgbColumnGroupDescription() { Field = "Country", DisplayName = "国" }; - var incomeGroup = new IgbColumnGroupDescription() { Field = "Income", DisplayName = "所得" }; - this._grid.GroupDescriptions.Add(countryGroup); - this._grid.GroupDescriptions.Add(incomeGroup); - - var ageSummary = new IgbColumnSummaryDescription() { Field = "Age", Operand = DataSourceSummaryOperand.Average }; - var photoSummary = new IgbColumnSummaryDescription() { Field = "Photo", Operand = DataSourceSummaryOperand.Count }; - var salarySummary = new IgbColumnSummaryDescription() { Field = "Salary", Operand = DataSourceSummaryOperand.Sum }; - var saleSummary = new IgbColumnSummaryDescription() { Field = "Sales", Operand = DataSourceSummaryOperand.Max }; - - this._grid.SummaryDescriptions.Add(ageSummary); - this._grid.SummaryDescriptions.Add(photoSummary); - this._grid.SummaryDescriptions.Add(salarySummary); - this._grid.SummaryDescriptions.Add(saleSummary); - - //Specific resource strings for Column-Options - await DataGridRef.SetCustomizedStringAsync("en", DataGridResourceStrings()); - //Specific resource strings for Summaries - await DataGridRef.ActualDataSource.SetCustomizedStringAsync("en", DataGridResourceStrings()); - await DataGridRef.InvalidateVisibleRowsAsync(); - } - - public string DataGridResourceStrings() - { - GridStrings = - "{\"Apply\":\"適用\"," + - "\"Cancel\":\"キャンセル\"," + - "\"Clear_Column_Filter\":\"列フィルターをクリア\"," + - "\"Column_Move\":\"移動\"," + - "\"Column_Move_Left\":\"左\"," + - "\"Column_Move_Right\":\"右\"," + - "\"Column_Options_Summaries\":\"集計\"," + - "\"Column_Options_Summary_Average\":\"平均\"," + - "\"Column_Options_Summary_Count\":\"カウント\"," + - "\"Column_Options_Summary_Maximum\":\"最大値\"," + - "\"Column_Options_Summary_Minimum\":\"最小値\"," + - "\"Column_Options_Summary_Sum\":\"合計値\"," + - "\"Column_Pin\":\"ピン固定\"," + - "\"Column_Pin_Left\":\"左\"," + - "\"Column_Pin_Right\":\"右\"," + - "\"Column_Sort\":\"ソート\"," + - "\"Column_Sort_Ascending\":\"昇順\"," + - "\"Column_Sort_Descending\":\"降順\"," + - "\"ComparisonOperator_Bottom\":\"下\"," + - "\"ComparisonOperator_BottomPercentile\":\"下位の百分位数\"," + - "\"ComparisonOperator_Contains\":\"～を含む\"," + - "\"ComparisonOperator_DoesNotContain\":\"～を含まない\"," + - "\"ComparisonOperator_DoesNotEndWith\":\"～で終わらない\"," + - "\"ComparisonOperator_DoesNotMatch\":\"～と一致しない\"," + - "\"ComparisonOperator_DoesNotStartWith\":\"～で始まらない\"," + - "\"ComparisonOperator_Empty\":\"空\"," + - "\"ComparisonOperator_EndsWith\":\"次の値で終わる\"," + - "\"ComparisonOperator_Equals\":\"等しい\"," + - "\"ComparisonOperator_False\":\"False\"," + - "\"ComparisonOperator_GreaterThan\":\"次の値より大きい\"," + - "\"ComparisonOperator_GreaterThanOrEqualTo\":\"次の値より大きいまたは等しい\"," + - "\"ComparisonOperator_LastMonth\":\"先月\"," + - "\"ComparisonOperator_LastQuater\":\"前四半期\"," + - "\"ComparisonOperator_LastWeek\":\"先週\"," + - "\"ComparisonOperator_LastYear\":\"昨年\"," + - "\"ComparisonOperator_LessThan\":\"次の値より小さい\"," + - "\"ComparisonOperator_LessThanOrEqualTo\":\"次の値より小さいまたは等しい\"," + - "\"ComparisonOperator_NextMonth\":\"翌月\"," + - "\"ComparisonOperator_NextQuater\":\"翌四半期\"," + - "\"ComparisonOperator_NextWeek\":\"来週\"," + - "\"ComparisonOperator_NextYear\":\"翌年\"," + - "\"ComparisonOperator_NotEmpty\":\"空ではない\"," + - "\"ComparisonOperator_NotEquals\":\"次の値に等しくない\"," + - "\"ComparisonOperator_StartsWith\":\"～で始まる\"," + - "\"ComparisonOperator_ThisMonth\":\"今月\"," + - "\"ComparisonOperator_ThisQuarter\":\"本四半期\"," + - "\"ComparisonOperator_ThisWeek\":\"今週\"," + - "\"ComparisonOperator_ThisYear\":\"今年\"," + - "\"ComparisonOperator_Today\":\"今日\"," + - "\"ComparisonOperator_Tomorrow\":\"明日\"," + - "\"ComparisonOperator_Top\":\"上\"," + - "\"ComparisonOperator_TopPercentile\":\"上位の百分位数\"," + - "\"ComparisonOperator_True\":\"True\"," + - "\"ComparisonOperator_Yesterday\":\"昨日\"," + - "\"Filter_Columns_List\":\"列リストのフィルター...\"," + - "\"Search\":\"検索\"," + - "\"Select_All\":\"(すべて選択)\"," + - "\"DataSource_Summary_Avg\":\"平均\"," + - "\"DataSource_Summary_Count\":\"カウント\"," + - "\"DataSource_Summary_Max\":\"最大値\"," + - "\"DataSource_Summary_Min\":\"最小値\"," + - "\"DataSource_Summary_Sum\":\"合計値\"}"; - return GridStrings; - } -} -``` - - -
- -## Resource Strings - -This is the full list of strings to localize the grid. - -### Column Option Strings - -- Apply -- Cancel -- Clear_Column_Filter -- Column_Move -- Column_Move_Left -- Column_Move_Right -- Column_Pin -- Column_Pin_Left -- Column_Pin_Right -- Column_Sort -- Column_Sort_Ascending -- Column_Sort_Descending -- Filter_Columns_List -- Search -- Select_All -- ComparisonOperator_Bottom -- ComparisonOperator_BottomPercentile -- ComparisonOperator_Contains -- ComparisonOperator_DoesNotContain -- ComparisonOperator_DoesNotEndWith -- ComparisonOperator_DoesNotMatch -- ComparisonOperator_DoesNotStartWith -- ComparisonOperator_Empty -- ComparisonOperator_EndsWith -- ComparisonOperator_Equals -- ComparisonOperator_False -- ComparisonOperator_GreaterThan -- ComparisonOperator_GreaterThanOrEqualTo -- ComparisonOperator_LastMonth -- ComparisonOperator_LastQuarter -- ComparisonOperator_LastWeek -- ComparisonOperator_LastYear -- ComparisonOperator_LessThan -- ComparisonOperator_LessThanOrEqualTo -- ComparisonOperator_NextMonth -- ComparisonOperator_NextQuarter -- ComparisonOperator_NextWeek -- ComparisonOperator_NextYear -- ComparisonOperator_NotEmpty -- ComparisonOperator_NotEquals -- ComparisonOperator_StartsWith -- ComparisonOperator_ThisMonth -- ComparisonOperator_ThisQuarter -- ComparisonOperator_ThisWeek -- ComparisonOperator_ThisYear -- ComparisonOperator_Today -- ComparisonOperator_Tomorrow -- ComparisonOperator_Top -- ComparisonOperator_TopPercentile -- ComparisonOperator_True -- ComparisonOperator_Yesterday -- Column_Options_Summary_Average -- Column_Options_Summary_Count -- Column_Options_Summary_Maximum -- Column_Options_Summary_Minimum -- Column_Options_Summary_Sum -- Column_Options_Summaries - -### Summary Strings - -- DataSource_Summary_Avg -- DataSource_Summary_Count -- DataSource_Summary_Max -- DataSource_Summary_Min -- DataSource_Summary_Sum - -## API References - -- `ActualDataSource` -- `SetCustomizedStringAsync` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-overview.md deleted file mode 100644 index f8b92964f..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-overview.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: Blazor Data Grid Component | Real-Time Blazor Tables | Infragistics -_description: Infragistics' Blazor grid component helps you create a fast, real-time react data grid. Learn how Ignite UI for Blazor can help you better display your data! -_keywords: Blazor Table, Data Grid, overview, Ignite UI for Blazor, data binding, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Table / Grid ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md), and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Data Grid Overview - -The Ignite UI for Blazor Data Table / Data Grid is a tabular Blazor grid component that allows you to quickly bind and display your data with little coding or configuration. Features of the Blazor data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The Blazor tables are optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns. - -## Blazor Data Grid Example - -This demo implements some of the features that are available in the Grid: -Filtering, Grouping, Pin/Unpin columns, Reposition columns, Sorting, and Summaries - -```razor -@using Microsoft.AspNetCore.Components -@using Microsoft.AspNetCore.Components.Rendering -@using Microsoft.AspNetCore.Components.Forms -@using Microsoft.AspNetCore.Components.RenderTree -@using Microsoft.AspNetCore.Components.Web - -@using IgniteUI.Blazor.Controls - - -
- -
- - @if (Employees != null) - { - - -
- - - 120")" Field="Photo" PaddingTop="5" PaddingBottom="5" PaddingRight="10" - HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" /> - - 130")" Field="Name" /> - - @*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@ - 160")" Field="Sales" CellUpdatingScript="onUpdatingSalesColumn" - HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - - 130")" Field="Salary" PositivePrefix="$" - ShowGroupingSeparator="true" - MaxFractionDigits="0" - MinFractionDigits="0" /> - - - 140")" Field="Birthday" HeaderText="Date of Birth" /> - - 110")" Field="CountryFlag" HeaderText="Country" PaddingTop="5" PaddingBottom="5" PaddingRight="10" - HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" /> - - @*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@ - 170")" Field="Address" CellUpdatingScript="onUpdatingAddressColumn" /> - 130")" Field="Phone" CellUpdatingScript="onUpdatingPhoneColumn" /> - - 120")" Field="Income" /> - 120")" Field="Email" IsEditable="false" /> - - -
- } - - -
-
- -@code { - - private List Employees; - - private IgbDataGrid _grid; - private IgbDataGrid DataGridRef - { - get { return _grid; } - set { _grid = value; this.OnDataGridRef(); StateHasChanged(); } - } - - protected override void OnInitialized() - { - this.Employees = EmployeeData.Create(100, false); - } - - private void OnDataGridRef() - { - var peopleGroup = new IgbColumnGroupDescription() { Field = "Country", DisplayName = "Country" }; - var incomeGroup = new IgbColumnGroupDescription() { Field = "Income", DisplayName = "Income" }; - this._grid.GroupDescriptions.Add(peopleGroup); - this._grid.GroupDescriptions.Add(incomeGroup); - - var ageSummary = new IgbColumnSummaryDescription() { Field = "Age", Operand = DataSourceSummaryOperand.Average }; - var peopleSummary = new IgbColumnSummaryDescription() { Field = "Photo", Operand = DataSourceSummaryOperand.Count }; - var salarySummary = new IgbColumnSummaryDescription() { Field = "Salary", Operand = DataSourceSummaryOperand.Sum }; - var saleSummary = new IgbColumnSummaryDescription() { Field = "Sales", Operand = DataSourceSummaryOperand.Max }; - - this._grid.SummaryDescriptions.Add(ageSummary); - this._grid.SummaryDescriptions.Add(peopleSummary); - this._grid.SummaryDescriptions.Add(salarySummary); - this._grid.SummaryDescriptions.Add(saleSummary); - - // TODO fix onSummarziePeopleGender - //var nameSummary = new IgbColumnSummaryDescription() { Field = "Name", Operand = DataSourceSummaryOperand.Custom, - // ProvideCalculatorScript = "onSummarziePeopleGender" }; - //this._grid.SummaryDescriptions.Add(nameSummary); - } - -} -``` - - -
- -## Getting Started - -### Dependencies - -Please refer to these topics on adding the IgniteUI.Blazor package. - -- [Getting Started](../../general-getting-started.md) -- [Adding Nuget Package](../../general-nuget-feed.md) - -Afterwards, you may start implementing the control by adding the following namespaces: - -```razor -@using IgniteUI.Blazor.Controls -``` - -### Component Modules - -The [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) requires the following modules: - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule)); -``` - -
- -### Optional Modules - -The optional [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) features, seen above, requires the following modules: - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor( - typeof(IgbDataGridModule), - typeof(IgbDataGridToolbarModule), - typeof(IgbSparklineModule) -); -``` - -
- -### Sample Data Source - -Now that the Blazor data grid module is imported, next is the basic configuration of the Blazor grid that binds to local data. - -```razor -@code { - - public List DataSource { get; set;} - Random Rand = new Random(); - - protected override void OnInitialized() - { - GenerateData(); - } - - public void GenerateData() - { - string[] names = new string[] { - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" }; - - string[] countries = new string[] { - "USA", "UK", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain", }; - string[] status = new string[] { "Packing", "Shipped", "Delivered" }; - - var sales = new List(); - - for (var i = 0; i < 200; i++) - { - var price = GetRandomNumber(10000, 90000) / 100; - var items = GetRandomNumber(4, 30); - var value = Math.Round(price * items); - var margin = GetRandomNumber(2, 5); - var profit = Math.Round((price * margin / 100) * items); - var country = GetRandomItem(countries); - - var item = new SaleInfo() - { - Country = country, - CountryFlag = GetCountryFlag(country), - Margin = margin, - OrderDate = GetRandomDate(), - OrderItems = items, - OrderValue = value, - ProductID = 1001 + i, - ProductName = GetRandomItem(names), - ProductPrice = price, - Profit = Math.Round(profit), - Status = GetRandomItem(status) - }; - sales.Add(item); - } - - this.DataSource = sales; - } - - public double GetRandomNumber(double min, double max) - { - return Math.Round(min + (Rand.NextDouble() * (max - min))); - } - - public string GetRandomItem(string[] array) - { - var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1)); - return array[index]; - } - - public DateTime GetRandomDate() { - var today = new DateTime(); - var year = today.Year; - var month = this.GetRandomNumber(1, 9); - var day = this.GetRandomNumber(10, 27); - return new DateTime(year, (int)month, (int)day); - } - - public string GetCountryFlag(string country) - { - var flag = "https://static.infragistics.com/xplatform/images/flags/" + country + ".png"; - return flag; - } - - public class SaleInfo - { - public string? Status { get; set; } - public string? ProductName { get; set; } - public string? CountryFlag { get; set; } - public string? Country { get; set; } - public DateTime OrderDate { get; set; } - public double Profit { get; set; } - public double ProductPrice { get; set; } - public double ProductID { get; set; } - public double OrderValue { get; set; } - public double OrderItems { get; set; } - public double Margin { get; set; } - } -} -``` - -### Auto-Generate Columns - -The following code demonstrates how to bind the Blazor data grid to the above local data. - -```razor - -``` - -### Manually Define Columns - -```razor - - - - - - - -``` - -### Styling Columns - -The following code demonstrates how to style specific columns using the provided column's properties. - -```razor - -``` - -### Tutorial Video - -Learn more about creating a Blazor data grid in our short tutorial video: - -## Additional Resources - -- [Accessibility Compliance](accessibility.md) -- [Cell Activation](cell-activation.md) -- [Grid Editing](cell-editing.md) -- [Cell Selection](cell-selection.md) -- [Column Animation](column-animation.md) -- [Column Chooser](column-chooser.md) -- [Column Filtering](column-filtering.md) -- [Column Moving](column-moving.md) -- [Column Options](column-options.md) -- [Column Resizing](column-resizing.md) -- [Column Sorting](column-sorting.md) -- [Column Types](column-types.md) -- [Performance](performance.md) -- [Row Pinning](row-pinning.md) -- [Row Grouping](row-grouping.md) -- [Row Highlighting](row-highlighting.md) - - - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-performance.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-performance.md deleted file mode 100644 index 4decf5e80..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-performance.md +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: Blazor Data Grid | Performance | Infragistics -_description: Use the Infragistics' Blazor table for high performance data scenarios. Scroll through an unlimited number of rows and columns with full virtualization. View Ignite UI for Blazor table tutorials! -_keywords: Blazor Table, Data Grid, performance, Ignite UI for Blazor, Infragistics, data binding -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: High Performance -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor High Performance with Live Data - -The Ignite UI for Blazor Data Table / Data Grid is optimized for high-performance with live data scenarios. With fast load time, smooth scrolling with zero lag time or screen flicker, you can seamlessly scroll through an unlimited number of rows and columns in your Blazor data grid application with full virtualization of grid's columns and rows. - -## Blazor High Performance with Live Data Example - -This sample demonstrates this performance by binding thousands of financial records to the Blazor data grid, grouping them by 1 column (eg. Territory), and live-updating multiple columns every couple of milliseconds. You can change various options in real-time and the Data Grid performance with no lag, screen flicker, or visual delay - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- @if (Data != null) - { -
- - 130")" /> - 130")" /> - 130")" /> - 130")" - PositivePrefix="$" ShowGroupingSeparator="true" /> - 120")" HorizontalAlignment="@CellContentHorizontalAlignment.Right" - CellUpdatingScript="onAvgSaleCellUpdating" /> - 120")" HorizontalAlignment="@CellContentHorizontalAlignment.Right" - CellUpdatingScript="onChangeCellUpdating"/> - 140")" HorizontalAlignment="@CellContentHorizontalAlignment.Right" - HeaderText="Change (%)" CellUpdatingScript="onPercentChangeCellUpdating"/> - 120")" /> - - @for (int i = 0; i < 8; i++) - { - string str = "KPI_" + i.ToString(); - 150")" Field="@str" DataBoundScript="onKPIColumnDataBound"/> - } - -
- } -
-
- -@code { - - private void OnSortDescriptionsChanged(IgbGridSortDescriptionsChangedEventArgs args) - { - - } - - private List Data; - - private IgbDataGrid _grid; - private IgbDataGrid DataGridRef - { - get { return _grid; } - set - { - _grid = value; - this.OnDataGridRef(); - StateHasChanged(); - } - } - - private DateTime lastDataUpdate = new DateTime(); - private int interval = 1000; - private Random random = new Random(); - - protected override void OnInitialized() - { - this.Data = SalesPersonData.GenerateSalesPeople(500); - } - - private void OnDataGridRef() - { - var columnGroup = new IgbColumnGroupDescription(); - columnGroup.Field = "Territory"; - this.DataGridRef.GroupDescriptions.Add(columnGroup); - - Task.Delay(1000).ContinueWith((t) => OnTimerTick()); - } - - private void OnTimerTick() - { - bool sortedBySales = false; - - int toChange = (int)Math.Round(this.Data.Count / 10.0); - var toChangeIndexes = new List(); - bool stillAnimating = false; - - for (int i = 0; i < this.Data.Count; i++) - { - toChangeIndexes.Add(false); - SalesPerson item = this.Data[i]; - if (item.AvgSaleHeat != 0) - { - stillAnimating = true; - } - } - - var now = DateTime.Now; - bool intervalElapsed = false; - - if ((now - lastDataUpdate).TotalMilliseconds > this.interval) - { - intervalElapsed = true; - } - - bool useClear = false; - bool sortingByAvgSale = false; - - for (int i = 0; i < this.DataGridRef.SortDescriptions.Count; i++) - { - if (this.DataGridRef.SortDescriptions[i].Field == "AvgSale" || this.DataGridRef.SortDescriptions[i].Field.IndexOf("Change") >= 0) - { - sortingByAvgSale = true; - } - } - - bool changing = false; - if (intervalElapsed) - { - this.lastDataUpdate = new DateTime(); - for (int i = 0; i < toChange; i++) - { - int index = (int)Math.Round(random.NextDouble() * (this.Data.Count - 1)); - toChangeIndexes[index] = true; - - } - } - - for (int i = 0; i < toChangeIndexes.Count; i++) - { - var item = this.Data[i]; - if (toChangeIndexes[i] == true) - { - if (sortingByAvgSale && !useClear) - { - this.DataGridRef.NotifyRemoveItem(this.Data, i, item); - this.RandomizeItem(item); - this.DataGridRef.NotifyInsertItem(this.Data, i, item); - } - else - { - this.RandomizeItem(item); - this.DataGridRef.NotifyUpdateItem(this.Data, i, item, true); - } - - if (item.Change > 0) - { - item.AvgSaleHeat = 1; - } - else - { - item.AvgSaleHeat = -1; - } - } - else - { - if (item.AvgSaleHeat > 0) - { - item.AvgSaleHeat -= .06; - if (item.AvgSaleHeat < 0) - { - item.AvgSaleHeat = 0; - } - } - if (item.AvgSaleHeat < 0) - { - item.AvgSaleHeat += .06; - if (item.AvgSaleHeat > 0) - { - item.AvgSaleHeat = 0; - } - } - } - } - - //if(sortingByAvgSale && useClear) - //{ - // this.DataGridRef.ActualDataSource.QueueAutoRefresh(); - //} - - if (!sortingByAvgSale || !intervalElapsed) - { - this.DataGridRef.InvalidateVisibleRows(); - } - - Task.Delay(1000).ContinueWith((t) => OnTimerTick()); - } - - private void RandomizeItem(SalesPerson item) - { - item.Change = (random.NextDouble() * 40.0) - 20.0; - double prevSale = item.AvgSale; - item.AvgSale += item.Change; - item.PercentChange = ((item.AvgSale / prevSale) * 100.00); - } -} -``` - - -
- -## Additional Resources - -- [Column Types](column-types.md) -- [Row Grouping](row-grouping.md) - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-grouping.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-grouping.md deleted file mode 100644 index d323cab4f..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-grouping.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Blazor Data Grid | Row Grouping | Infragistics -_description: Use Infragistics' Blazor grid component's Group Row feature to group rows into a sticky header Row Group. This is an easy way to visually group data based on your criteria. Check out Ignite UI for Blazor table demos! -_keywords: Blazor Table, Data Grid, row grouping, groupby area, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/groupby -_tocName: Row Grouping -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Row Grouping - -The Ignite UI for Blazor Data Table / Data Grid lets you group rows into a ‘sticky header’ Row Group. This is similar to the Group By feature in Microsoft Outlook, which is an easy way to visually group data based on your own criteria. - -## Blazor Row Group-By Area Example - -```razor -@using IgniteUI.Blazor.Controls - -
- -
- - @if (Data != null) - { -
- - 120")" /> - 110")" /> - 160")"/> - 160")" - PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="CellContentHorizontalAlignment.Center"/> - - 130")" - PositivePrefix="$" ShowGroupingSeparator="true"/> - - - -
- } -
-
- -@code { - - private List Data; - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(200, false); - } - -} -``` - - -
- -## Group-By Area - -Set `IsGroupByAreaVisible` property on the DataGrid to True, as shown in the example above, to the user interface. The group-by area allows users more options to group and sort columns without interact when interacting the DataGrid indirectly. Groups can be positioned and reordered based on the users needs. This area also populates when columns are programmatically added as [`GroupDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_GroupDescriptions) on the DataGrid as well. - -## Using Group Descriptions Example - -```razor -@using IgniteUI.Blazor.Controls - -
- -
-
- Group Header Display Mode: - - -
- - @if (Data != null) - { -
- - 120")" /> - 110")" /> - 160")"/> - 160")" - PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="CellContentHorizontalAlignment.Center"/> - - 130")" - PositivePrefix="$" ShowGroupingSeparator="true"/> - - - -
- } - -
-
- -@code { - - private List Data; - private IgbDataGrid grid; - private GroupHeaderDisplayMode GroupHeaderClickAction { get; set; } = GroupHeaderDisplayMode.Combined; - - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - OnGridCreated(); - - StateHasChanged(); - } - } - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(200, false); - } - - private void OnGridCreated() - { - var country = new IgbColumnGroupDescription() { Field = "Country", DisplayName = "Location" }; - var city = new IgbColumnGroupDescription() { Field = "City", DisplayName = "City" }; - var income = new IgbColumnGroupDescription() { Field = "Income", DisplayName = "Income" }; - - grid.GroupDescriptions.Add(country); - grid.GroupDescriptions.Add(city); - grid.GroupDescriptions.Add(income); - } - -} -``` - - -
- -## Hierarchical Groups - -The [`GroupHeaderDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_GroupHeaderDisplayMode) property allows the groups to be hierarchical. By default, each group description that is added gets aggregated together. Setting the [`GroupHeaderDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_GroupHeaderDisplayMode) to `Split` will create a section header for ever group defined in [`GroupDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_GroupDescriptions) property of the [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html). - -```razor - -``` - -## Collapsible Groups - -Also, the [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) can display a toggle on each group section to allow the end user to expand or collapse the grouped data via the [`IsGroupCollapsable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_IsGroupCollapsable) property. - -```razor - -``` - -## Summary - -For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. - -```razor - - -@code { - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - OnGridCreated(); - StateHasChanged(); - } - } - - private void OnGridCreated() - { - var state = new ColumnGroupDescription { Field = "Country", DisplayName = "Location" }; - var city = new ColumnGroupDescription { Field = "City", DisplayName = "City" }; - var income = new ColumnGroupDescription { Field = "Income", DisplayName = "Income" }; - - this.DataGridRef.GroupDescriptions.Add(state); - this.DataGridRef.GroupDescriptions.Add(city); - this.DataGridRef.GroupDescriptions.Add(income); - } -} -``` - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) -- [`GroupDescriptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_GroupDescriptions) -- [`GroupHeaderDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_GroupHeaderDisplayMode) -- `IsGroupByAreaVisible` -- [`IsGroupCollapsable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_IsGroupCollapsable) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-highlighting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-highlighting.md deleted file mode 100644 index 28a4fd637..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-highlighting.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Blazor Data Grid | Row Highlighting | Infragistics -_description: Configuring the row highlight of the Infragistics' Blazor data grid on mouse over. Learn how to configure row highlight for the Ignite UI for Blazor table. -_keywords: Blazor Table, Data Grid, row highlighting, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Row Highlighting -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid Highlighting - -The Ignite UI for Blazor Data Table / Data Grid supports configuring the appearance of row highlighting. - -## Blazor Grid Highlighting Example - -```razor -@using IgniteUI.Blazor.Controls -@inject IJSRuntime JSRuntime; - -
-
- - - - - -
-
- - @if (Data != null) - { -
- - 150")" /> - 160")" /> - 120")" /> - 120")" /> - 110")" /> - 170")" /> - -
- } - -
-
- -@code { - - private bool RowHoverEnabled { get; set; } = true; - private string HighlightColor { get; set; } - private List Data; - - protected override void OnInitialized() - { - Data = EmployeeData.Create(100, false); - } - - private void OnIsRowHoverEnabledChange(ChangeEventArgs args) - { - bool value = args.Value != null ? (bool)args.Value : false; - if (value) - { - this.RowHoverEnabled = true; - } - else - { - this.RowHoverEnabled = false; - } - } - - private void OnRowHoverHighlightChange(ChangeEventArgs args) - { - string value = (string)args.Value; - if (value == "Default") - { - this.HighlightColor = ""; - } - else if(value == "Red") - { - this.HighlightColor = "red"; - } - else if (value == "Blue") - { - this.HighlightColor = "blue"; - } - else if (value == "Green") - { - this.HighlightColor = "green"; - } - - StateHasChanged(); - } -} -``` - - -
- -## Overview - -Highlighting records in the Blazor data can be toggled by setting the [`IsRowHoverEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_IsRowHoverEnabled) boolean property of the Blazor grid. Note, this is enabled by default. - -In addition, the color is configurable by setting the [`RowHoverBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_RowHoverBackground) string property to a hex value. - -## Code Snippet - -The following demonstrates how to enable row highlighting on the Blazor data grid and applies the color blue: - -```razor - -``` - -## API References - -- [`IsRowHoverEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_IsRowHoverEnabled) -- [`RowHoverBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_RowHoverBackground) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-paging.md deleted file mode 100644 index dbcfeb8d8..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-paging.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Blazor grid/table pagination – Ignite UI for Blazor  -_description: View Infragistics' Blazor grid component's Pager, which was designed to take in an array of data and output portions of that data as a page. -_keywords: Blazor Table, Data Grid, row, paging, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/paging -_tocName: Row Paging -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Grid/Table Pagination - -Tabular table UIs are used commonly in many web products. Building a tabular table UI from scratch isn't easy, however, Ignite UI for Blazor grid, creating a Table UI is simple, and binding large amounts of local or remote data to the Blazor grid is easy. Since the grid is virtualized by default, you are not required to include table pagination to show large data sets. It is mainly used due to its most efficient ways of organizing complex data in the UI. With table pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without actually needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows / buttons that let users flip through pages, as demonstrated here: - -Row Paging is enabled within the Ignite UI for Blazor Data Table / Data Grid by setting the `IsPagerVisible` property. In addition, you can limit the maximum number of visible rows by setting [`PageSize`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_PageSize). - -## Blazor Row Paging Example - -```razor -@using IgniteUI.Blazor.Controls - -
- - @if (Data != null) - { -
- - 110")" HeaderText="ID" HorizontalAlignment="CellContentHorizontalAlignment.Center" /> - 120")" /> - 130")"/> - 110")" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" /> - 140")" PositivePrefix="" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" /> - 160")" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" /> - 150")" DateTimeFormat="DateTimeFormats.DateShort" /> - 140")" PositivePrefix="$"/> - 140")" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" /> - 140")" /> - -
- } - -
- -@code { - - private List Data; - private Random Rand = new Random(); - - protected override void OnInitialized() - { - GenerateData(); - } - - public void GenerateData() - { - string[] names = new string[] { - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" }; - - string[] countries = new string[] { - "United-States", "United-Kingdom", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain", }; - string[] status = new string[] { "Packing", "Shipped", "Delivered" }; - - var sales = new List(); - - for (var i = 0; i < 200; i++) - { - var price = GetRandomNumber(10000, 90000) / 100; - var items = GetRandomNumber(4, 30); - var value = Math.Round(price * items); - var margin = GetRandomNumber(2, 5); - var profit = Math.Round((price * margin / 100) * items); - var country = GetRandomItem(countries); - - var item = new SaleInfo() - { - Country = country, - CountryFlag = GetCountryFlag(country), - Margin = margin, - OrderDate = GetRandomDate(), - OrderItems = items, - OrderValue = value, - ProductID = 1001 + i, - ProductName = GetRandomItem(names), - ProductPrice = price, - Profit = Math.Round(profit), - Status = GetRandomItem(status) - }; - sales.Add(item); - } - - this.Data = sales; - } - - public double GetRandomNumber(double min, double max) - { - return Math.Round(min + (Rand.NextDouble() * (max - min))); - } - - public string GetRandomItem(string[] array) - { - var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1)); - return array[index]; - } - - public DateTime GetRandomDate() { - var today = new DateTime(); - var year = today.Year; - var month = this.GetRandomNumber(1, 9); - var day = this.GetRandomNumber(10, 27); - return new DateTime(year, (int)month, (int)day); - } - - public string GetCountryFlag(string country) - { - var flag = "https://dl.infragistics.com/x/img/flags/" + country + ".png"; - return flag; - } - - public class SaleInfo - { - public string Status { get; set; } - public string ProductName { get; set; } - public string CountryFlag { get; set; } - public string Country { get; set; } - public DateTime OrderDate { get; set; } - public double Profit { get; set; } - public double ProductPrice { get; set; } - public double ProductID { get; set; } - public double OrderValue { get; set; } - public double OrderItems { get; set; } - public double Margin { get; set; } - } -} -``` - - -
- -## Overview - -From a UX perspective, table pagination has pros and cons. According to a [recent article](https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php) on UX Matters, here is a breakdown of the good and the bad when it comes to table pagination. - -Table Pagination Benefits: - -- Limits user choice -- Clicks are measurable - -Table Pagination Negatives: - -- Users still have to scrolls -- Pagers work and behave differently from site to site -- Too many UI controls can be confusing -- Users perceive paging and slow and cumbersome -- Users may not notice pagination controls -- Page loading may be slow -- Users are confused whether actions apply to Page or entire set of data - -With the Ignite UI Blazor grid, we allow the developer to add paging, however, as the grid has infinite scrolling built in by default, we recommend infinite (or virtual) scrolling vs. adding a pager to the grid. With virtualized, infinite scrolling as the default user experience, you get: - -- Best performance while still having control or how much data is ‘paged’ via the scrolling interaction -- Natural approach to scrolling all content -- All interactions are clear to the end user -- Maps to the natural interactions on a mobile UX - -## Blazor Grid/Page Synchronization - -When users interact with the Grid like sorting and grouping, and you have enabled the Blazor Pager on the grid, you need to use the following functions to ensure that the Blazor Pagination data is synchronized with the Blazor table display. - -- applySorts -- applyGroups -- applyFilters - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) -- `IsPagerVisible` -- [`PageSize`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html#IgniteUI_Blazor_Controls_IgbDataGrid_PageSize) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-pinning.md deleted file mode 100644 index 12de25612..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-row-pinning.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Blazor Data Grid | Row Pinning | Infragistics -_description: Use Infragistics' Blazor grid component's row pinning feature in order to lock row change row order with a rich and easy to use API. Check out Ignite UI for Blazor table demos! -_keywords: Blazor Table, Data Grid, row pinning, Ignite UI for Blazor, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/row-pinning -_tocName: Row Pinning -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Row Pinning - -The Ignite UI for Blazor Data Table / Data Grid allows Row Pinning by either using keys or the underlying data source items. When a row is pinned, it will be duplicated at the top of the blazor data grid and remain fixed there with light gray background and its actual row will be rendered with low opacity. - -## Blazor Row Pinning Example - -```razor -@using IgniteUI.Blazor.Controls - -
- -
- - @if (Data != null) - { -
- - 140")" ContentOpacity="1" HorizontalAlignment="CellContentHorizontalAlignment.Center"/> - 150")" /> - 140")" /> - 120")" /> - 150")" /> - 140")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 110")" /> - 170")" HorizontalAlignment="CellContentHorizontalAlignment.Right" /> - 130")" PositivePrefix="$" ShowGroupingSeparator="true" /> - 150")" /> - -
- } - -
-
- -@code { - - private List Data; - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - OnGridChanged(); - StateHasChanged(); - } - } - - - protected override void OnInitialized() - { - this.Data = EmployeeData.Create(200, false); - } - - private void OnGridChanged() - { - grid.PinnedItems.Add(this.Data[2] as Employee); - grid.PinnedItems.Add(this.Data[4] as Employee); - } - -} -``` - - -
- -You can pin rows in the Blazor data grid by adding the target row’s underlying data item to the pinnedItems collection of the Blazor grid. - -## Code Snippet - -```razor - - -@code { - - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - OnGridChanged(); - StateHasChanged(); - } - } - - private void OnGridChanged() - { - grid.PinnedItems.Add(this.DataSource[2] as Employee); - grid.PinnedItems.Add(this.DataSource[4] as Employee); - } -} -``` - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-type-sparkline-table.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-type-sparkline-table.md deleted file mode 100644 index 824055242..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid-type-sparkline-table.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Blazor Data Grid | Column Sparkline | Infragistics -_description: See how Ignite UI for Blazor Data Table & Grid supports a template column which provides you a way to embed other components such as the column sparkline. -_keywords: Blazor Table, Data Grid, column sparkline, Ignite UI for Blazor, data binding, Infragistics -mentionedTypes: ["Grid", "CellInfo", "TemplateCellInfo", "Sparkline"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Sparkline -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Blazor Column Sparkline - -The Ignite UI for Blazor Data Table / Data Grid supports a Template Column which provides you to a way to embed other components such as Ignite UI for Blazor sparkline component. Refer to the [Column Types](column-types.md) topic for other types of columns supported in the [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) component. - -## Blazor Column Sparkline Example - -```razor -@using Microsoft.AspNetCore.Components -@using Microsoft.AspNetCore.Components.Rendering -@using IgniteUI.Blazor.Controls - -
-
- @if (Data != null) - { - - 110")" - HorizontalAlignment="@CellContentHorizontalAlignment.Center" /> - 140")" /> - 110")" - PositivePrefix="$" ShowGroupingSeparator="true" - MinFractionDigits="2" /> - - @* custom sparkline solumn: *@ - 180")" - HeaderText="Order History" PaddingTop="10" PaddingBottom="10" - HorizontalAlignment="CellContentHorizontalAlignment.Center"> - - - - 110")" - HorizontalAlignment="CellContentHorizontalAlignment.Center" /> - 120")" PositivePrefix="$" ShowGroupingSeparator="true" /> - - 120")" - ContentOpacity="1" HorizontalAlignment="CellContentHorizontalAlignment.Center" - PaddingTop="10" PaddingBottom="10"/> - 120")" - HorizontalAlignment="CellContentHorizontalAlignment.Center" /> - - } -
-
- -@code { - - private List Data; - - protected override void OnInitialized() - { - this.Data = Products.GetData(20); - } -} -``` - - -
- -## Code Snippet - -The following code example shows how to embed [`IgbSparkline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html) component in [`IgbTemplateColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTemplateColumn.html) of the [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) component : - -```razor - - 180")" HeaderText="Order History" > - - - -``` - -## API References - -- [`IgbDataGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataGrid.html) -- [`IgbSparkline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSparkline.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid.md index 865f48a1f..b2fb7b80a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-grid.md @@ -217,7 +217,6 @@ public class NwindData } ``` -
## Getting Started with Blazor Data Grid @@ -263,7 +262,7 @@ Now that we have the grid packages imported, let’s get started with the basic The [`Id`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Id) property is a string value and is the unique identifier of the grid which will be auto-generated if not provided, while `data` binds the grid, in this case to local data. -The [`AutoGenerate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AutoGenerate) property tells the grid to auto generate the grid's [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) components based on the data source fields. It will also try to deduce the appropriate data type for the column if possible. Otherwise, the developer needs to explicitly define the columns and the mapping to the data source fields. +The [`AutoGenerate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AutoGenerate) property tells the grid to auto generate the grid's [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) components based on the data source fields. It will also try to deduce the appropriate data type for the column if possible. Otherwise, the developer needs to explicitly define the columns and the mapping to the data source fields. ## Editable Blazor Grid @@ -277,7 +276,7 @@ Following this topic you will learn more about [cell template](data-grid.md#cell ### Defining Columns -Let's turn the [`AutoGenerate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AutoGenerate) property off and define the columns collection in the markup: +Let's turn the [`AutoGenerate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AutoGenerate) property off and define the columns collection in the markup: ```razor @@ -452,9 +451,9 @@ The code above will make the **ProductName** column sortable and editable and wi There are optional parameters for formatting: -- [`Format`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFieldPipeArgs.html#IgniteUI_Blazor_Controls_IgbFieldPipeArgs_Format) - determines what date/time parts are displayed, defaults to `'mediumDate'`, equivalent to **'MMM d, y'** -- [`Timezone`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFieldPipeArgs.html#IgniteUI_Blazor_Controls_IgbFieldPipeArgs_Timezone) - the timezone offset for dates. By default uses the end-user's local system timezone -- [`DigitsInfo`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFieldPipeArgs.html#IgniteUI_Blazor_Controls_IgbFieldPipeArgs_DigitsInfo) - decimal representation objects. Default to **1.0-3** +- [`Format`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnPipeArgs.html#IgniteUI_Blazor_Controls_IgbColumnPipeArgs_Format) - determines what date/time parts are displayed, defaults to `'mediumDate'`, equivalent to **'MMM d, y'** +- [`Timezone`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnPipeArgs.html#IgniteUI_Blazor_Controls_IgbColumnPipeArgs_Timezone) - the timezone offset for dates. By default uses the end-user's local system timezone +- [`DigitsInfo`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnPipeArgs.html#IgniteUI_Blazor_Controls_IgbColumnPipeArgs_DigitsInfo) - decimal representation objects. Default to **1.0-3** To allow customizing the display format by these parameters, the [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) input is exposed. A column will respect only the corresponding properties for its data type, if [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) is set. Example: @@ -468,7 +467,7 @@ To allow customizing the display format by these parameters, the [`PipeArgs`](ht PipeArgs=@(new IgbColumnPipeArgs() { Timezone="UTC+0", DigitsInfo="1.2-2", Format = "longDate" }) /> ``` -The `OrderDate` column will respect only the [`Format`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFieldPipeArgs.html#IgniteUI_Blazor_Controls_IgbFieldPipeArgs_Format) and [`Timezone`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFieldPipeArgs.html#IgniteUI_Blazor_Controls_IgbFieldPipeArgs_Timezone) properties, while the `UnitPrice` will only respect the [`DigitsInfo`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFieldPipeArgs.html#IgniteUI_Blazor_Controls_IgbFieldPipeArgs_DigitsInfo). +The `OrderDate` column will respect only the [`Format`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnPipeArgs.html#IgniteUI_Blazor_Controls_IgbColumnPipeArgs_Format) and [`Timezone`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnPipeArgs.html#IgniteUI_Blazor_Controls_IgbColumnPipeArgs_Timezone) properties, while the `UnitPrice` will only respect the [`DigitsInfo`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnPipeArgs.html#IgniteUI_Blazor_Controls_IgbColumnPipeArgs_DigitsInfo). All available column data types could be found in the official [Column types topic](grid/column-types.md#default-template). @@ -777,7 +776,6 @@ public class EmployeesNestedData } ``` - ### Working with Flat Data Overview 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Data) property of the [`IgbGridRow`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridRow.html). @@ -1000,7 +998,6 @@ public class CustomersData } ``` - ## Keyboard Navigation Keyboard navigation of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) provides a rich variety of keyboard interactions for the user. It enhances accessibility and allows intuitive navigation through any type of elements inside (cell, row, column header, toolbar, footer, etc.). diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-pie-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-pie-chart.md index 25f378838..5cf94e31d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-pie-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/data-pie-chart.md @@ -82,7 +82,6 @@ public class EnergyGlobalDemand } ``` -
## Blazor Data Pie Chart Recommendations @@ -120,11 +119,11 @@ Do Not Use Pie Chart When: Legends are used to show information about each point, to know about its contribution towards the total sum. -In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`Legend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_Legend) property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its `Orientation` property. +In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`Legend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_Legend) property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its `Orientation` property. -The labels shown on the legend will display the same content as the label that is shown for each slice in the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) by default, but this can be modified by utilizing the [`LegendSliceLabelContentMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_LegendSliceLabelContentMode) property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart. +The labels shown on the legend will display the same content as the label that is shown for each slice in the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) by default, but this can be modified by utilizing the [`LegendSliceLabelContentMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_LegendSliceLabelContentMode) property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart. -You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the [`LegendItemBadgeShape`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_LegendItemBadgeShape) property on the chart, and you can set this to be a circle, line, bar, column, and more. +You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the [`LegendItemBadgeShape`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_LegendItemBadgeShape) property on the chart, and you can set this to be a circle, line, bar, column, and more. Below is an example that demonstrates usage of the ItemLegend with the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html). @@ -210,20 +209,19 @@ public class EnergyGlobalDemand } ``` -
## Blazor Pie Chart Others Category Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice. -The Others category in the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) has three main, configurable properties - [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryType), [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryThreshold), and [`OthersCategoryText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryText) that allow you to configure how the Others slice in the chart is shown. These are each described below: +The Others category in the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) has three main, configurable properties - [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryType), [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryThreshold), and [`OthersCategoryText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryText) that allow you to configure how the Others slice in the chart is shown. These are each described below: -The [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryType) property works in tandem with the [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryThreshold) property of the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html). For the [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryType), you can define whether you want the [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryThreshold) to be evaluated as a number or a percentage. For example, if you decide on number and set the [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryThreshold) to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) will become part of the Others category. +The [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryType) property works in tandem with the [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryThreshold) property of the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html). For the [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryType), you can define whether you want the [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryThreshold) to be evaluated as a number or a percentage. For example, if you decide on number and set the [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryThreshold) to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) will become part of the Others category. -To get the underlying data items that are contained within the Others slice in the chart, you can utilize the [`GetOthersContext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_GetOthersContext) method on the chart. This return type of this method is an [`IgbOthersCategoryContext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbOthersCategoryContext.html) which exposes an [`Items`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbOthersCategoryContext.html#IgniteUI_Blazor_Controls_IgbOthersCategoryContext_Items) property. The [`Items`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbOthersCategoryContext.html#IgniteUI_Blazor_Controls_IgbOthersCategoryContext_Items) property returns an array that will contain the items in the Others slice. Additionally, when clicking the Others slice, the `Item` property of the event arguments for the `SeriesClick` event will be will also return this [`IgbOthersCategoryContext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbOthersCategoryContext.html). +To get the underlying data items that are contained within the Others slice in the chart, you can utilize the [`GetOthersContext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_GetOthersContext) method on the chart. This return type of this method is an [`IgbOthersCategoryContext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbOthersCategoryContext.html) which exposes an [`Items`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbOthersCategoryContext.html#IgniteUI_Blazor_Controls_IgbOthersCategoryContext_Items) property. The [`Items`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbOthersCategoryContext.html#IgniteUI_Blazor_Controls_IgbOthersCategoryContext_Items) property returns an array that will contain the items in the Others slice. Additionally, when clicking the Others slice, the `Item` property of the event arguments for the `SeriesClick` event will be will also return this [`IgbOthersCategoryContext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbOthersCategoryContext.html). -By default, the Others slice will be represented by a label of "Others." You can change this by modifying the [`OthersCategoryText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryText) property of the chart. +By default, the Others slice will be represented by a label of "Others." You can change this by modifying the [`OthersCategoryText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryText) property of the chart. ### Blazor Styling the Others Slice @@ -238,9 +236,9 @@ You can style the aggregated Others slice separately from other slices by using These properties only affect the Others slice (when it exists). All other slices continue to use the normal palette and item-wise coloring behavior. > [!NOTE] -> The Others slice is only rendered when the chart is configured to create it (for example, with [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryThreshold) greater than `0` and an appropriate [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryType)). If the Others slice is not present, `OthersCategoryBrush` and `OthersCategoryOutline` have no visible effect. +> The Others slice is only rendered when the chart is configured to create it (for example, with [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryThreshold) greater than `0` and an appropriate [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryType)). If the Others slice is not present, `OthersCategoryBrush` and `OthersCategoryOutline` have no visible effect. -If you want to ensure that the Others category does not show up in the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html), you can set the [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryThreshold) to 0. +If you want to ensure that the Others category does not show up in the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html), you can set the [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryThreshold) to 0. The following sample demonstrates usage of the Others slice in the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html): @@ -364,16 +362,15 @@ public class DataPieData } ``` -
## Blazor Data Pie Chart Selection -The [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SelectionBehavior) and [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SelectionMode) properties of the chart, described below: +The [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_SelectionBehavior) and [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_SelectionMode) properties of the chart, described below: -The main two options of the [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SelectionBehavior) are `PerDataItemSingleSelect` and `PerDataItemMultiSelect`, which will enable single and multiple selection, respectively. +The main two options of the [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_SelectionBehavior) are `PerDataItemSingleSelect` and `PerDataItemMultiSelect`, which will enable single and multiple selection, respectively. -The [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SelectionMode) property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do: +The [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_SelectionMode) property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do: - `Brighten`: The selected slices will be highlighted. - `FadeOthers`: The selected slices will remain their same color and others will fade. @@ -506,21 +503,20 @@ public class EnergyGlobalDemand } ``` -
## Blazor Data Pie Chart Highlighting The [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) supports mouse over highlighting, as well as a highlighting overlay that can be configured by providing a separate data source. -First, the [`HighlightingBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingBehavior) enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do: +First, the [`HighlightingBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_HighlightingBehavior) enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do: - `DirectlyOver`: The slices are only highlighted when the mouse is directly over them. - `NearestItems`: The nearest slice to the mouse position will be highlighted. - `NearestItemsAndSeries`: The nearest slice and series to the mouse position will be highlighted. - `NearestItemsRetainMainShapes`: The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized. -The [`HighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightingMode) enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do: +The [`HighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_HighlightingMode) enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do: - `Brighten`: The series will have its color brightened when the mouse position is over or near it. - `BrightenSpecific`: The specific slice will have its color brightened when the mouse position is over or near it. @@ -637,8 +633,7 @@ public class EnergyGlobalDemand } ``` - -In addition to the mouse highlighting, the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a `HighlightedDataSource` for the control and by setting the [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedValuesDisplayMode) property to `Overlay`. The `HighlightedDataSource` expects a subset of the data assigned to the `DataSource` property of the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html). +In addition to the mouse highlighting, the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html) exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a `HighlightedDataSource` for the control and by setting the [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_HighlightedValuesDisplayMode) property to `Overlay`. The `HighlightedDataSource` expects a subset of the data assigned to the `DataSource` property of the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html). When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control. @@ -741,7 +736,6 @@ public class OnlineTrafficHighlightTotals } ``` -
## Blazor Data Pie Chart Animation @@ -750,7 +744,7 @@ The [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteU You can set the [`IsTransitionInEnabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_IsTransitionInEnabled) property to **true** to have the pie chart animate into view. The type of animation performed can be configured by setting the [`TransitionInMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_TransitionInMode) enumerated property to the type of animation you would like to see. Additionally, you can also set the [`TransitionInSpeedType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_TransitionInSpeedType) property to scale with index, value, normal, or randomized. The duration of this animation can be controlled by the [`TransitionInDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_TransitionInDuration) property, which takes a `TimeSpan`. -If you would like to animate data changes, this can also be done by setting the [`AnimateSeriesWhenAxisRangeChanges`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_AnimateSeriesWhenAxisRangeChanges) property to **true**. The duration of this change can be configured by setting the [`TransitionDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_TransitionDuration) property as well. +If you would like to animate data changes, this can also be done by setting the [`AnimateSeriesWhenAxisRangeChanges`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_AnimateSeriesWhenAxisRangeChanges) property to **true**. The duration of this change can be configured by setting the [`TransitionDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_TransitionDuration) property as well. The following sample demonstrates the usage of animation in the [`IgbDataPieChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html): @@ -863,7 +857,6 @@ public class EnergyGlobalDemand } ``` -
## Additional Resources @@ -877,10 +870,10 @@ public class EnergyGlobalDemand The following table lists API members mentioned in the above sections: - [`ChartType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_ChartType) -- [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryThreshold) -- [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieBaseChart.html#IgniteUI_Blazor_Controls_IgbDataPieBaseChart_OthersCategoryType) -- [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SelectionMode) -- [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_SelectionBehavior) +- [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryThreshold) +- [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_OthersCategoryType) +- [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_SelectionMode) +- [`SelectionBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataPieChart.html#IgniteUI_Blazor_Controls_IgbDataPieChart_SelectionBehavior) |Chart Type | Control Name | API Members | |-----------------|----------------|------------ | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-picker.md index 2a6d200ed..82bc1b001 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-picker.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-picker.md @@ -36,7 +36,6 @@ Below you can see a sample that demonstrates how the Date Picker works when user } ``` - ## Getting Started with Blazor Date Picker To get started with the [`IgbDatePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html) component, first we need to register its module as follows: @@ -167,7 +166,6 @@ The [`IgbDatePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI. } ``` - ### Display and input format [`InputFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html#IgniteUI_Blazor_Controls_IgbDatePicker_InputFormat) and [`DisplayFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html#IgniteUI_Blazor_Controls_IgbDatePicker_DisplayFormat) are properties which can be set to make the picker's editor follow a specified format. The [`InputFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html#IgniteUI_Blazor_Controls_IgbDatePicker_InputFormat) is locale based, so if none is provided, the picker will default to the one used by the browser. @@ -194,7 +192,6 @@ More information about these can be found in the [`IgbDateTimeInput`](https://ww } ``` - ### Increment and decrement The [`IgbDatePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html) exposes [`StepUp`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html#IgniteUI_Blazor_Controls_IgbDatePicker_StepUp) and [`StepDown`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html#IgniteUI_Blazor_Controls_IgbDatePicker_StepDown) methods. Both of which come from the [`IgbDateTimeInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateTimeInput.html) and can be used for incrementing and decrementing a specific `DatePart` of the currently set date. @@ -303,7 +300,6 @@ In forms, we can handle the `Change` event of the component and update the value } ``` - ### Calendar Specific settings The [`IgbDatePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html) can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include [`VisibleMonths`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html#IgniteUI_Blazor_Controls_IgbDatePicker_VisibleMonths) which allows more than one calendar to be displayed when the picker expands, [`WeekStart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html#IgniteUI_Blazor_Controls_IgbDatePicker_WeekStart) which determines the starting day of the week, [`ShowWeekNumbers`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html#IgniteUI_Blazor_Controls_IgbDatePicker_ShowWeekNumbers) which shows the number for each week in the year and more. @@ -370,7 +366,6 @@ igc-date-picker::part(year-inner selected) { } ``` - ## API References - [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-range-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-range-picker.md index e1a53086b..ea40a1cb6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-range-picker.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-range-picker.md @@ -37,7 +37,6 @@ Below is a sample demonstrating the [`IgbDateRangePicker`](https://www.infragist } ``` - ### Getting Started To get started with the [`IgbDateRangePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html) component, first we need to register its module as follows: @@ -60,9 +59,7 @@ For a complete introduction to the Ignite UI for Blazor, read the [**Getting Sta ## Usage -The [`IgbDateRangePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html) allows users to select a start and end date either by choosing a date range from a dropdown/calendar pop-up or by typing directly into the input fields - one for the start date and one for the 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. +The [`IgbDateRangePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html) allows users to select a start and end date either by choosing a date range from a dropdown/calendar pop-up or by typing directly into the input fields - one for the start date and one for the end date. The picker offers two modes for displaying date values: single input and two inputs. Both provide editing and masking capabilities. When the calendar is visible, a date range can be selected by choosing both a start and end date. Selecting a date will set both the start and end date, and once a second date is chosen, it will set the end date. If a range is already selected, clicking any other date on the calendar will start a new range selection. @@ -124,10 +121,6 @@ By default, when clicked, the [`IgbDateRangePicker`](https://www.infragistics.co The [`IgbDateRangePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html) features intuitive keyboard navigation, allowing users to easily increment, decrement, or jump between different component parts, all without needing to use a mouse. -The available keyboard navigation options vary depending on whether the component is in single input or two inputs mode. - -**Two Inputs Mode:** - |Keys|Description| |----|-----------| | ← | Moves the caret one character to the left | @@ -139,11 +132,6 @@ The available keyboard navigation options vary depending on whether the componen | HOME | Moves the caret to the beginning of the input mask | | END | Moves the caret to the end of the input mask | | CTRL + ; | Sets the current date as the value of the component | - -**Both Single and Two Inputs Modes:** - -|Keys|Description| -|----|-----------| | ALT + ↓ | Opens the calendar dropdown | | ALT + ↑ | Closes the calendar dropdown | @@ -207,9 +195,9 @@ You can further customize the pop-up calendar using various properties: | [`Orientation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_Orientation) | 'vertical' or 'horizontal' | Allows you to set whether the calendar should be displayed vertically or horizontally. | | [`VisibleMonths`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_VisibleMonths) | string | Controls how many months are visible at a time, with a value of either 1 or 2. | | [`ShowWeekNumbers`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_ShowWeekNumbers) | string | Enables or disables the week number column in the calendar. | -| [`Open`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_Open) | boolean | Determines whether the calendar picker is open. | -| [`KeepOpenOnSelect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_KeepOpenOnSelect) | boolean | Keeps the calendar picker open after a date selection. | -| [`KeepOpenOnOutsideClick`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_KeepOpenOnOutsideClick) | boolean | Keeps the calendar picker open when clicking outside of it. | +| [`Open`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_Open) | boolean | Determines whether the calendar picker is open. | +| [`KeepOpenOnSelect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_KeepOpenOnSelect) | boolean | Keeps the calendar picker open after a date selection. | +| [`KeepOpenOnOutsideClick`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_KeepOpenOnOutsideClick) | boolean | Keeps the calendar picker open when clicking outside of it. | | [`WeekStart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_WeekStart) | string | Sets the start day of the week. | | [`HideOutsideDays`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_HideOutsideDays) | boolean | Hides days that fall outside the current month view. | | [`HideHeader`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_HideHeader) | boolean | Hides the calendar header (applicable only in dialog mode). | @@ -303,7 +291,6 @@ Now, when you click the newly created **"Next 7 days"** chip in the calendar pop } ``` - ### Disabled & 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_DisabledDates) property. @@ -398,7 +385,6 @@ The [`IgbDateRangePicker`](https://www.infragistics.com/blazor/docs/api/api/Igni } ``` - ## Additional configuration ### Properties @@ -564,16 +550,15 @@ In addition to the slots we've already covered, the following slots are also ava } ``` - ### Methods In addition to the properties and slots, the [`IgbDateRangePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html) also exposes few methods that you can use: |Name|Description| |--|--| -| [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_Show) | Displays the calendar picker component. | -| [`Hide`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_Hide) | Hides the calendar picker component. | -| [`Toggle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_Toggle) | Toggles the calendar picker between the shown and hidden states. | +| [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_Show) | Displays the calendar picker component. | +| [`Hide`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_Hide) | Hides the calendar picker component. | +| [`Toggle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_Toggle) | Toggles the calendar picker between the shown and hidden states. | | [`Clear`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_Clear) | Clears the input fields, removing any user input. | | [`Select`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_Select) | Selects a date range value in the picker. | | [`SetCustomValidity`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateRangePicker.html#IgniteUI_Blazor_Controls_IgbDateRangePicker_SetCustomValidity) | Sets a custom validation message. If the provided message is not empty, the input will be marked as invalid. | @@ -694,7 +679,6 @@ igc-date-range-picker::part(clear-icon-end) { } ``` - ## API References - [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-time-input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-time-input.md index b23d9f41a..a632afe41 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-time-input.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/date-time-input.md @@ -60,7 +60,6 @@ The Ignite UI for Blazor Date Time Input allows the user to set and edit the dat } ``` - ## Usage Before using the [`IgbDateTimeInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateTimeInput.html), you need to register it as follows: @@ -185,7 +184,6 @@ If all went well, you should see the following in your browser: } ``` - ### Display format The date time input exposes predefined formats for displaying date/time in various manners. All of the examples below are given in en-US locale. @@ -299,7 +297,6 @@ If all went well, the component will be `invalid` if the value is greater or low } ``` - ## Step up/down The [`IgbDateTimeInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateTimeInput.html) exposes public [`StepUp`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateTimeInput.html#IgniteUI_Blazor_Controls_IgbDateTimeInput_StepUp) and [`StepDown`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateTimeInput.html#IgniteUI_Blazor_Controls_IgbDateTimeInput_StepDown) methods. They increment or decrement a specific `DatePart` of the currently set date and time and can be used in a couple of ways. @@ -363,7 +360,6 @@ Try it in the example below: } ``` - ## Styling The [`IgbDateTimeInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDateTimeInput.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -450,7 +446,6 @@ igc-date-time-input { } ``` - ## API References - [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dialog.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dialog.md index e36a7628e..811bfbf84 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dialog.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dialog.md @@ -48,7 +48,6 @@ This sample demonstrates how to create a Dialog component in Blazor. } ``` -
### Usage @@ -170,7 +169,6 @@ Form elements can close a Dialog if they have the attribute `method="dialog"`. S } ``` - ## Styling The [`IgbDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDialog.html) component exposes several CSS parts to give you full control over its style: @@ -241,7 +239,6 @@ igc-dialog::part(footer) { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/divider.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/divider.md index 85876a753..f1c53db19 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/divider.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/divider.md @@ -24,7 +24,6 @@ The Ignite UI for Blazor Divider allows the content author to easily create a ho ``` -
## Dependencies @@ -98,7 +97,6 @@ If the [`Vertical`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Bl ``` - ### Type The `Type` attribute determines whether to render a `solid` or a `dashed` divider line. The default value is `solid`. @@ -118,7 +116,6 @@ The `Type` attribute determines whether to render a `solid` or a `dashed` divide ``` - ### Inset Divider The [`IgbDivider`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDivider.html) can be set in on both sides. To `inset` the divider, set the [`Middle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDivider.html#IgniteUI_Blazor_Controls_IgbDivider_Middle) attribute to true in combination with the `--inset` css variable. This will shrink the divider line from both sides. The default value of the [`Middle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDivider.html#IgniteUI_Blazor_Controls_IgbDivider_Middle) attribute is false. @@ -191,7 +188,6 @@ The [`IgbDivider`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Bla ``` - ### Using Divider Inside Select Component The following sample illustrates how the [`IgbDivider`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDivider.html) can be integrated within the [`IgbSelect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSelect.html) in order to distinguish two groups of items. @@ -219,7 +215,6 @@ The following sample illustrates how the [`IgbDivider`](https://www.infragistics ``` - ## CSS Variables ### Inset diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dock-manager-embedding-frames.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dock-manager-embedding-frames.md index 0efbdd13e..c8a1544d3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dock-manager-embedding-frames.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dock-manager-embedding-frames.md @@ -84,7 +84,6 @@ The Infragistics Blazor Dock Manager component provides you with the layout for } ``` - @@ -223,8 +222,6 @@ This example shows most functionalities and docking options of the [`IgbDockMana
- -
@@ -553,7 +550,6 @@ If everything went well, we should now have a DockManager with customized icons } ``` - Below you can find a list containing the slot names for all of the buttons as well as the splitter handle: | Slot name | Description | @@ -1539,7 +1535,6 @@ igc-card-content { } ``` -
### CSS Parts diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/donut-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/donut-chart.md index afa143817..1241249a7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/donut-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/donut-chart.md @@ -115,7 +115,6 @@ public class EnergyGlobalDemand } ``` -
## Blazor Donut Chart Recommendations @@ -258,7 +257,6 @@ The Blazor Donut Chart has the ability to select slices on click. Optionally, yo } ``` -
## Blazor Donut Chart - Multiple Rings @@ -392,7 +390,6 @@ public class CalendarSeasons } ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dropdown.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dropdown.md index 9c5990f26..45268150e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dropdown.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/dropdown.md @@ -38,7 +38,6 @@ The following Blazor Dropdown List example demonstrates the use of simple intera } ``` - ## How to use the Dropdown List with Ignite UI for Blazor Before using the [`IgbDropdown`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html), you need to register it as follows: @@ -53,7 +52,7 @@ The simplest way to start using the [`IgbDropdown`](https://www.infragistics.com ### Target -The Blazor Dropdown list is positioned relatively to its target. The `target` slot allows you to provide a built-in component which toggles the `open` property on click. In some cases you would want to use an external target or use another event to toggle the opening of the Dropdown. You can achieve this using the [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_Show), [`Hide`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_Hide) and [`Toggle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_Toggle) methods which allow you to provide the target as a parameter. By default, the Dropdown list uses `absolute` CSS position. You will need to set the [`IgbPositionStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPositionStrategy.html) of the Blazor Dropdown to `fixed` when the target element is inside a fixed container, but the Dropdown is not. The Dropdown list is automatically sized based on its content, if you want the list to have the same width as the target, you should set the [`SameWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_SameWidth) property to `true`. +The Blazor Dropdown list is positioned relatively to its target. The `target` slot allows you to provide a built-in component which toggles the `open` property on click. In some cases you would want to use an external target or use another event to toggle the opening of the Dropdown. You can achieve this using the [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_Show), [`Hide`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_Hide) and [`Toggle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_Toggle) methods which allow you to provide the target as a parameter. By default, the Dropdown list uses `absolute` CSS position. You will need to set the [`IgbPositionStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPositionStrategy.html) of the Blazor Dropdown to `fixed` when the target element is inside a fixed container, but the Dropdown is not. The Dropdown list is automatically sized based on its content, if you want the list to have the same width as the target, you should set the [`SameWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_SameWidth) property to `true`. ```razor @using IgniteUI.Blazor.Controls @@ -85,7 +84,6 @@ The Blazor Dropdown list is positioned relatively to its target. The `target` sl } ``` - ### Position The preferred placement of the Blazor Dropdown can be set using the [`Placement`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_Placement) property. The default placement of the Dropdown is `bottom-start`. The [`Flip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_Flip) property determines whether the placement should be flipped if there is not enough space to display the Dropdown at the specified placement. The distance from the Blazor Dropdown list to its target can be specified using the [`Distance`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_Distance) property. @@ -178,14 +176,13 @@ The preferred placement of the Blazor Dropdown can be set using the [`Placement` } ``` - ### Selection The [`IgbDropdown`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html) emits the `Change` event when the user selects an item. The [`Select`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_Select) method of the Dropdown allows you to select an item by its index or value. ### Item -The [`IgbDropdownItem`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdownItem.html) represents a selectable item in the Dropdown list. You could predefine a selected item by setting the [`Selected`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseOptionLike.html#IgniteUI_Blazor_Controls_IgbBaseOptionLike_Selected) property. You could also disable an item so that it can't be selected using the [`Disabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseOptionLike.html#IgniteUI_Blazor_Controls_IgbBaseOptionLike_Disabled) property. The [`IgbDropdownItem`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdownItem.html) has a default slot which allows you to specify the content of the item. You could also provide custom content to be rendered before or after the content using the `prefix` and `suffix` slots. The [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseOptionLike.html#IgniteUI_Blazor_Controls_IgbBaseOptionLike_Value) property allows you to provide a custom value to an item. If the [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseOptionLike.html#IgniteUI_Blazor_Controls_IgbBaseOptionLike_Value) is not set, it resolves to the text content of the item. +The [`IgbDropdownItem`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdownItem.html) represents a selectable item in the Dropdown list. You could predefine a selected item by setting the [`Selected`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdownItem.html#IgniteUI_Blazor_Controls_IgbDropdownItem_Selected) property. You could also disable an item so that it can't be selected using the [`Disabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdownItem.html#IgniteUI_Blazor_Controls_IgbDropdownItem_Disabled) property. The [`IgbDropdownItem`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdownItem.html) has a default slot which allows you to specify the content of the item. You could also provide custom content to be rendered before or after the content using the `prefix` and `suffix` slots. The [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdownItem.html#IgniteUI_Blazor_Controls_IgbDropdownItem_Value) property allows you to provide a custom value to an item. If the [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdownItem.html#IgniteUI_Blazor_Controls_IgbDropdownItem_Value) is not set, it resolves to the text content of the item. ```razor @using IgniteUI.Blazor.Controls @@ -244,7 +241,6 @@ The [`IgbDropdownItem`](https://www.infragistics.com/blazor/docs/api/api/IgniteU } ``` - ### Header You could use the [`IgbDropdownHeader`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdownHeader.html) to provide a header for a group of items. @@ -306,7 +302,6 @@ You could use the [`IgbDropdownHeader`](https://www.infragistics.com/blazor/docs } ``` - ### Group The Blazor Dropdown's items can also be grouped using the [`IgbDropdownGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdownGroup.html), making it easier for users to differentiate separate categories. See it in action in this Blazor Dropdown List example: @@ -376,14 +371,13 @@ The Blazor Dropdown's items can also be grouped using the [`IgbDropdownGroup`](h } ``` - ### Scroll Strategy The [`ScrollStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_ScrollStrategy) property determines the behavior of the component during scrolling the container of the target element. The default value is `scroll` which means that the Dropdown will be scrolled with its target. Setting the property to `block` will block the scrolling if the Dropdown is opened. You could also set the property to `close` which means that the Dropdown will be closed automatically on scroll. ### Keep Open -By default, the Dropdown is closed automatically when the user clicks outside of it or selects an item. You could prevent this behavior using the [`KeepOpenOnOutsideClick`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_KeepOpenOnOutsideClick) and [`KeepOpenOnSelect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseComboBoxLike.html#IgniteUI_Blazor_Controls_IgbBaseComboBoxLike_KeepOpenOnSelect) properties. +By default, the Dropdown is closed automatically when the user clicks outside of it or selects an item. You could prevent this behavior using the [`KeepOpenOnOutsideClick`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_KeepOpenOnOutsideClick) and [`KeepOpenOnSelect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html#IgniteUI_Blazor_Controls_IgbDropdown_KeepOpenOnSelect) properties. ## Styling @@ -484,7 +478,6 @@ igc-dropdown-group::part(label) { } ``` - ## API Reference - [`IgbDropdown`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDropdown.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-cells.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-cells.md index d3efc73af..e98a69621 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-cells.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-cells.md @@ -360,7 +360,6 @@ namespace Infragistics.Samples } ``` -
## Referencing Cells and Regions diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-workbooks.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-workbooks.md index ac642d53d..746fddfb3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-workbooks.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-workbooks.md @@ -385,7 +385,6 @@ namespace Infragistics.Samples } ``` -
## Change Default Font diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-worksheets.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-worksheets.md index e9583b637..c241838fa 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-worksheets.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-worksheets.md @@ -337,7 +337,6 @@ namespace Infragistics.Samples } ``` -
## Configuring the Gridlines diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-working-with-charts.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-working-with-charts.md index 32d4b1014..8a7f947dc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-working-with-charts.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-working-with-charts.md @@ -283,7 +283,6 @@ namespace Infragistics.Samples } ``` - > [!Note] > The XLSX format is required. Other formats are not supported at this time. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-working-with-sparklines.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-working-with-sparklines.md index bff05496f..dad13641c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-working-with-sparklines.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-working-with-sparklines.md @@ -354,7 +354,6 @@ namespace Infragistics.Samples } ``` -
## Supported Sparklines diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library.md index 9707577cb..f4a596b22 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library.md @@ -289,7 +289,6 @@ namespace Infragistics.Samples } ``` -
## Requirements diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/expansion-panel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/expansion-panel.md index 4464907ba..1ce067b38 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/expansion-panel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/expansion-panel.md @@ -32,7 +32,6 @@ The Ignite UI for Blazor Expansion Panel is a lightweight accordion component wh ``` -
## Usage @@ -110,7 +109,6 @@ The following sample demonstrates how we can add some logic to our component to } ``` -
## Component Customization @@ -182,7 +180,6 @@ The next code sample demonstrates how to configure the component's button to go } ``` -
## Keyboard Navigation @@ -300,7 +297,6 @@ igc-expansion-panel::part(subtitle) { ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/features.md index 8d8dbf663..0b4a6ecb3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/features.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/features.md @@ -82,7 +82,6 @@ The following demo shows some [`IgbCombo`](https://www.infragistics.com/blazor/d } ``` - In our sample we are going to use the [`IgbSwitch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSwitch.html) component, so we have to import them together with the combo: ```razor diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-changelog-dv-blazor.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-changelog-dv-blazor.md index 9647a429d..62ff1f09a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-changelog-dv-blazor.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-changelog-dv-blazor.md @@ -165,7 +165,7 @@ As of the 2025.2 release, we no longer support .NET 6. This corresponds with the In Ignite UI for Blazor, you can now annotate the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) with slice, strip, and point annotations at runtime using the 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 [`Toolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Toolbar). +This is directly integrated with the available tools of the [`Toolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Toolbar). Blazor user-annotation-create @@ -195,7 +195,7 @@ Ability for axis annotations to automatically detect collisions and truncate to - The merging can be configured on the grid level to apply either: - `OnSort` - only when the column is sorted. - `Always` - always, regardless of data operations. - The default [`CellMergeMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellMergeMode) is `OnSort`. + The default [`CellMergeMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_CellMergeMode) is `OnSort`. ```razor @@ -230,7 +230,7 @@ col.Pinned = true; - **Other Improvements** - A column's `MinWidth` and `MaxWidth` constrain the user-specified width so that it cannot go outside their bounds. - - The [`PagingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PagingMode) property can now be set as simple strings "local" and "remote" and does not require importing the `GridPagingMode` enum. + - The [`PagingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_PagingMode) property can now be set as simple strings "local" and "remote" and does not require importing the `GridPagingMode` enum. ### General @@ -585,7 +585,7 @@ The following properties of these components are now nullable: ### IgniteUI.Blazor - **All Grids** - - Allow applying initial filtering through [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilteringExpressionsTree) property + - Allow applying initial filtering through [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FilteringExpressionsTree) property ### Bug Fixes @@ -617,7 +617,7 @@ The following properties of these components are now nullable: #### Toolbar -- Added new `GroupHeaderTextStyle` property to [`Toolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Toolbar) and [`IgbToolPanel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolPanel.html). If set, it will apply to all [`IgbToolActionGroupHeader`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolActionGroupHeader.html) actions. +- Added new `GroupHeaderTextStyle` property to [`Toolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Toolbar) and [`IgbToolPanel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolPanel.html). If set, it will apply to all [`IgbToolActionGroupHeader`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolActionGroupHeader.html) actions. - Added new property on [`IgbToolAction`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolAction.html) called [`TitleHorizontalAlignment`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolAction.html#IgniteUI_Blazor_Controls_IgbToolAction_TitleHorizontalAlignment) which controls the horizontal alignment of the title text. - Added new property on [`IgbToolActionSubPanel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolActionSubPanel.html) called [`ItemSpacing`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolActionSubPanel.html#IgniteUI_Blazor_Controls_IgbToolActionSubPanel_ItemSpacing) which controls the spacing between items inside the panel. @@ -685,7 +685,7 @@ The following table lists the bug fixes made for the Ignite UI for Blazor toolse - New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.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. -- [`Toolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Toolbar) +- [`Toolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Toolbar) - 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. @@ -734,7 +734,7 @@ The following table lists the bug fixes made for the Ignite UI for Blazor toolse - Removed [`IgbPositionStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPositionStrategy.html) property. - [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html) - Removed old named `Maxlength` and `Minlength` properties. Use [`MaxLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_MaxLength) and [`MinLength`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_MinLength). - - Removed old named `Readonly` and `Inputmode` properties. Use [`ReadOnly`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInputBase.html#IgniteUI_Blazor_Controls_IgbInputBase_ReadOnly) and [`InputMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_InputMode). + - Removed old named `Readonly` and `Inputmode` properties. Use [`ReadOnly`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMaskInput.html#IgniteUI_Blazor_Controls_IgbMaskInput_ReadOnly) and [`InputMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_InputMode). - Changed [`InputMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_InputMode) type also to `string`. - [`IgbRadio`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadio.html) - Changed `Change` event argument type from [`IgbComponentBoolValueChangedEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbComponentBoolValueChangedEventArgs.html) to [`IgbRadioChangeEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadioChangeEventArgs.html). @@ -762,14 +762,14 @@ The following table lists the bug fixes made for the Ignite UI for Blazor toolse - **All Grids** - [`IgbRowIsland`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowIsland.html) - Removed `DisplayDensity` deprecated property. - - Renamed [`Columns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowIsland.html#IgniteUI_Blazor_Controls_IgbRowIsland_Columns), `ActualColumns`, `ContentColumns` properties to [`ColumnList`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowIsland.html#IgniteUI_Blazor_Controls_IgbRowIsland_ColumnList), [`ActualColumnList`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ActualColumnList) and `ContentColumnList`. Recommended to use the new `GetColumns` method instead. + - Renamed [`Columns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowIsland.html#IgniteUI_Blazor_Controls_IgbRowIsland_Columns), `ActualColumns`, `ContentColumns` properties to [`ColumnList`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowIsland.html#IgniteUI_Blazor_Controls_IgbRowIsland_ColumnList), [`ActualColumnList`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ActualColumnList) and `ContentColumnList`. Recommended to use the new `GetColumns` method instead. - Renamed `RowDelete` and `RowAdd` event argument type to [`IgbRowDataCancelableEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowDataCancelableEventArgs.html). - Renamed `ContextMenu` event argument type to [`IgbGridContextMenuEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridContextMenuEventArgs.html). - - Removed [`IgbGridEditEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridEditEventArgs.html), [`IgbGridEditDoneEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridEditDoneEventArgs.html), [`IgbPinRowEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPinRowEventArgs.html) events `RowID` and [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) properties. Use `RowKey` instead. + - Removed [`IgbGridEditEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridEditEventArgs.html), [`IgbGridEditDoneEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridEditDoneEventArgs.html), [`IgbPinRowEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPinRowEventArgs.html) events `RowID` and [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_PrimaryKey) properties. Use `RowKey` instead. - [`IgbPivotGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPivotGrid.html) - removed `ShowPivotConfigurationUI` property. Use [`PivotUI`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPivotGrid.html#IgniteUI_Blazor_Controls_IgbPivotGrid_PivotUI) and set inside it the new `ShowConfiguration` option. - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) - - Removed `Movable` property. Use Grid's [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Moving) property now. + - Removed `Movable` property. Use Grid's [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Moving) property now. - Removed `ColumnChildren` property. Use [`ChildColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_ChildColumns) instead. - [`IgbColumnGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html) - Removed [`Children`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_Children) property. Use `ChildColumns` instead. @@ -793,7 +793,7 @@ The type of Values from [`PivotConfiguration`](https://www.infragistics.com/blaz ### IgniteUI.Blazor (Charts) -- [Data Legend Grouping](charts/features/chart-data-legend.md#blazor-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#blazor-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the [`DataLegendGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataLegendGroup) property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. +- [Data Legend Grouping](charts/features/chart-data-legend.md#blazor-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#blazor-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property `GroupRowVisible` toggles grouping with each series opting in can assign group text via the [`DataLegendGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCrosshairLayer.html#IgniteUI_Blazor_Controls_IgbCrosshairLayer_DataLegendGroup) property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users. - [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) and [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html). Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and [`SelectedSeriesItems`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_SelectedSeriesItems) are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection. @@ -801,9 +801,9 @@ The type of Values from [`PivotConfiguration`](https://www.infragistics.com/blaz - [Treemap Highlighting](charts/types/treemap-chart.md#blazor-treemap-highlighting) - Now exposes a [`HighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_HighlightingMode) property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the [`HighlightingTransitionDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_HighlightingTransitionDuration) property. -- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#blazor-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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_HighlightedDataSource). Can be toggled via [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_HighlightedValuesDisplayMode) and styled via `FillBrushes`. +- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#blazor-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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_HighlightedDataSource). Can be toggled via [`HighlightedValuesDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_HighlightedValuesDisplayMode) and styled via `FillBrushes`. -- [`Toolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Toolbar) - New `IsHighlighted` option for ToolAction for outlining a border around specific tools of choice. +- [`Toolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Toolbar) - New `IsHighlighted` option for ToolAction for outlining a border around specific tools of choice. ### IgniteUI.Blazor (Gauges) @@ -814,7 +814,7 @@ The type of Values from [`PivotConfiguration`](https://www.infragistics.com/blaz ### IgniteUI.Blazor (Charts) -Data Filtering via the [`InitialFilter`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_InitialFilter) property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. +Data Filtering via the [`InitialFilter`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_InitialFilter) property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data. - [`IgbBulletGraph`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html) - The Performance bar will now reflect a difference between the value and new [`HighlightValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_HighlightValue) when the [`HighlightValueDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBulletGraph.html#IgniteUI_Blazor_Controls_IgbBulletGraph_HighlightValueDisplayMode) is applied to the 'Overlay' setting. The highlight value will show a filtered/subset 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. @@ -914,7 +914,7 @@ Data Filtering via the [`InitialFilter`](https://www.infragistics.com/blazor/doc ### IgniteUI.Blazor (Charts) -- [ValueLayer](charts/features/chart-overlays.md#blazor-value-layer) - A new series type named the [`IgbValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html) is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) and [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) by adding to the new [`ValueLines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ValueLines) collection. +- [ValueLayer](charts/features/chart-overlays.md#blazor-value-layer) - A new series type named the [`IgbValueLayer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueLayer.html) is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) and [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) by adding to the new [`ValueLines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_ValueLines) collection. - It is now possible to apply a **dash array** to the different parts of the series of the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html). You can apply this to the [series](charts/types/line-chart.md#blazor-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#blazor-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#blazor-chart-trendlines-dash-array-example) of the series plotted in the chart. @@ -931,7 +931,7 @@ Data Filtering via the [`InitialFilter`](https://www.infragistics.com/blazor/doc ### IgniteUI.Blazor (Data Grid) -- A new argument [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) has been introduced to [`IgbRowDataEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowDataEventArgs.html) from [`Detail`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowDataEventArgs.html#IgniteUI_Blazor_Controls_IgbRowDataEventArgs_Detail), and part of the event arguments that are emitted by the `RowAdded` and `RowDeleted` events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to null. +- A new argument [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_PrimaryKey) has been introduced to [`IgbRowDataEventArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowDataEventArgs.html) from [`Detail`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowDataEventArgs.html#IgniteUI_Blazor_Controls_IgbRowDataEventArgs_Detail), and part of the event arguments that are emitted by the `RowAdded` and `RowDeleted` events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to null. - `RowSelectionChanging` event arguments are changed. Now, the `OldSelection`, `NewSelection`, `Added` and `Removed` collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted. - When the grid is working with remote data and a primary key has been set, the selected rows that are not currently part of the grid view will be emitted for a partial row data object. - When selected row is deleted from the grid component `RowSelectionChanging` event will no longer be emitted. @@ -997,7 +997,7 @@ Added significant improvements to default behaviors, and refined the Category Ch - GroupSortDescriptions > [!Note] -> [Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using [`IncludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_IncludedProperties) | [`ExcludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ExcludedProperties). These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. +> [Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using [`IncludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_IncludedProperties) | [`ExcludedProperties`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_ExcludedProperties). These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection. ### IgniteUI.Blazor (Data Grid) @@ -1027,7 +1027,7 @@ Added significant improvements to default behaviors, and refined the Category Ch ### IgniteUI.Blazor (Data Grid) -Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data. +Added New Feature - `Row Paging` which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data. ### IgniteUI.Blazor (Dock Manager) @@ -1100,11 +1100,11 @@ This release introduces a few improvements and simplifications to visual design - Added crosshair annotations by default in [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) and [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) - Added final value annotation by default in [`IgbFinancialChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbFinancialChart.html) - Added new properties in Category Chart and Financial Chart: - - [`CrosshairsLineThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_CrosshairsLineThickness) and other properties for customizing crosshairs lines - - [`CrosshairsAnnotationXAxisBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_CrosshairsAnnotationXAxisBackground) and other properties for customizing crosshairs annotations - - [`FinalValueAnnotationsBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_FinalValueAnnotationsBackground) and other properties for customizing final value annotations - - [`AreaFillOpacity`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_AreaFillOpacity) that allow changing opacity of series fill (e.g. Area chart) - - [`MarkerThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerThickness) that allows changing thickness of markers + - [`CrosshairsLineThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_CrosshairsLineThickness) and other properties for customizing crosshairs lines + - [`CrosshairsAnnotationXAxisBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_CrosshairsAnnotationXAxisBackground) and other properties for customizing crosshairs annotations + - [`FinalValueAnnotationsBackground`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_FinalValueAnnotationsBackground) and other properties for customizing final value annotations + - [`AreaFillOpacity`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_AreaFillOpacity) that allow changing opacity of series fill (e.g. Area chart) + - [`MarkerThickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_MarkerThickness) that allows changing thickness of markers - Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map: - [`MarkerAutomaticBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_MarkerAutomaticBehavior) that allows which marker type is assigned to multiple series in the same chart - [`LegendItemBadgeShape`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_LegendItemBadgeShape) for setting badge shape of all series represented in a legend @@ -1124,10 +1124,10 @@ This release introduces a few improvements and simplifications to visual design ### IgniteUI.Blazor (Data Grid) - New Features Added: - - [Filter Row](grids/data-grid/column-filtering.md) - - [Load/Save Layout Customizations](grids/data-grid/load-save-layout.md) - - [GroupBy Area for column grouping](grids/data-grid/row-grouping.md) - - [Cell Merging](grids/data-grid/cell-merging.md) + - `Filter Row` + - `Load/Save Layout Customizations` + - `GroupBy Area for column grouping` + - `Cell Merging` - New API: - Added `SelectionChanged` event. Used to detect changes on selection interactions e.g. Multiple row selection. @@ -1148,20 +1148,20 @@ This release introduces several new and improved visual design and configuration - Changed Scatter High Density series’ colors for heat max property from #ee5879 to #ee5879 - Changed Financial/Waterfall series’ `NegativeBrush` and `NegativeOutline` properties from #C62828 to #ee5879 - Changed marker's thickness to 2px from 1px -- Changed marker's fill to match the marker's outline for [`IgbPointSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPointSeries.html), [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html), [`IgbScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSeries.html), [`IgbPolarScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarScatterSeries.html). You can use set [`MarkerFillMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerFillMode) property to Normal to undo this change +- Changed marker's fill to match the marker's outline for [`IgbPointSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPointSeries.html), [`IgbBubbleSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBubbleSeries.html), [`IgbScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterSeries.html), [`IgbPolarScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarScatterSeries.html). You can use set [`MarkerFillMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_MarkerFillMode) property to Normal to undo this change - Compressed labelling for the [`IgbTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTimeXAxis.html) and [`IgbOrdinalTimeXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbOrdinalTimeXAxis.html) - New Marker Properties: - - series.[`MarkerFillMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerFillMode) - Can be set to `MatchMarkerOutline` so the marker depends on the outline - - series.[`MarkerFillOpacity`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerFillOpacity) - Can be set to a value 0 to 1 - - series.[`MarkerOutlineMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_MarkerOutlineMode) - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color + - series.[`MarkerFillMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_MarkerFillMode) - Can be set to `MatchMarkerOutline` so the marker depends on the outline + - series.[`MarkerFillOpacity`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_MarkerFillOpacity) - Can be set to a value 0 to 1 + - series.[`MarkerOutlineMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_MarkerOutlineMode) - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color - New Series Property: - - series.[`OutlineMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_OutlineMode) - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series -- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the [`ComputedPlotAreaMarginMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ComputedPlotAreaMarginMode), listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart: - - chart.[`PlotAreaMarginLeft`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_PlotAreaMarginLeft) - - chart.[`PlotAreaMarginTop`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_PlotAreaMarginTop) - - chart.[`PlotAreaMarginRight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_PlotAreaMarginRight) - - chart.[`PlotAreaMarginBottom`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_PlotAreaMarginBottom) - - chart.[`ComputedPlotAreaMarginMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDomainChart.html#IgniteUI_Blazor_Controls_IgbDomainChart_ComputedPlotAreaMarginMode) + - series.[`OutlineMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_OutlineMode) - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series +- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the [`ComputedPlotAreaMarginMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_ComputedPlotAreaMarginMode), listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart: + - chart.[`PlotAreaMarginLeft`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_PlotAreaMarginLeft) + - chart.[`PlotAreaMarginTop`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_PlotAreaMarginTop) + - chart.[`PlotAreaMarginRight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_PlotAreaMarginRight) + - chart.[`PlotAreaMarginBottom`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_PlotAreaMarginBottom) + - chart.[`ComputedPlotAreaMarginMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbXYChart.html#IgniteUI_Blazor_Controls_IgbXYChart_ComputedPlotAreaMarginMode) - New Highlighting Properties - chart.[`HighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_HighlightingMode) - Sets whether hovered or non-hovered series to fade, brighten - chart.[`HighlightingBehavior`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_HighlightingBehavior) - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item @@ -1206,7 +1206,7 @@ for example: - Added `EditModeClickAction` property - By default double-clicking is required to enter edit mode. This can be set to `SingleClick` to allow for edit mode to occur when selecting a new cell. - Added `EnterKeyBehaviors` property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right) - Added `EnterKeyBehaviorAfterEdit` property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left) -- Added [`SelectAllRows`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SelectAllRows) - method. +- Added [`SelectAllRows`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_SelectAllRows) - method. - Added Row Range Selection - With `GridSelectionMode` property set to MultipleRow the following new functionality is now included: - Click and drag to select rows - SHIFT and click to select multiple rows. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-getting-started.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-getting-started.md index b04a1c704..623109ed4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-getting-started.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/general-getting-started.md @@ -1,17 +1,19 @@ --- title: Getting Started | Ignite UI for Blazor | Infragistics -_description: Use Infragistics' Blazor components to create apps and improve data visualization with the world’s fastest, virtualized, real-time Blazor data grid and streaming financial and business and financial charts. +_description: Install Ignite UI for Blazor and render your first component. Covers CLI scaffolding, manual package setup, and AI tooling with Agent Skills and MCP servers. _keywords: Ignite UI for Blazor, Infragistics, Getting Started -_language: en -mentionedTypes: ["XamBulletGraph", "IgrGrid"] +last_updated: "2025-04-06" +mentionedTypes: [] _tocName: Blazor Server App --- -## Getting Started With Ignite UI for Blazor + + +# Getting Started With Ignite UI for Blazor This topic provides step-by-step instructions for creating Blazor Server applications with Ignite UI for Blazor using Visual Studio. -### Create a New Blazor Server Project +## Create a New Blazor Server Project The steps below describe how to create a new Blazor Server project. If you want to add Ignite UI for Blazor to an existing application, go to the [**Install Ignite UI for Blazor Package**](#install-ignite-ui-for-blazor) section. @@ -27,7 +29,7 @@ Specify additional project options, and click **Create** new-blazor-info-server -### Install Ignite UI for Blazor +## Install Ignite UI for Blazor Ignite UI for Blazor is delivered via NuGet packages. To use the Ignite UI for Blazor components in your Blazor applications, you must first install the appropriate NuGet packages. @@ -35,9 +37,9 @@ In Visual Studio, open the NuGet package manager by selecting **Tools** → **Nu For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](general-installing-blazor.md) topic. -### Register Ignite UI for Blazor +## Register Ignite UI for Blazor -#### .NET 6 and Later Applications +### .NET 6 and Later Applications 1 - Open the **Program.cs** file and register the Ignite UI for Blazor Service by calling **builder.Services.AddIgniteUIBlazor** function: @@ -74,7 +76,7 @@ var app = builder.Build(); ``` -#### .NET 5 Applications +### .NET 5 Applications 1 - Open the **Startup.cs** file and register the Ignite UI for Blazor Service by calling **services.AddIgniteUIBlazor()**: @@ -107,7 +109,7 @@ public void ConfigureServices(IServiceCollection services) ``` -### Add Ignite UI for Blazor Component +## Add Ignite UI for Blazor Component Add an Ignite UI for Blazor component to your razor page: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-csv.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-csv.md index 306cc98a5..859091358 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-csv.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-csv.md @@ -84,7 +84,6 @@ With the Ignite UI for Blazor map component, you can plot geographic data loaded } ``` -
## Data Example diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-json-points.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-json-points.md index 6dd128a20..5c705d88b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-json-points.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-json-points.md @@ -63,7 +63,6 @@ With the Ignite UI for Blazor map, you can plot geographic data loaded from vari } ``` -
## Data Example diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md index 0e25ed0c4..9a6208187 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md @@ -11,7 +11,7 @@ _premium: true # Blazor Binding Geographic Data Models -The Ignite UI for Blazor map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) property of geographic series is used for the purpose of binding to data models. This property can be bound an array of custom objects. +The Ignite UI for Blazor map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_DataSource) property of geographic series is used for the purpose of binding to data models. This property can be bound an array of custom objects. ## Blazor Binding Geographic Data Models Example @@ -94,7 +94,6 @@ The Ignite UI for Blazor map component is designed to display geo-spatial data f } ``` -
The following table summarized data structures required for each type of geographic series: @@ -104,10 +103,10 @@ The following table summarized data structures required for each type of geograp | [`IgbGeographicSymbolSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html) | [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicSymbolSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicSymbolSeries_LatitudeMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates | | [`IgbGeographicHighDensityScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicHighDensityScatterSeries.html) | [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicHighDensityScatterSeries.html#IgniteUI_Blazor_Controls_IgbGeographicHighDensityScatterSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicHighDensityScatterSeries.html#IgniteUI_Blazor_Controls_IgbGeographicHighDensityScatterSeries_LatitudeMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates | | [`IgbGeographicProportionalSymbolSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicProportionalSymbolSeries.html) | [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicProportionalSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicProportionalSymbolSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicProportionalSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicProportionalSymbolSeries_LatitudeMemberPath), [`RadiusMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicProportionalSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicProportionalSymbolSeries_RadiusMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols | -| [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) | [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LatitudeMemberPath), [`ColorMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_ColorMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | -| [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html) | [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LatitudeMemberPath), [`ValueMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_ValueMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | -|[`IgbGeographicShapeSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeries.html)|[`ShapeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeriesBase.html#IgniteUI_Blazor_Controls_IgbGeographicShapeSeriesBase_ShapeMemberPath)|Specifies the name of data column of [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | -|[`IgbGeographicPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicPolylineSeries.html)|[`ShapeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeriesBase.html#IgniteUI_Blazor_Controls_IgbGeographicShapeSeriesBase_ShapeMemberPath)|Specifies the name of data column of [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | +| [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) | [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_LatitudeMemberPath), [`ColorMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_ColorMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +| [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html) | [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_LatitudeMemberPath), [`ValueMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_ValueMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +|[`IgbGeographicShapeSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeries.html)|[`ShapeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeries.html#IgniteUI_Blazor_Controls_IgbGeographicShapeSeries_ShapeMemberPath)|Specifies the name of data column of [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_DataSource) items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | +|[`IgbGeographicPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicPolylineSeries.html)|[`ShapeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeries.html#IgniteUI_Blazor_Controls_IgbGeographicShapeSeries_ShapeMemberPath)|Specifies the name of data column of [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_DataSource) items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | ## Code Snippet @@ -217,7 +216,7 @@ The following code shows how to bind the [`IgbGeographicSymbolSeries`](https://w - [`IgbGeographicProportionalSymbolSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicProportionalSymbolSeries.html) - [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) - [`IgbGeographicSymbolSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html) -- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_DataSource) - [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicSymbolSeries_LatitudeMemberPath) - [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicSymbolSeries_LongitudeMemberPath) - [`RadiusMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicProportionalSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicProportionalSymbolSeries_RadiusMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md index 37d8e6cb6..c15f4abe5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md @@ -58,7 +58,6 @@ In the Ignite UI for Blazor map, you can add multiple geographic series objects } ``` -
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 [`IgbShapeDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbShapeDataSource.html) class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about [`IgbShapeDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbShapeDataSource.html) object. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md index 24087c40e..317f67ded 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md @@ -48,7 +48,6 @@ In the Ignite UI for Blazor map, you can add multiple geographic series objects } ``` -
This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md index c7ac81280..a23e93102 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md @@ -44,7 +44,6 @@ The Ignite UI for Blazor map component, the [`IgbShapeDataSource`](https://www.i } ``` -
The following table explains properties of the [`IgbShapeDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbShapeDataSource.html) class for loading shape files. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-azure-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-azure-imagery.md index b834fe8ff..f50638424 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-azure-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-azure-imagery.md @@ -256,7 +256,6 @@ igc-dialog::part(content) { } ``` - ## Blazor Displaying Imagery from Azure Maps - Code Example The following code snippet shows how to display geographic imagery tiles from Azure Maps in Blazor [`IgbGeographicMap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html) using [`IgbAzureMapsImagery`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAzureMapsImagery.html) class. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-esri-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-esri-imagery.md index d33b2d737..0a9c2ba09 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-esri-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-esri-imagery.md @@ -57,7 +57,6 @@ The [`IgbArcGISOnlineMapImagery`](https://www.infragistics.com/blazor/docs/api/a } ``` -
## Code Snippet diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-osm-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-osm-imagery.md index 81b0fe637..59574fc74 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-osm-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-display-osm-imagery.md @@ -48,7 +48,6 @@ By the default, the Ignite UI for Blazor map component already displays geograph } ``` -
## Code Snippet diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-navigation.md index 22fa58515..015bddb90 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-navigation.md @@ -139,7 +139,6 @@ Navigation in the [`IgbGeographicMap`](https://www.infragistics.com/blazor/docs/ } ``` -
## Geographic Coordinates @@ -178,18 +177,18 @@ The following table summarizes properties that can be used in navigation of the | Property Name | Property Type | Description | |----------------|-----------------|---------------| -|[`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowRect)| Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. | -|[`WindowScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowScale)| number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowRect) property | -|[`WindowPositionHorizontal`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowPositionHorizontal)| number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowRect) property. | -|[`WindowPositionVertical`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowPositionVertical)| number | Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowRect) property. | -|[`ActualWindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_ActualWindowRect)| Rect | Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window. | -|[`ActualWindowScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_ActualWindowScale)| number | Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the [`ActualWindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_ActualWindowRect) property | -|[`ActualWindowPositionHorizontal`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_ActualWindowPositionHorizontal)| number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`ActualWindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_ActualWindowRect) property. | -|[`ActualWindowPositionVertical`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_ActualWindowPositionVertical)| number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`ActualWindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_ActualWindowRect) property. | +|[`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowRect)| Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. | +|[`WindowScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowScale)| number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowRect) property | +|[`WindowPositionHorizontal`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowPositionHorizontal)| number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowRect) property. | +|[`WindowPositionVertical`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowPositionVertical)| number | Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowRect) property. | +|[`ActualWindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_ActualWindowRect)| Rect | Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window. | +|[`ActualWindowScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_ActualWindowScale)| number | Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the [`ActualWindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_ActualWindowRect) property | +|[`ActualWindowPositionHorizontal`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_ActualWindowPositionHorizontal)| number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`ActualWindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_ActualWindowRect) property. | +|[`ActualWindowPositionVertical`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_ActualWindowPositionVertical)| number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`ActualWindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_ActualWindowRect) property. | ## API References -- [`ActualWindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_ActualWindowRect) -- [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowRect) +- [`ActualWindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_ActualWindowRect) +- [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowRect) - [`IgbGeographicMap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html) - [`Zoomable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_Zoomable) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-shape-files-reference.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-shape-files-reference.md index aae5d8408..0fd96e9e5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-shape-files-reference.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-shape-files-reference.md @@ -97,6 +97,6 @@ The following topics provide additional information related to this topic. - [`IgbGeographicMap`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html) - [`IgbGeographicPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicPolylineSeries.html) - [`IgbGeographicShapeSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeries.html) -- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeriesBase.html#IgniteUI_Blazor_Controls_IgbGeographicShapeSeriesBase_DataSource) - [`ShapeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeriesBase.html#IgniteUI_Blazor_Controls_IgbGeographicShapeSeriesBase_ShapeMemberPath) - [`IgbShapeDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbShapeDataSource.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md index 746e9117a..56e850857 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md @@ -55,15 +55,14 @@ In Blazor map component, you can use the [`IgbGeographicScatterAreaSeries`](http } ``` -
The [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) works a lot like the [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html) except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values. ## Data Requirements -Similar to other types of geographic series in the map component, the [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) has the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store a geographic longitude and latitude coordinates and one data column that stores a value associated with the geographic location. The [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LatitudeMemberPath), and [`ColorMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_ColorMemberPath) properties of the geographic series identify these data column. -The [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource for this property, especially when a large number of data items are present. +Similar to other types of geographic series in the map component, the [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) has the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_DataSource) property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store a geographic longitude and latitude coordinates and one data column that stores a value associated with the geographic location. The [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_LatitudeMemberPath), and [`ColorMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_ColorMemberPath) properties of the geographic series identify these data column. +The [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_TrianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource for this property, especially when a large number of data items are present. ## Data Binding @@ -71,14 +70,14 @@ The following table summarizes properties of GeographicScatterAreaSeries used fo | Property Name | Property Type | Description | |--------------|---------------| ---------------| -|[`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource)|any|The source of data items to perform triangulation on if the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource) property provides no triangulation data.| -|[`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LongitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource).| -|[`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LatitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource).| +|[`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_DataSource)|any|The source of data items to perform triangulation on if the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_TrianglesSource) property provides no triangulation data.| +|[`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_LongitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_DataSource).| +|[`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_LatitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_DataSource).| |[`ColorMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_ColorMemberPath)|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the [`ColorScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_ColorScale) property is set.| -|[`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource)|any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.| -|[`TriangleVertexMemberPath1`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TriangleVertexMemberPath1)|string|The name of the property of the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`TriangleVertexMemberPath2`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TriangleVertexMemberPath2)|string|The name of the property of the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`TriangleVertexMemberPath3`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TriangleVertexMemberPath3)|string|The name of the property of the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_TrianglesSource)|any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.| +|[`TriangleVertexMemberPath1`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_TriangleVertexMemberPath1)|string|The name of the property of the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_TrianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`TriangleVertexMemberPath2`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_TriangleVertexMemberPath2)|string|The name of the property of the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_TrianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`TriangleVertexMemberPath3`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_TriangleVertexMemberPath3)|string|The name of the property of the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_TrianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| ## Color Scale @@ -141,8 +140,8 @@ The following code shows how to bind the [`IgbGeographicScatterAreaSeries`](http - [`IgbCustomPaletteColorScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCustomPaletteColorScale.html) - [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html) - [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) -- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) -- [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LatitudeMemberPath) -- [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LongitudeMemberPath) -- [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_DataSource) +- [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_LatitudeMemberPath) +- [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_LongitudeMemberPath) +- [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html#IgniteUI_Blazor_Controls_IgbGeographicScatterAreaSeries_TrianglesSource) - `TriangulationSource` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-bubble-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-bubble-series.md index 0e7e81d43..75fcfcaa0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-bubble-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-bubble-series.md @@ -60,7 +60,6 @@ In Blazor map component, you can use the [`IgbGeographicProportionalSymbolSeries } ``` -
The demo above shows the [`IgbGeographicProportionalSymbolSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicProportionalSymbolSeries.html) series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-contour-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-contour-series.md index 42fb75de0..4cd2ec91c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-contour-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-contour-series.md @@ -55,15 +55,14 @@ In Blazor map component, you can use the [`IgbGeographicContourLineSeries`](http } ``` -
The [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html) works a lot like the [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale. ## Data Requirements -Similar to other types of geographic series in the map component, the [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html) has the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LatitudeMemberPath), and [`ValueMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_ValueMemberPath) properties of the geographic series. -The [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present. +Similar to other types of geographic series in the map component, the [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html) has the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_DataSource) property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_LongitudeMemberPath), [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_LatitudeMemberPath), and [`ValueMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_ValueMemberPath) properties of the geographic series. +The [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_TrianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present. ## Data Binding @@ -71,14 +70,14 @@ The following table summarizes properties of [`IgbGeographicContourLineSeries`]( | Property Name | Property Type | Description | |--------------|---------------| ---------------| -|[`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource)|any|The source of data items to perform triangulation on if the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource) property provides no triangulation data.| -|[`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LongitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource).| -|[`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LatitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to to the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource).| +|[`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_DataSource)|any|The source of data items to perform triangulation on if the [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_TrianglesSource) property provides no triangulation data.| +|[`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_LongitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_DataSource).| +|[`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_LatitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to to the [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_DataSource).| |[`ValueMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_ValueMemberPath)|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the [`FillScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_FillScale) property is set.| -|[`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource)|any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.| -|[`TriangleVertexMemberPath1`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TriangleVertexMemberPath1)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`TriangleVertexMemberPath2`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TriangleVertexMemberPath2)|string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`TriangleVertexMemberPath3`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TriangleVertexMemberPath3)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_TrianglesSource)|any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.| +|[`TriangleVertexMemberPath1`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_TriangleVertexMemberPath1)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`TriangleVertexMemberPath2`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_TriangleVertexMemberPath2)|string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`TriangleVertexMemberPath3`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_TriangleVertexMemberPath3)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| ## Contour Fill Scale @@ -88,7 +87,7 @@ The following table list properties of the CustomPaletteColorScale affecting the | Property Name | Property Type | Description | |--------------|---------------| ---------------| -|[`Brushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_Brushes)|BrushCollection|Gets or sets the collection of brushes for filling contours of the [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html)| +|[`Brushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_Brushes)|BrushCollection|Gets or sets the collection of brushes for filling contours of the [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html)| |[`MaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCustomPaletteColorScale.html#IgniteUI_Blazor_Controls_IgbCustomPaletteColorScale_MaximumValue)|double|The highest value to assign a brush in a fill scale.| |[`MinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCustomPaletteColorScale.html#IgniteUI_Blazor_Controls_IgbCustomPaletteColorScale_MinimumValue)|double|The lowest value to assign a brush in a fill scale.| @@ -137,10 +136,10 @@ The following code shows how to bind the [`IgbGeographicContourLineSeries`](http - [`FillScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_FillScale) - [`IgbGeographicContourLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html) - [`IgbGeographicScatterAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicScatterAreaSeries.html) -- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) -- [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LatitudeMemberPath) -- [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_LongitudeMemberPath) -- [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicXYTriangulatingSeries.html#IgniteUI_Blazor_Controls_IgbGeographicXYTriangulatingSeries_TrianglesSource) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_DataSource) +- [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_LatitudeMemberPath) +- [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_LongitudeMemberPath) +- [`TrianglesSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_TrianglesSource) - `TriangulationSource` - [`IgbValueBrushScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbValueBrushScale.html) - [`ValueMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicContourLineSeries.html#IgniteUI_Blazor_Controls_IgbGeographicContourLineSeries_ValueMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-density-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-density-series.md index e6825e8a5..b7e4b85d0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-density-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-density-series.md @@ -71,7 +71,6 @@ In Blazor map component, you can use the [`IgbGeographicHighDensityScatterSeries } ``` -
The demo above shows the [`IgbGeographicHighDensityScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicHighDensityScatterSeries.html) series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-symbol-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-symbol-series.md index 258f59ae4..c3b0b65b6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-symbol-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-symbol-series.md @@ -50,7 +50,6 @@ In Blazor map component, you can use the [`IgbGeographicSymbolSeries`](https://w } ``` -
## Data Requirements diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polygon-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polygon-series.md index 2eb661651..edccb816c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polygon-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polygon-series.md @@ -46,7 +46,6 @@ In Blazor map component, you can use the [`IgbGeographicShapeSeries`](https://ww } ``` -
The [`IgbGeographicShapeSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeries.html) works a lot like the [`IgbGeographicPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicPolylineSeries.html) except that geo-spatial data is rendered with polygons instead of polylines. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md index c0d617ec8..2c767b94e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md @@ -54,7 +54,6 @@ In Blazor map component, you can use the [`IgbGeographicPolylineSeries`](https:/ } ``` -
The [`IgbGeographicPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicPolylineSeries.html) works a lot like the [`IgbGeographicShapeSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeries.html) except that geo-spatial data is rendered with polylines instead of polygons. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map.md index fb8caac5c..a82a4f918 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map.md @@ -61,7 +61,6 @@ The following sample demonstrates how display data in [`IgbGeographicMap`](https } ``` -
The map component allows you to render geographic imagery from Bing Maps™, and Open Street Maps. The map provides plotting of tens of thousands of data points, and updates them every few milliseconds so that the control can handle your real-time feeds. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-advanced-filtering.md index 5e7434e0b..87dc704d8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-advanced-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-advanced-filtering.md @@ -159,7 +159,6 @@ public class NwindData } ``` - ## Interaction In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. If no advanced filter is applied, you should start with creating a group of filtering conditions linked with **AND** or **OR**. After that, you can add filtering conditions or sub-groups. @@ -174,7 +173,7 @@ In order to filter the data once you are ready with creating the filtering condi ## Usage -To enable the advanced filtering, the [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowAdvancedFiltering) input property should be set to **true**. +To enable the advanced filtering, the [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AllowAdvancedFiltering) input property should be set to **true**. ```razor @@ -184,9 +183,9 @@ To enable the advanced filtering, the [`AllowAdvancedFiltering`](https://www.inf -The advanced filtering generates a [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilteringExpressionsTree) which is stored in the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AdvancedFilteringExpressionsTree) input property. You could use the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AdvancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. +The advanced filtering generates a [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FilteringExpressionsTree) which is stored in the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AdvancedFilteringExpressionsTree) input property. You could use the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AdvancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. -In case you don't want to show the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) toolbar, you could use the [`OpenAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_OpenAdvancedFilteringDialog) and [`CloseAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CloseAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. +In case you don't want to show the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) toolbar, you could use the [`OpenAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_OpenAdvancedFilteringDialog) and [`CloseAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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 [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). Both filtering user interfaces will work independently of one another. The final filtered result in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) is the intersection between the results of the two filters. @@ -350,7 +349,6 @@ public class NwindData } ``` - ## API References - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-editing.md index ad2043c1d..a47cb779d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-editing.md @@ -164,7 +164,6 @@ public class NwindData } ``` - ## Cell Editing ### Editing through UI @@ -204,7 +203,7 @@ this.grid.UpdateCell(newValue, rowID, 'ReorderLevel') -Another way to update cell is directly through [`Update`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowDirective.html#IgniteUI_Blazor_Controls_IgbRowDirective_Update) method of `Cell`: +Another way to update cell is directly through [`Update`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridRow.html#IgniteUI_Blazor_Controls_IgbGridRow_Update) method of `Cell`: @@ -383,7 +382,6 @@ public class RoleplayDataStats } ``` - ### Grid Excel Style Editing @@ -393,9 +391,6 @@ Using Excel Style Editing allows the user to navigate trough the cells just as h Implementing this custom functionality can be done by utilizing the events of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). First we hook up to the grid's keydown events, and from there we can implement two functionalities: - Constant edit mode - - - - ENTER/SHIFT + ENTER navigation Key parts of finding the next eligible index would be: @@ -406,7 +401,6 @@ Please check the full sample for further reference: - Main benefits of the above approach include: - Constant edit mode: typing while a cell is selected will immediately enter edit mode with the value typed, replacing the existing one @@ -464,7 +458,7 @@ Updating data in the Grid is achieved through `UpdateRow` and `UpdateCell` metho ### Deleting data from the Grid -Please keep in mind that `DeleteRow` method will remove the specified row only if a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) is defined. +Please keep in mind that `DeleteRow` method will remove the specified row only if a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_PrimaryKey) is defined. @@ -513,7 +507,7 @@ If the value entered in a cell under the **Units On Order** column is larger tha -If the value entered in a cell under the **Age** column is below 18 or the value in the **HireDate** column is in the future, the editing will be cancelled and the user will be alerted to the cancellation. + @@ -630,7 +624,6 @@ public class NwindData } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -790,13 +783,9 @@ public class NwindData } ``` - ## API References - [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) - - - - [`IgbDatePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-merging.md index 734e9c2e2..498bab54a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-merging.md @@ -132,7 +132,6 @@ public class InvoicesData } ``` - ## Enabling and Using Cell Merging diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-selection.md index 0b7545f96..2dc5f0dff 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-cell-selection.md @@ -169,7 +169,6 @@ public class NwindData } ``` - ## Selection Types ### Grid Multiple-Cell Selection @@ -322,18 +321,17 @@ How to select cells: } ``` - ### Grid Single Selection -When you set the [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) to **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. +When you set the [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_CellSelection) to **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. > When single cell is selected [`Selected`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_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` event is emitted. ### Grid None Selection -If you want to disable cell selection you can just set [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) to **none**. 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. +If you want to disable cell selection you can just set [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_CellSelection) to **none**. 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 @@ -362,7 +360,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Select range -[`SelectRange`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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. @@ -391,7 +389,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Clear cell selection -[`ClearCellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClearCellSelection) will clear the current cell selection. +[`ClearCellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ClearCellSelection) will clear the current cell selection. ```razor @code { @@ -428,7 +426,7 @@ The multi-cell selection is index based (DOM elements selection). - `Filtering` - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells. - `Resizing` - On column resizing selected cells will not be cleared. - `Hiding` - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected. -- [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Pinning) - Selected cell will not be cleared. Same as hiding +- [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Pinning) - Selected cell will not be cleared. Same as hiding - [`GroupBy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_GroupBy) - On column grouping selected cells will not be cleared. @@ -547,7 +545,6 @@ public class CustomersData } ``` - ## API References - [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-clipboard-interactions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-clipboard-interactions.md index d13bb3c8d..3a583e4b7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-clipboard-interactions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-clipboard-interactions.md @@ -141,7 +141,6 @@ public class NwindData } ``` - ## Functionality Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are: @@ -168,7 +167,7 @@ Copy behavior is working with the default interaction defined by the browser and ## API Usage -We expose [`ClipboardOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClipboardOptions) property, which handles the following options: +We expose [`ClipboardOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ClipboardOptions) property, which handles the following options: - `Enabled` Enables/disables copying of selected cells. - `CopyHeaders` Include the associated headers when copying. @@ -178,7 +177,7 @@ We expose [`ClipboardOptions`](https://www.infragistics.com/blazor/docs/api/api/ > [!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` Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`ClipboardOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClipboardOptions). +- `GridCopy` Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`ClipboardOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ClipboardOptions). ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-collapsible-column-groups.md index 20042b7ff..12ab48370 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-collapsible-column-groups.md @@ -210,7 +210,6 @@ public class InvoicesData } ``` - ## Setup To get started with the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) and the **Collapsible multi-column headers** feature, first you need to install Ignite UI for Blazor by typing the following command: @@ -229,7 +228,7 @@ Also, we strongly suggest that you take a brief look at [multi-column headers](m In order to define a column group as collapsible, you need to set the [`Collapsible`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_Collapsible) property on the [`IgbColumnGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html) to **true**. -You need to define the property [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. +You need to define the property [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. Let's see the markup below: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-hiding.md index fb3fad240..d2e118d34 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-hiding.md @@ -178,7 +178,6 @@ public class CustomersData } ``` - ## Grid Setup Let's start by creating our [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) and binding it to our data. We will also enable both filtering and sorting for the columns. @@ -481,7 +480,6 @@ public class CustomersData } ``` - ## API References In this article we learned how to use the built-in column hiding UI in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html)'s toolbar. The column hiding UI has a few more APIs to explore, which are listed below. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-moving.md index ca1ca11e3..4e2658567 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-moving.md @@ -284,10 +284,9 @@ public class FinancialDataAll } ``` - ## Overview -**Column moving** feature is enabled on a per-grid level, meaning that the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) could have either movable or immovable columns. This is done via the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Moving) input of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). +**Column moving** feature is enabled on a per-grid level, meaning that the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) could have either movable or immovable columns. This is done via the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Moving) input of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). @@ -301,7 +300,7 @@ public class FinancialDataAll In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: -[`MoveColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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` value), which determines whether to place the column before or after the target column. +[`MoveColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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` value), which determines whether to place the column before or after the target column. ```razor public async void HandleClick() @@ -322,7 +321,7 @@ In addition to the drag and drop functionality, the Column Moving feature also p } ``` -Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Moving) property to true. +Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Moving) property to true. ## Events @@ -618,7 +617,6 @@ public class FinancialDataAll } ``` - ## API References - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-pinning.md index 88b72a4ee..be73e72d2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-pinning.md @@ -168,10 +168,9 @@ public class CustomersDataLocal } ``` - ## Column Pinning API -Column pinning is controlled through the [`Pinned`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowDirective.html#IgniteUI_Blazor_Controls_IgbRowDirective_Pinned) property of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html). Pinned columns are rendered on the left side of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) body. +Column pinning is controlled through the [`Pinned`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridRow.html#IgniteUI_Blazor_Controls_IgbGridRow_Pinned) property of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html). Pinned columns are rendered on the left side of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) body. ```razor @@ -183,7 +182,7 @@ Column pinning is controlled through the [`Pinned`](https://www.infragistics.com -You may also use the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html)'s [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PinColumn) or [`UnpinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_UnpinColumn) methods of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) to pin or unpin columns by their field name: +You may also use the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html)'s [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_PinColumn) or [`UnpinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_UnpinColumn) methods of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) to pin or unpin columns by their field name: @@ -204,7 +203,7 @@ A column is pinned to the right of the rightmost pinned column. Changing the ord ## Pinning Position -You can change the column pinning position via the [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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. ```razor @@ -419,7 +418,6 @@ public class AthletesDataExtended } ``` - ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. @@ -641,7 +639,6 @@ public class CustomersDataLocal } ``` - ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. @@ -862,7 +859,6 @@ public class CustomersData } ``` - ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) 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 [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). @@ -1016,7 +1012,6 @@ public class CustomersData } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-resizing.md index 8f8c15561..e2d3ee36e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-resizing.md @@ -152,7 +152,6 @@ public class CustomersData } ``` - **Column resizing** is also enabled per-column level, meaning that the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) can have a mix of resizable and non-resizable columns. This is done via the [`Resizable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Resizable) input of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html). ```razor @@ -406,7 +405,6 @@ public class CustomersData } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -528,7 +526,6 @@ public class AthletesData } ``` - ## API References - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-selection.md index 2bccaae62..12a950a72 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-selection.md @@ -13,7 +13,7 @@ _premium: true # Blazor Grid Column Selection Overview -The Blazor Grid Column Selection feature in Ignite UI for Blazor offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. +The Blazor Grid Column Selection feature in Ignite UI for Blazor offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ColumnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. ## Blazor Grid Column Selection Example @@ -162,10 +162,9 @@ public class CustomersData } ``` - ## Basic Usage -The column selection feature can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) input, which takes `GridSelectionMode` values. +The column selection feature can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ColumnSelection) input, which takes `GridSelectionMode` values. ## Interactions @@ -316,11 +315,10 @@ public class CustomersData } ``` - ## Keyboard Combinations > [!Note] -> The keyboard combinations are available only when the grid [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) input is set to `multiple`. +> The keyboard combinations are available only when the grid [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ColumnSelection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: @@ -467,7 +465,6 @@ public class CustomersData } ``` - ## API References The column selection UI has a few more APIs to explore, which are listed below. @@ -478,12 +475,12 @@ The column selection UI has a few more APIs to explore, which are listed below. [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) properties: -- [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) -- [`SelectedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SelectedColumns) -- [`SelectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SelectColumns) -- [`DeselectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_DeselectColumns) -- [`SelectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SelectAllColumns) -- [`DeselectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_DeselectAllColumns) +- [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ColumnSelection) +- [`SelectedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_SelectedColumns) +- [`SelectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_SelectColumns) +- [`DeselectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_DeselectColumns) +- [`SelectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_SelectAllColumns) +- [`DeselectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_DeselectAllColumns) [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-types.md index 75a384e8d..c6b00afe4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-column-types.md @@ -438,7 +438,6 @@ The Blazor Grid provides a default handling of **number**, **string**, **date**, //end data ``` - ## Blazor Grid Default Template @@ -453,7 +452,7 @@ This column [`DataType`](https://www.infragistics.com/blazor/docs/api/api/Ignite ### Number -If the [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) is set to **number**, the cell value will be formatted based on application or grid's [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Locale) settings, as well as when [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: +If the [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) is set to **number**, the cell value will be formatted based on application or grid's [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Locale) settings, as well as when [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_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 `.` @@ -468,7 +467,7 @@ If the [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Bl ### 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Locale) format or [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: +The appearance of the date portions will be set (e.g. day, month, year) based on [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Locale) format or [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: - **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc. - **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: @@ -560,7 +559,7 @@ Default template is using the value coming from the data as an image source to a ``` -When [`AutoGenerate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AutoGenerate) is used for the 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 [`AutoGenerate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AutoGenerate) is used for the 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. ### Currency @@ -666,7 +665,7 @@ igRegisterScript("CurrencyFormatter", (value) => { - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) - [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) - [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) -- [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Locale) +- [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_Locale) - [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-conditional-cell-styling.md index d8fd35f11..4f609c40c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-conditional-cell-styling.md @@ -19,33 +19,33 @@ The Ignite UI for Blazor Conditional Styling feature in Blazor Grid allows custo The [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) component in Ignite UI for Blazor provides two ways to **conditional styling of rows** based on custom rules. -- By setting [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) input on the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) component; -- By setting [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowStyles) input on the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) component; +- By setting [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowClasses) input on the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) component; +- By setting [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowStyles) input on the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) component; Further in this topic we will cover both of them in more details. ### Using Row Classes -You can conditionally style the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) rows by setting the [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) input and define custom rules. +You can conditionally style the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) rows by setting the [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowClasses) input and define custom rules. ```razor ``` -The [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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. ```razor igRegisterScript("RowClassesHandler", () => { return { - activeRow: (row) => row.index === 0 + activeRow: (row) => row.index % 2 === 0 }; }, true); ``` ```css .activeRow { - border: 2px solid #fc81b8; + border-top: 2px solid #fc81b8; border-left: 3px solid #e41c77; } ``` @@ -169,12 +169,11 @@ public class NwindData } ``` - ### Using Row Styles -The [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) control exposes the [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowStyles) property which allows conditional styling of the data rows. Similar to [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). +The [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) control exposes the [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowStyles) property which allows conditional styling of the data rows. Similar to [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). -> The callback signature for both [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowStyles) and [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) is: +> The callback signature for both [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowStyles) and [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowClasses) is: ```razor (row) => boolean @@ -415,7 +414,6 @@ public class FinancialDataAll } ``` - ## Grid Conditional Cell Styling ## Overview @@ -588,7 +586,6 @@ public class AthletesData } ``` - - By using the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) input [`CellStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_CellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. > The callback signature for both `cellStyles` and `cellClasses` is now changed to: @@ -750,7 +747,6 @@ public class AthletesData } ``` - ## 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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-editing.md index b4202e253..309637695 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-editing.md @@ -20,7 +20,7 @@ The Ignite UI for Blazor Cell Editing feature in Blazor Grid provides an easy wa ## Setup -In order to specify which edit mode should be enabled, the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) exposes the following boolean properties - [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable). +In order to specify which edit mode should be enabled, the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) exposes the following boolean properties - [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowEditable). The [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) property enables you to specify the following options: @@ -29,12 +29,12 @@ The [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazo > Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). -The [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) property enables you to specify the following options: +The [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowEditable) property enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled. This is the default value. - **true** - the row editing in the corresponding grid will be enabled. -In the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), if you set [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) property to true, and the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. +In the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), if you set [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowEditable) property to true, and the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. ## Export Grouped Data @@ -412,7 +411,6 @@ public class CustomersData } ``` - ## Export Grid with Frozen Column Headers By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` `FreezeHeaders` to `true`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-filtering.md index fc08eb784..adc5084b9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-filtering.md @@ -133,22 +133,21 @@ public class NwindData } ``` - ## Setup -In order to specify if filtering is enabled and which filtering mode should be used, the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) exposes the following properties - [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowFiltering), [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowAdvancedFiltering), [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilterMode) and [`Filterable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Filterable). +In order to specify if filtering is enabled and which filtering mode should be used, the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) exposes the following properties - [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AllowFiltering), [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AllowAdvancedFiltering), [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FilterMode) and [`Filterable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Filterable). -Property [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowFiltering) enables you to specify the following options: +Property [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AllowFiltering) enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled. This is the default value. - **true** - the filtering for the corresponding grid will be enabled. -Property [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowAdvancedFiltering) enables you to specify the following options: +Property [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AllowAdvancedFiltering) enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled. This is the default value. - **true** - the advanced filtering for the corresponding grid will be enabled. -Property [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilterMode) enables you to specify the following options: +Property [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FilterMode) enables you to specify the following options: - **QuickFilter** - a simplistic filtering UI. This is the default value. - **ExcelStyleFilter** - an Excel-like filtering UI. @@ -167,7 +166,7 @@ Property [`Filterable`](https://www.infragistics.com/blazor/docs/api/api/IgniteU -To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowAdvancedFiltering) input property to **true** +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AllowAdvancedFiltering) input property to **true** @@ -188,7 +187,7 @@ While some filtering conditions have been applied to a column, and the filter ro 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 [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the `IgnoreCase` and the initial `Condition` properties. -The filtering feature is enabled for the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) component by setting the [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowFiltering) input to **true**. The default [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Filterable) input to **false**. +The filtering feature is enabled for the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) component by setting the [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_AllowFiltering) input to **true**. The default [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Filterable) input to **false**. @@ -206,7 +205,7 @@ The filtering feature is enabled for the [`IgbGrid`](https://www.infragistics.co ## Initial filtered state -To set the initial filtering state of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), set the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilteringExpressionsTree) property to an array of [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilteringExpressionsTree) for each column to be filtered. +To set the initial filtering state of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), set the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FilteringExpressionsTree) property to an array of [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FilteringExpressionsTree) for each column to be filtered. ```razor @@ -485,7 +484,6 @@ public class NwindData } ``` - ## Known Limitations > [!Note] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md index 290ded23a..5c6a45731 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md @@ -11,7 +11,7 @@ _premium: true # Blazor Grid Group By -The Ignite UI for Blazor Group By behavior in Blazor IgbGrid creates grouped data rows based on the column values. The Group By in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection) property is set to multiple, clicking over the Group By row selector selects all records belonging to this group. +The Ignite UI for Blazor Group By behavior in Blazor IgbGrid creates grouped data rows based on the column values. The Group By in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowSelection) property is set to multiple, clicking over the Group By row selector selects all records belonging to this group. ## Blazor Grid Group By Example @@ -209,7 +209,6 @@ public class InvoicesWorldData } ``` - ## 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_GroupingExpressions) property of the grid. @@ -503,7 +502,6 @@ public class InvoicesWorldData } ``` - ## Group By With Summaries Integration between Group By and Summaries is described in the [Summaries](summaries.md#summaries-with-group-by) topic. @@ -765,7 +763,6 @@ public class InvoicesData } ``` - ## Known Limitations |Limitation|Description| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-icons.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-icons.md index f11304272..c8b114edb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-icons.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-icons.md @@ -308,7 +308,6 @@ public class NwindData } ``` - ## Internal Icons The following lists all internal icons. Alias is the name of the icon by which it can be referenced. Target Icon is the internal icon name and Target Collection is the collection in which the icon is registered internally. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-keyboard-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-keyboard-navigation.md index d8d8819b0..6139129f4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-keyboard-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-keyboard-navigation.md @@ -102,19 +102,11 @@ over Group Row - collapses the group. - - - - - ALT + → or ALT + ↓ - over Group Row - expands the group. - - - - - ALT + ← or ALT + ↑ - over Master Detail Row - collapses the details view. @@ -290,7 +282,6 @@ public class NwindData } ``` - ## Known Limitations |Limitation|Description| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/binding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-binding.md similarity index 90% rename from packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/binding.md rename to packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-binding.md index c92f70a58..42f7cc41f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/binding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-binding.md @@ -59,16 +59,14 @@ the column collection is reset, and a new data source is bound to the grid. - + @code { - private IgbGridLite productGrid; private IgbGridLite grid; private List users; private List products; private List data; - private List columns = new List(); private bool showingProducts = true; protected override void OnInitialized() @@ -94,19 +92,16 @@ the column collection is reset, and a new data source is bound to the grid. showingProducts = !showingProducts; if (showingProducts) { - this.columns = new List(); this.data = products.ToList(); } else { - this.columns = new List(); this.data = users.ToList(); } } } ``` - @@ -519,7 +518,6 @@ public class CustomersData } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -700,7 +698,6 @@ public class CustomersData } ``` - ## API References - [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-multi-row-layout.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-multi-row-layout.md index 67276f25b..addc77658 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-multi-row-layout.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-multi-row-layout.md @@ -250,7 +250,6 @@ public class CustomersData } ``` - The declaration of Multi-row Layout is achieved through [`IgbColumnLayout`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnLayout.html) component. Each [`IgbColumnLayout`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnLayout.html) component should be considered as a block, containing one or multiple [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) 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 [`IgbColumnLayout`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnLayout.html) blocks if the layout allows it. There should be no columns outside of those blocks and no usage of [`IgbColumnGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html) 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 [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) component exposes four [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html) properties to determine the location and span of each cell: @@ -529,7 +528,6 @@ public class CompanyData } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -739,7 +737,6 @@ public class CustomersData } ``` - ## API References - [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-paging.md index da102eb3d..ab1985955 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-paging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-paging.md @@ -157,7 +157,6 @@ public class AthletesData } ``` - ```css .gridSize { --ig-size: var(--ig-size-small); @@ -367,7 +366,6 @@ public class AthletesData } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-paste-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-paste-excel.md index d6d8b9270..81e115682 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-paste-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-paste-excel.md @@ -199,7 +199,6 @@ public class InvoicesData } ``` - ## Usage You should first bind to the grid's `rendered` event to create and manage a text area element: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-remote-data-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-remote-data-operations.md index 8289237d8..6bb5fefb0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-remote-data-operations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-remote-data-operations.md @@ -303,7 +303,6 @@ public class NwindModel } ``` - ## Remote Paging @@ -1735,7 +1734,6 @@ namespace Infragistics.Samples } ``` - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-actions.md index b9a798685..bf7cd0e4c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-actions.md @@ -19,7 +19,7 @@ The Ignite UI for Blazor Row Actions feature in Blazor Grid enables developers t The predefined actions UI components are: -- [`IgbGridEditingActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridEditingActions.html) - includes functionality and UI specifically designed for the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) option and row deletion of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). +- [`IgbGridEditingActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridEditingActions.html) - includes functionality and UI specifically designed for the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowEditable) option and row deletion of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). - [`IgbGridPinningActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridPinningActions.html) - includes functionality and UI specifically designed for the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. @@ -46,28 +46,24 @@ They are added inside the [`IgbGrid`](https://www.infragistics.com/blazor/docs/a These components expose templates giving flexibility for customization. For instance, if we would like to use the [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) for a Gmail scenario with row actions such as **delete**, **edit** and etc. You can simply create button component with icon, add click event to it and insert it into the [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html). - + ```razor
- - edit - - @if (!IsDeleted(actionstrip.Context)) - { - - delete - - } + +
``` - + ```razor @using IgniteUI.Blazor.Controls @@ -219,7 +215,6 @@ public class NwindData } ``` - ## API References - [`IgbGridPinningActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridPinningActions.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-adding.md index a434b058a..40b3473d0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-adding.md @@ -157,10 +157,9 @@ public class NwindData } ``` - ## Row Adding Usage -Then define a [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) with bound data source, [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) set to true and an [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) component with editing actions enabled. The `AddRow` input controls the visibility of the button that spawns the row adding UI. +Then define a [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) with bound data source, [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowEditable) set to true and an [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) component with editing actions enabled. The `AddRow` input controls the visibility of the button that spawns the row adding UI. @@ -204,7 +203,7 @@ The internal `BaseTransactionService` is automatically provided for [`Grid`](htt -Using [`BeginAddRowById`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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. +Using [`BeginAddRowById`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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. ```razor @code { @@ -241,9 +240,6 @@ After a new row is added through the row adding UI, its position and/or visibili ## Keyboard Navigation - ALT + + - Enters edit mode for adding a row - - - - ESC exits row adding mode without submitting any changes - TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. @@ -258,7 +254,7 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the [`RowAddTextTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowAddTextTemplate). +Customizing the text of the row adding overlay is possible using the [`RowAddTextTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowAddTextTemplate). @@ -320,13 +316,13 @@ The row adding UI comprises the buttons in the [`IgbActionStrip`](https://www.in ## API References -- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) +- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `RowEditCancel` - `EndEdit` -- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) +- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_PrimaryKey) - [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-drag.md index ae9de7501..ef607d032 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-drag.md @@ -13,7 +13,7 @@ _premium: true # Row Dragging in Blazor Grid -The Ignite UI for Blazor Row Dragging feature in Blazor Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) component and is configurable via the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable) input. +The Ignite UI for Blazor Row Dragging feature in Blazor Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) component and is configurable via the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowDraggable) input. ## Blazor Grid Row Drag Example @@ -75,10 +75,9 @@ The Ignite UI for Blazor Row Dragging feature in Blazor Grid is easily configura } ``` - ## Configuration -In order to enable row-dragging for your [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), all you need to do is set the grid's [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. +In order to enable row-dragging for your [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), all you need to do is set the grid's [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. ```razor @@ -87,7 +86,7 @@ In order to enable row-dragging for your [`IgbGrid`](https://www.infragistics.co ### Templating the Drag Icon -The drag handle icon can be templated using the grid's [`DragIndicatorIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_DragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (**drag_indicator**) to **drag_handle**. @@ -152,9 +151,9 @@ function getCurrentRowIndex(rowList, cursorPosition) { > [!Note] -> Make sure that there is a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. +> Make sure that there is a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_PrimaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. -Once [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: +Once [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@ -293,18 +292,17 @@ public class CustomersData } ``` - ## Limitations -Currently, there are no known limitations for the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable). +Currently, there are no known limitations for the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowDraggable). ## API References -- [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable) +- [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowDraggable) - `RowDragStart` - `RowDragEnd` - [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-editing.md index 67ee1f0af..df1416dc1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-editing.md @@ -157,13 +157,12 @@ public class NwindData } ``` - > [!Note] > When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode. ## Row Editing Usage -Define a [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) with bound data source and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) set to true: +Define a [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) with bound data source and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowEditable) set to true: ```razor Setting primary key is mandatory for row editing operations. > [!Note] -> Enabling editing for individual columns is not necessary. Using the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) property in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), all rows, with defined [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) input of that column to `false`. +> Enabling editing for individual columns is not necessary. Using the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowEditable) property in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), all rows, with defined [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) input of that column to `false`. > [!Note] > The [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. @@ -444,10 +443,9 @@ public class NwindData } ``` - ## Known Issues and Limitations -- When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection @@ -459,14 +457,14 @@ public class NwindData ## API References -- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) +- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `EndEdit` - [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Field) - [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) -- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) +- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_PrimaryKey) - [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-pinning.md index 94c5f8399..ed380bc85 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-pinning.md @@ -193,7 +193,6 @@ public class CustomersDataLocal } ``` - ## Row Pinning UI The built-in row pinning UI is enabled by adding an [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) component with the [`IgbGridPinningActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridPinningActions.html) component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. @@ -230,7 +229,7 @@ The built-in row pinning UI is enabled by adding an [`IgbActionStrip`](https://w ## Row Pinning API -Row pinning is controlled through the [`Pinned`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowDirective.html#IgniteUI_Blazor_Controls_IgbRowDirective_Pinned) input of the `Row`. Pinned rows are rendered at the top of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) by default and stay fixed through vertical scrolling of the unpinned rows in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) body. +Row pinning is controlled through the [`Pinned`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridRow.html#IgniteUI_Blazor_Controls_IgbGridRow_Pinned) input of the `Row`. Pinned rows are rendered at the top of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) by default and stay fixed through vertical scrolling of the unpinned rows in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) body. ```razor this.Grid.PinRowAsync("ALFKI", 0); @@ -243,7 +242,7 @@ this.Grid.PinRowAsync("ALFKI", 0); this.Grid.UnpinRowAsync("ALFKI"); ``` -Note that the row ID is the primary key value, defined by the [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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. +Note that the row ID is the primary key value, defined by the [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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` event and changing the `InsertAtIndex` property of the event arguments to the desired position index. @@ -272,7 +271,7 @@ igRegisterScript("rowPinningHandler", rowPinningHandler, false); ## Pinning Position -You can change the row pinning position via the [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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. ```razor @@ -465,7 +464,6 @@ public class CustomersDataLocal } ``` - @@ -640,7 +638,6 @@ public class CustomersDataLocal } ``` - ## API References - [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-selection.md index 7c0870a57..886ed2348 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-row-selection.md @@ -283,7 +283,6 @@ public class FinancialDataAll } ``` - ## Setup In order to setup row selection in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), you just need to set the [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection) property. This property accepts `GridSelectionMode` enumeration. @@ -490,7 +489,7 @@ Additionally, assigning row IDs to [`SelectedRows`](https://www.infragistics.com You can template header and row selectors in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) and also access their contexts which provide useful functionality for different scenarios. -By default, the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`Click`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. +By default, the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`Click`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html#IgniteUI_Blazor_Controls_IgbCheckbox_Click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. #### Row Template @@ -517,7 +516,7 @@ igRegisterScript("WebGridRowSelectorTemplate", (ctx) => { The [`RowID`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowSelectorTemplateDetails.html#IgniteUI_Blazor_Controls_IgbRowSelectorTemplateDetails_RowID) property can be used to get a reference of an [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) row. This is useful when you implement a `click` handler on the row selector element. -In the above example we are using an [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) and we bind `rowContext.selected` to its [`Checked`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). +In the above example we are using an [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) and we bind `rowContext.selected` to its [`Checked`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html#IgniteUI_Blazor_Controls_IgbCheckbox_Checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). ### Header Template @@ -634,7 +633,6 @@ public class CustomersData } ``` - ### Excel Style Row Selectors Demo @@ -769,7 +767,6 @@ public class CustomersData } ``` - ### Conditional Selection Demo @@ -881,7 +878,6 @@ public class CustomersData } ``` - ## API References - [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-search.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-search.md index c18a1949e..30829ffa0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-search.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-search.md @@ -146,7 +146,6 @@ The following example represents [`IgbGrid`](https://www.infragistics.com/blazor } ``` - ## Blazor Search Usage ### Grid Setup @@ -195,9 +194,9 @@ public bool exactMatch = false; ### Blazor Search Box Input -Now let's create our search input! By binding our `SearchText` to the `Value` property to our newly created input and subscribe to the `ValueChanging` event, we can detect every single `SearchText` modification by the user. This will allow us to use the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html)'s [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext) and [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindPrev) methods to highlight all the occurrences of the `SearchText` and scroll to the next/previous one (depending on which method we have invoked). +Now let's create our search input! By binding our `SearchText` to the `Value` property to our newly created input and subscribe to the `ValueChanging` event, we can detect every single `SearchText` modification by the user. This will allow us to use the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html)'s [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindNext) and [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext) and the [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindPrev) methods have three arguments: +Both the [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindNext) and the [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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) @@ -217,7 +216,7 @@ The methods from above return a **number** value (the number of times the [`IgbG ### 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext) and the [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindNext) and the [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindPrev) methods inside the buttons' respective click event handlers. @@ -245,9 +244,9 @@ 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext)/[`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindNext)/[`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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 ENTER key. In order to achieve this, we can handle the **keydown** event of our search and invoke the [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext)/[`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindPrev) methods depending on if the user has pressed SHIFT as well or not. +We can also allow the users to navigate the results by using the keyboard's ENTER key. In order to achieve this, we can handle the **keydown** event of our search and invoke the [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindNext)/[`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindPrev) methods depending on if the user has pressed SHIFT as well or not. ```razor @@ -345,7 +344,7 @@ builder.Services.AddIgniteUIBlazor( Finally, let's update our template with the new components! -We will wrap all of our components inside an [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html). 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 [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html)'s [`ClearSearch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClearSearch) method to clear the highlights. +We will wrap all of our components inside an [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html). 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 [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html)'s [`ClearSearch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ClearSearch) method to clear the highlights. @@ -415,7 +414,7 @@ On the right in our input group, let's create three separate containers with the } ``` -- For the search navigation buttons, we have added two ripple styled buttons with material icons. The handlers for the click events remain the same - invoking the [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext)/[`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindPrev) methods. +- For the search navigation buttons, we have added two ripple styled buttons with material icons. The handlers for the click events remain the same - invoking the [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindNext)/[`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindPrev) methods. ```razor
@@ -453,10 +452,10 @@ In this article we implemented our own search bar for the [`IgbGrid`](https://ww [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) methods: -- [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext) -- [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindPrev) -- [`ClearSearch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClearSearch) -- [`RefreshSearch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RefreshSearch) +- [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindNext) +- [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_FindPrev) +- [`ClearSearch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ClearSearch) +- [`RefreshSearch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RefreshSearch) [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) properties: @@ -466,9 +465,6 @@ Additional components with relative APIs that were used: - [`IgbIcon`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIcon.html) - [`IgbChip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html) - - - - [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html) - [`IgbIconButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIconButton.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md index 95c8dae19..d93598b41 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md @@ -18,7 +18,7 @@ With the Ignite UI for Blazor Select feature in Blazor Grid you can easily inter - Cell selection - Column selection -With the [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection) property, you can specify: +With the [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowSelection) property, you can specify: - None - Single @@ -172,18 +172,17 @@ public class NwindData } ``` - ## Blazor Grid Selection Options -The Ignite UI for Blazor [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) 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 [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). In order to change/enable selection mode you can use [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection), [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) or [`Selectable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Selectable) properties. +The Ignite UI for Blazor [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) 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 [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). In order to change/enable selection mode you can use [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowSelection), [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_CellSelection) or [`Selectable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Selectable) properties. ### Blazor Grid Row Selection -Property [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection) enables you to specify the following options: +Property [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowSelection) enables you to specify the following options: - `None` - Row selection would be disabled for the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). - `Single` - Selection of only one row within the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) would be available. @@ -193,7 +192,7 @@ Property [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/Ignit ### Blazor Grid Cell Selection -Property [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) enables you to specify the following options: +Property [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_CellSelection) enables you to specify the following options: - `None` - Cell selection would be disabled for the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). - `Single` - Selection of only one cell within the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) would be available. @@ -587,12 +586,11 @@ public class NwindData } ``` - ## Known Issues and Limitations -When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection - Row Expand/collapse diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-size.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-size.md index 9b20ecace..20b0e2381 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-size.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-size.md @@ -282,7 +282,6 @@ public class InvoicesData } ``` - ## Usage As you can see in the demo above, the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set `--ig-size` either inline or part of a CSS class: @@ -386,14 +385,14 @@ Finally, let's provide the necessary logic in order to actually apply the size: } ``` -Another option that [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) provides for you, in order to be able to change the height of the rows in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), is the property [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowHeight). So let's see in action how this property affects the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) layout along with the `--ig-size`. +Another option that [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) provides for you, in order to be able to change the height of the rows in the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html), is the property [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowHeight). So let's see in action how this property affects the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) layout along with the `--ig-size`. 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowHeight) specified**. +- `--ig-size` CSS variable will have no impact on row height **if there is [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowHeight) specified**. - `--ig-size` will **affect all of the rest elements in the Grid**, as it has been described above. -We can now extend our sample and add [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowHeight) property to the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html): +We can now extend our sample and add [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_RowHeight) property to the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html): ```razor @@ -439,7 +437,7 @@ You can sort any column or a combination of columns through the [`IgbGrid`](http > [!Note] > Sorting is performed using our `DefaultSortingStrategy` algorithm. Any [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) or `ISortingExpression` can use a custom implementation of the `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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClearSort) method: +As with the filtering behavior, you can clear the sorting state by using the [`ClearSort`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_ClearSort) method: ```razor @code { @@ -454,14 +452,14 @@ As with the filtering behavior, you can clear the sorting state by using the [`C > [!Note] -> The [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_SortStrategy) of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) is of different type compared to the [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortStrategy) of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html), since they work in different scopes and expose different parameters. +> The [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_SortStrategy) of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) is of different type compared to the [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_SortStrategy) of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html), since they work in different scopes and expose different parameters. > [!Note] > The sorting operation **DOES NOT** change the underlying data source of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). ## Initial Sorting State -It is possible to set the initial sorting state of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) by passing an array of sorting expressions to the [`SortingExpressions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortingExpressions) property of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). +It is possible to set the initial sorting state of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html) by passing an array of sorting expressions to the [`SortingExpressions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_SortingExpressions) property of the [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html). @@ -495,7 +493,7 @@ It is possible to set the initial sorting state of the [`IgbGrid`](https://www.i The sorting indicator icon in the column header can be customized using a template. The following properties are available for templating the sorting indicator for any sorting state (ascending, descending, none): -- [`SortHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. +- [`SortHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_SortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. @@ -512,7 +510,7 @@ The sorting indicator icon in the column header can be customized using a templa -- [`SortAscendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. +- [`SortAscendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_SortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. @@ -529,7 +527,7 @@ The sorting indicator icon in the column header can be customized using a templa -- [`SortDescendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. +- [`SortDescendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_SortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. @@ -714,7 +712,6 @@ public class ProductSales } ``` - ## API References - [`IgbSortingExpression`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSortingExpression.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-state-persistence.md index 3f97a1b5f..bf173a906 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-state-persistence.md @@ -431,7 +431,6 @@ public class CustomersData } ``` - ## Limitations diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-summaries.md index a35d64cc3..54afa9aa5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-summaries.md @@ -136,7 +136,6 @@ public class NwindData } ``` - > [!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** @@ -422,7 +421,6 @@ public class NwindData } ``` - ### Summary Template @@ -701,7 +699,6 @@ public class NwindData } ``` - ## Disabled Summaries The [`DisabledSummaries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DisabledSummaries) property provides precise per-column control over the Blazor Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgbGrid, 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. @@ -974,7 +971,6 @@ public class NwindData } ``` - ## Summaries with Group By @@ -1202,7 +1198,6 @@ public class InvoicesData } ``` - ## Keyboard Navigation @@ -1437,7 +1432,6 @@ public class InvoicesData } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-toolbar.md index 45e6407d7..9dbc8aeb6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-toolbar.md @@ -153,7 +153,6 @@ public class AthletesData } ``` - The predefined [`IgbGridToolbarActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridToolbarActions.html) and [`IgbGridToolbarTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridToolbarTitle.html) UI components are added inside the [`IgbGridToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridToolbar.html) and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: @@ -332,7 +331,6 @@ public class AthletesData } ``` - ### Title @@ -589,7 +587,6 @@ public class AthletesData } ``` - ## 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. @@ -743,7 +740,6 @@ public class AthletesData } ``` - ## Custom Content If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable. @@ -936,7 +932,6 @@ public class PlayersData // AthletesData } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -1086,7 +1081,6 @@ public class AthletesData } ``` - ## API References The Grid Toolbar service has a few more APIs to explore, which are listed below. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-virtualization.md index 6a8713005..c7ea209ab 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-virtualization.md @@ -234,7 +234,6 @@ public class FinancialDataAll } ``` - ## Enabling Virtualization @@ -245,8 +244,8 @@ However, it is also possible to explicitly set the [`IgbGrid`](https://www.infra 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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 [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html)'s [`ColumnWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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 [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html)'s [`ColumnWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html#IgniteUI_Blazor_Controls_IgbGrid_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 [`IgbGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGrid.html)'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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grids-theming.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grids-theming.md deleted file mode 100644 index 9a992d914..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grids-theming.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: Blazor Grid theming | Real-Time Blazor Tables | The Lightweight Blazor Web Components table | Infragistics -_description: . -_keywords: Blazor data grid, infragistics, data grids theming, theming, Ignite UI for Blazor, table -_license: commercial -mentionedTypes: ["Infragistics.Controls.Grid.Implementation.Grid"] -namespace: Infragistics.Controls -_tocName: Theming -_premium: true ---- - -# Theme Blazor Data Grid - -With the Blazor Theming engine, the Ignite UI for Blazor Grid can be easily customized to match your brand identity. -In addition to predefined themes and palettes, you can further customize the look and feel of your data grid by using a set of CSS custom properties. - -## Available Theming Properties - -| Property name | Type | Description | -|------------------------------------------|--------------------------|----------------------------------------------------------------------------------------------| -| --grid-elevation | number between 0-24 | The elevation level, to be used for the grid | -| --drag-elevation | number between 0-24 | The elevation level, to be used for movable elements (ex. column header) | -| --grouparea-color | color | The grid group area text color | -| --grouparea-background | color | The grid group area text color | -| --drop-area-text-color | color | The drop area text color | -| --drop-area-icon-color | color | The drop area icon color | -| --drop-area-background | color | The drop area background color | -| --drop-area-on-drop-background | color | The drop area background on drop color | -| --header-background | color | The grid header background color | -| --header-text-color | color | The grid header text color | -| --header-selected-background | color | The grid header background color when selected (ex. column selection). | -| --header-selected-text-color | color | The grid header text color when selected (ex. column selection). | -| --sortable-header-icon-hover-color | color | The icon color on hover in grid header when the column is sortable. | -| --sorted-header-icon-color | color | The sorted table header icon color | -| --header-border-width | border-width | The border width used for header borders. | -| --header-border-style | border-style | The border style used for header borders. Can be 'dotted', 'dashed' or 'solid' | -| --header-border-color | color | The color used for header borders. | -| --ghost-header-background | color | The dragged header background color. | -| --ghost-header-text-color | color | The dragged header text color. | -| --ghost-header-icon-color | color | The dragged header icon color. | -| --filtering-background-and | color | The background color of advanced filtering "AND" condition. | -| --filtering-background-or | color | The background color on focus/selected of advanced filtering "AND" condition. | -| --filtering-background-and--focus | color | The background color of advanced filtering "OR" condition. | -| --filtering-background-or--focus | color | The background color on focus/selected of advanced filtering "OR" condition. | -| --grid-border-color | color | The border color surrounding the grid. | -| --content-background | color | The grid body background color. | -| --content-text-color | color | The grid body text color. | -| --row-odd-background | color | The background color of odd rows. | -| --row-even-background | color | The background color of even rows. | -| --row-odd-text-color | color | The text color of odd rows. | -| --row-even-text-color | color | The text color of even rows. | -| --row-selected-background | color | The selected row background color. | -| --tree-selected-filtered-row-text-color | color | The selected/filtered row text color | -| --row-selected-text-color | color | The selected row text color. | -| --cell-selected-within-background | color | The background of the selected cell inside a selected row/column. | -| --cell-selected-within-text-color | color | The color of the selected cell inside a selected row/column. | -| --row-selected-hover-background | color | The selected row hover background. | -| --row-selected-hover-text-color | color | The selected row hover tex | -| --row-hover-background | color | The hover row background color. | -| --row-hover-text-color | color | The hover row text color. | -| --row-border-color | color | The border color between the grid body rows. | -| --pinned-border-width | border-width | The border width of the pinned rows/columns. | -| --pinned-border-style | border-style | The border style of the pinned rows/columns. Can be 'dotted', 'dashed' or 'solid' | -| --pinned-border-color | color | The border color of the pinned rows/columns. | -| --cell-active-border-color | color | The active(focused) cell border color. | -| --cell-selected-background | color | The selected cell background color. | -| --tree-selected-filtered-cell-text-color | color | The selected/filtered cell text color | -| --cell-selected-text-color | color | The selected cell text color. | -| --cell-editing-background | color | The background color of a cell in edit mode. | -| --edit-mode-color | color | The text color in edit mode | -| --edited-row-indicator | color | The indicator's color of edited row. | -| --cell-new-color | color | The text color of a new, unedited cell. Used when adding new row in a grid. | -| --cell-edited-value-color | color | The color of cell edited value. | -| --cell-disabled-color | color | The text color of a disabled cell. | -| --resize-line-color | color | The grid header resize line color. | -| --drop-indicator-color | color | The color of the drop indicator. | -| --group-label-column-name-text | color | The grid group row column name text color. | -| --group-label-icon | color | The grid group row icon color. | -| --group-label-text | color | The grid group row text color. | -| --expand-all-icon-color | color | The grid header expand all group rows icon color. | -| --expand-all-icon-hover-color | color | The grid header expand all group rows icon hover color. | -| --expand-icon-color | color | The grid row expand icon color. | -| --expand-icon-hover-color | color | The grid row expand icon hover color. | -| --active-expand-icon-color | color | The drop area background on drop color. | -| --active-expand-icon-hover-color | color | The drop area background on drop color. | -| --group-count-background | color | The grid group row cont badge background color. | -| --group-count-text-color | color | The grid group row cont badge text color. | -| --group-row-background | color | The grid group row background color. | -| --group-row-selected-background | color | The drop area background on drop color. | -| --filtering-header-background | color | The background color of the filtered column header. | -| --filtering-header-text-color | color | The text color color of the filtered column header. | -| --filtering-row-background | color | The background color of the filtering row. | -| --filtering-row-text-color | color | The text-color color of the filtering row. | -| --tree-filtered-text-color | color | The grouping row background color on focus. | -| --body-summaries-background | color | The background color of the summary groups located the body. | -| --body-summaries-text-color | color | The text color of the summary groups located the body. | -| --root-summaries-background | color | The background color of the summary groups located the footer. | -| --root-summaries-text-color | color | The text color of the summary groups located the footer. | -| --row-highlight | color | The grid row highlight color. | -| --row-ghost-background | color | The background color of the dragged row. | -| --row-drag-color | color | The color of the drag handle. | -| --drop-area-border-radius | number between 0 and 1 | The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. | - -## How to use - -As mentioned above Using the CSS vars from the table allow us to style our grid. Let's say that we want to change the grid to use a Dark Theme, by changing the following header background and text colors etc., we can do that like so in a file optionally called dark-theme.css. - -import "./dark-theme.css"; - -```css -.ig-data-grid { - /* shared variables used in custom properties */ - --cell-text-color:#58258b; - --cell-background:#191919; - --cell-selected-background: #58258b; - --cell-selected-within-text-color: #191919; - --cell-selected-within-background: #58258b; - - --row-selected-background:var(--cell-selected-background); - --row-hover-background:var(--cell-selected-background); - --row-hover-text-color:var(--cell-background); - - --header-background: #58258b; - --header-text-color: #191919; - --header-separator-background: #58258b; - --header-separator-width: 5px; - - --section-header-background: #191919; - --section-header-text-color: #58258b; - --section-header-selected-background: #58258b; - --section-header-selected-text-color: #191919; - - --row-separator-background: #191919; - --row-separator-last-sticky-row-background: #191919; - --row-separator-pinned-row-background: #58258b; - --row-separator-sticky-row-background: #58258b; - - --column-resizing-separator-background: #58258b; - --column-moving-separator-background: #58258b; - - - --filtering-header-background: #272727; - --filtering-header-text-color: #ffffff; - --filtering-row-background: #272727; - --filtering-row-text-color: #ffffff; - --tree-filtered-text-color: #ffffff; - - --summary-root-background: #7446b9; - --summary-root-label-text-color: #191919; - --summary-root-value-text-color: #191919; -} - -.ig-grid-column-options { - --background-color: black; - --text-color: #7446b9; - --summary-list-text-color: #7446b9; - --summary-list-background: #191919; -} - -.ig-data-grid-toolbar { - --background-color: #191919; - --text-color: #58258b; - --dialog-background-color: #191919; -} - -.ig-column-chooser { - --background-color: #191919; - --title-color: green; - --select-all-caption-text-color: #58258b; - --search-icon-color: #58258b; - --search-text-color: #58258b; - --search-background-color: #191919; - --search-border-color: #58258b; - --search-text-style: 12px 'Courier'; -} - -.ig-column-pinning { - --background-color: white; - --text-color: #7446b9; - --select-all-caption-text-color: #58258b; - --search-icon-color: #58258b; - --search-text-color: #58258b; - --search-background-color: #191919; - --search-border-color: #58258b; - --search-text-style: 12px 'Courier'; -} -``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-advanced-filtering.md index 0e8790da3..652a5e628 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-advanced-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-advanced-filtering.md @@ -297,7 +297,6 @@ public class SingersData } ``` - ## Interaction In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. If no advanced filter is applied, you should start with creating a group of filtering conditions linked with **AND** or **OR**. After that, you can add filtering conditions or sub-groups. @@ -312,7 +311,7 @@ In order to filter the data once you are ready with creating the filtering condi ## Usage -To enable the advanced filtering, the [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowAdvancedFiltering) input property should be set to **true**. +To enable the advanced filtering, the [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_AllowAdvancedFiltering) input property should be set to **true**. @@ -326,9 +325,9 @@ To enable the advanced filtering, the [`AllowAdvancedFiltering`](https://www.inf -The advanced filtering generates a [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilteringExpressionsTree) which is stored in the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AdvancedFilteringExpressionsTree) input property. You could use the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AdvancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. +The advanced filtering generates a [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_FilteringExpressionsTree) which is stored in the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_AdvancedFilteringExpressionsTree) input property. You could use the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_AdvancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. -In case you don't want to show the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) toolbar, you could use the [`OpenAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_OpenAdvancedFilteringDialog) and [`CloseAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CloseAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. +In case you don't want to show the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) toolbar, you could use the [`OpenAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_OpenAdvancedFilteringDialog) and [`CloseAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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 [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). Both filtering user interfaces will work independently of one another. The final filtered result in the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) is the intersection between the results of the two filters. @@ -638,7 +637,6 @@ public class SingersData } ``` - ## API References - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-editing.md index 3f7ae252d..6d771a3fb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-editing.md @@ -177,7 +177,6 @@ public class NwindData } ``` - ## Cell Editing ### Editing through UI @@ -423,7 +422,6 @@ public class HGridDndData } ``` - ## CRUD operations > [!Note] @@ -470,7 +468,7 @@ Updating data in the Hierarchical Grid is achieved through `UpdateRow` and `Upda ### Deleting data from the Hierarchical Grid -Please keep in mind that `DeleteRow` method will remove the specified row only if a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) is defined. +Please keep in mind that `DeleteRow` method will remove the specified row only if a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_PrimaryKey) is defined. @@ -500,31 +498,30 @@ The first thing we need to do is bind to the grid's event: The `CellEdit` emits whenever **any** cell's value is about to be committed. In our **CellEdit** definition, we need to make sure that we check for our specific column before taking any action: -If the value entered in a cell under the **Age** column is below 18 or the value in the **HireDate** column is in the future, the editing will be cancelled and the user will be alerted to the cancellation. + + + + +If the value entered in a cell under the **Units On Order** column is larger than the available amount (the value under **Units in Stock**), the editing will be cancelled and the user will be alerted to the cancellation. + + ```razor // In JavaScript -igRegisterScript("HandleCellEdit", (ev) => { - const today = new Date(); - const column = event.detail.column; - if (column.field === 'Debut') { - if (event.detail.newValue > today.getFullYear()) { - event.detail.cancel = true; - alert('The debut date must be in the past!'); - } - } else if (column.field === 'LaunchDate') { - if (event.detail.newValue > today) { - event.detail.cancel = true; - alert('The launch date must be in the past!'); +igRegisterScript("WebGridEditingEventsCellEdit", (ev) => { + var d = ev.detail; + + if (d.column != null && d.column.field == "UnitsOnOrder") { + if (d.newValue > d.rowData.UnitsInStock) { + d.cancel = true; + alert("You cannot order more than the units in stock!") } } }, false); ``` -Here, we are validating two columns. If the user tries to change an artist's **Debut** year or an album's **Launch Date**, the grid will not allow any dates that are greater than today. - The result of the above validation being applied to our [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) can be seen in the below demo: @@ -699,7 +696,6 @@ public class NwindData } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -880,13 +876,9 @@ public class NwindData } ``` - ## API References - [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) - - - - [`IgbDatePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-merging.md index f99f26a27..3f3d2fb3c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-merging.md @@ -205,7 +205,6 @@ public class MultiColumnsExportData } ``` - ## Enabling and Using Cell Merging diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-selection.md index fe96b865e..90b12d736 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-cell-selection.md @@ -270,7 +270,6 @@ public class SingersData } ``` - ## Selection Types ### Hierarchical Grid Multiple-Cell Selection @@ -293,13 +292,13 @@ How to select cells: ### Hierarchical Grid Single Selection -When you set the [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) to **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. +When you set the [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_CellSelection) to **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. > When single cell is selected [`Selected`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_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` event is emitted. ### Hierarchical Grid None Selection -If you want to disable cell selection you can just set [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) to **none**. 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. +If you want to disable cell selection you can just set [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_CellSelection) to **none**. 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 @@ -328,7 +327,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Select range -[`SelectRange`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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. @@ -357,7 +356,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Clear cell selection -[`ClearCellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClearCellSelection) will clear the current cell selection. +[`ClearCellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_ClearCellSelection) will clear the current cell selection. ```razor @code { @@ -370,7 +369,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Get Selected Data -[`GetSelectedData`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_GetSelectedData) will return array of the selected data in Dictionary format. Examples below: +[`GetSelectedData`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_GetSelectedData) will return array of the selected data in Dictionary format. Examples below: ```razor @@ -394,7 +393,7 @@ The multi-cell selection is index based (DOM elements selection). - `Filtering` - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells. - `Resizing` - On column resizing selected cells will not be cleared. - `Hiding` - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected. -- [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Pinning) - Selected cell will not be cleared. Same as hiding +- [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_Pinning) - Selected cell will not be cleared. Same as hiding - `GroupBy` - On column grouping selected cells will not be cleared. @@ -718,7 +717,6 @@ public class SingersData } ``` - ## API References - [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-collapsible-column-groups.md index e695aefa3..3b228324e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-collapsible-column-groups.md @@ -319,7 +319,6 @@ public class HierarchicalCustomersData } ``` - ## Setup To get started with the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) and the **Collapsible multi-column headers** feature, first you need to install Ignite UI for Blazor by typing the following command: @@ -338,7 +337,7 @@ Also, we strongly suggest that you take a brief look at [multi-column headers](m In order to define a column group as collapsible, you need to set the [`Collapsible`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_Collapsible) property on the [`IgbColumnGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html) to **true**. -You need to define the property [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. +You need to define the property [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. Let's see the markup below: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-hiding.md index 16db510eb..a6df9db70 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-hiding.md @@ -282,7 +282,6 @@ public class SingersData } ``` - ## Hierarchical Grid Setup Let's start by creating our [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) and binding it to our data. We will also enable both filtering and sorting for the columns. @@ -697,7 +696,6 @@ public class SingersData } ``` - ## API References In this article we learned how to use the built-in column hiding UI in the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html)'s toolbar. The column hiding UI has a few more APIs to explore, which are listed below. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-moving.md index 5323e61f2..99f6b6edb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-moving.md @@ -347,10 +347,9 @@ public class HierarchicalCustomers } ``` - ## Overview -**Column moving** feature is enabled on a per-grid level, meaning that the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) could have either movable or immovable columns. This is done via the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Moving) input of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). +**Column moving** feature is enabled on a per-grid level, meaning that the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) could have either movable or immovable columns. This is done via the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_Moving) input of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). @@ -367,7 +366,7 @@ public class HierarchicalCustomers In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: -[`MoveColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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` value), which determines whether to place the column before or after the target column. +[`MoveColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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` value), which determines whether to place the column before or after the target column. ```razor public async void HandleClick() @@ -388,7 +387,7 @@ In addition to the drag and drop functionality, the Column Moving feature also p } ``` -Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Moving) property to true. +Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_Moving) property to true. ## Events @@ -754,7 +753,6 @@ public class HierarchicalCustomers } ``` - ## API References - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-pinning.md index d65f10a4c..1bd3c8faf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-pinning.md @@ -288,14 +288,13 @@ public class HierarchicalCustomersData } ``` - ## Column Pinning API Column pinning is controlled through the [`Pinned`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Pinned) property of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html). Pinned columns are rendered on the left side of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) body. -You may also use the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html)'s [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PinColumn) or [`UnpinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_UnpinColumn) methods of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) to pin or unpin columns by their field name: +You may also use the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html)'s [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_PinColumn) or [`UnpinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_UnpinColumn) methods of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) to pin or unpin columns by their field name: @@ -307,7 +306,7 @@ A column is pinned to the right of the rightmost pinned column. Changing the ord ## Pinning Position -You can change the column pinning position via the [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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. ```razor @@ -606,7 +605,6 @@ public class HierarchicalCustomersData } ``` - ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. @@ -951,7 +949,6 @@ public class HierarchicalCustomersDataPin } ``` - ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. @@ -1326,7 +1323,6 @@ public class HierarchicalCustomersData } ``` - ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) 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 [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). @@ -1624,7 +1620,6 @@ public class HierarchicalCustomersData } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-resizing.md index 5f6819eed..13f1266c6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-resizing.md @@ -280,7 +280,6 @@ public class SingersData } ``` - **Column resizing** is also enabled per-column level, meaning that the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) can have a mix of resizable and non-resizable columns. This is done via the [`Resizable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Resizable) input of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html). ```razor @@ -673,7 +672,6 @@ public class HierarchicalCustomersCustom } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -957,7 +955,6 @@ public class SingersData } ``` - ## API References - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-selection.md index 00391e0e2..a50c52872 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-selection.md @@ -13,7 +13,7 @@ _premium: true # Blazor Hierarchical Grid Column Selection Overview -The Blazor Hierarchical Grid Column Selection feature in Ignite UI for Blazor offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. +The Blazor Hierarchical Grid Column Selection feature in Ignite UI for Blazor offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_ColumnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. ## Blazor Hierarchical Grid Column Selection Example @@ -299,10 +299,9 @@ public class SingersData } ``` - ## Basic Usage -The column selection feature can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) input, which takes `GridSelectionMode` values. +The column selection feature can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_ColumnSelection) input, which takes `GridSelectionMode` values. ## Interactions @@ -589,11 +588,10 @@ public class HierarchicalCustomers } ``` - ## Keyboard Combinations > [!Note] -> The keyboard combinations are available only when the grid [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) input is set to `multiple`. +> The keyboard combinations are available only when the grid [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_ColumnSelection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: @@ -877,7 +875,6 @@ public class SingersData } ``` - ## API References The column selection UI has a few more APIs to explore, which are listed below. @@ -888,12 +885,12 @@ The column selection UI has a few more APIs to explore, which are listed below. [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) properties: -- [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) -- [`SelectedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SelectedColumns) -- [`SelectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SelectColumns) -- [`DeselectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_DeselectColumns) -- [`SelectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SelectAllColumns) -- [`DeselectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_DeselectAllColumns) +- [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_ColumnSelection) +- [`SelectedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_SelectedColumns) +- [`SelectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_SelectColumns) +- [`DeselectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_DeselectColumns) +- [`SelectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_SelectAllColumns) +- [`DeselectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_DeselectAllColumns) [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-types.md index 6712e0101..26d1f4190 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-column-types.md @@ -27,7 +27,7 @@ This column [`DataType`](https://www.infragistics.com/blazor/docs/api/api/Ignite ### Number -If the [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) is set to **number**, the cell value will be formatted based on application or grid's [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Locale) settings, as well as when [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: +If the [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) is set to **number**, the cell value will be formatted based on application or grid's [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_Locale) settings, as well as when [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_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 `.` @@ -42,7 +42,7 @@ If the [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Bl ### 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Locale) format or [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: +The appearance of the date portions will be set (e.g. day, month, year) based on [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_Locale) format or [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: - **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc. - **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: @@ -134,7 +134,7 @@ Default template is using the value coming from the data as an image source to a ``` -When [`AutoGenerate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AutoGenerate) is used for the 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 [`AutoGenerate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_AutoGenerate) is used for the 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. ### Currency @@ -234,7 +234,7 @@ igRegisterScript("CurrencyFormatter", (value) => { - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) - [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) - [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) -- [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Locale) +- [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_Locale) - [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-conditional-cell-styling.md index 12342f6a6..50d69be90 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-conditional-cell-styling.md @@ -19,33 +19,33 @@ The Ignite UI for Blazor Conditional Styling feature in Blazor Hierarchical Grid The [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component in Ignite UI for Blazor provides two ways to **conditional styling of rows** based on custom rules. -- By setting [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) input on the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component; -- By setting [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowStyles) input on the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component; +- By setting [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowClasses) input on the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component; +- By setting [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowStyles) input on the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component; Further in this topic we will cover both of them in more details. ### Using Row Classes -You can conditionally style the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) rows by setting the [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) input and define custom rules. +You can conditionally style the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) rows by setting the [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowClasses) input and define custom rules. ```razor ``` -The [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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. ```razor igRegisterScript("RowClassesHandler", () => { return { - activeRow: (row) => row.index === 0 + activeRow: (row) => row.index % 2 === 0 }; }, true); ``` ```css .activeRow { - border: 2px solid #fc81b8; + border-top: 2px solid #fc81b8; border-left: 3px solid #e41c77; } ``` @@ -333,12 +333,11 @@ public class SingersData } ``` - ### Using Row Styles -The [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) control exposes the [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowStyles) property which allows conditional styling of the data rows. Similar to [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). +The [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) control exposes the [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowStyles) property which allows conditional styling of the data rows. Similar to [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). -> The callback signature for both [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowStyles) and [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) is: +> The callback signature for both [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowStyles) and [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowClasses) is: ```razor (row) => boolean @@ -646,7 +645,6 @@ public class SingersData } ``` - ## Hierarchical Grid Conditional Cell Styling ## Overview @@ -960,7 +958,6 @@ public class SingersData } ``` - - By using the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) input [`CellStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_CellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. > The callback signature for both `cellStyles` and `cellClasses` is now changed to: @@ -1302,7 +1299,6 @@ public class SingersData } ``` - ## 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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-editing.md index 410c5037f..c553fbf7f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-editing.md @@ -20,7 +20,7 @@ The Ignite UI for Blazor Cell Editing feature in Blazor Hierarchical Grid provid ## Setup -In order to specify which edit mode should be enabled, the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) exposes the following boolean properties - [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable). +In order to specify which edit mode should be enabled, the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) exposes the following boolean properties - [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowEditable). The [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) property enables you to specify the following options: @@ -29,12 +29,12 @@ The [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazo > Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). -The [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) property enables you to specify the following options: +The [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowEditable) property enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled. This is the default value. - **true** - the row editing in the corresponding grid will be enabled. -In the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), if you set [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) property to true, and the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. +In the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), if you set [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowEditable) property to true, and the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. All available column data types could be found in the official [Column types topic](column-types.md#default-template). @@ -86,7 +84,7 @@ The grid exposes a wide array of events that provide greater control over the ed ### Event Cancellation - `RowEditEnter` - Neither `Row` nor `Cell` will enter edit mode. -- `CellEditEnter` - Prevents entering cell edit. If [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. +- `CellEditEnter` - Prevents entering cell edit. If [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. - `CellEdit` - Allowed `Cell` and/or `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. @@ -302,7 +300,6 @@ public class SingersData } ``` - ### Features integration While a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-excel-style-filtering.md index 83c913f67..d822d1661 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-excel-style-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-excel-style-filtering.md @@ -304,10 +304,9 @@ public class SingersData } ``` - ## Usage -To turn on the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component's Excel-style filtering, two inputs should be set. The [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowFiltering) should be set to **true** and the [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilterMode) should be set to `ExcelStyleFilter` value. +To turn on the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component's Excel-style filtering, two inputs should be set. The [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_AllowFiltering) should be set to **true** and the [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_FilterMode) should be set to `ExcelStyleFilter` value. ```razor @@ -335,7 +334,7 @@ Sorting, pinning and hiding features can be removed from the filter menu using t Height="650px" Width="100%" Id="hierarchicalGrid"> - + @* ... *@ @@ -640,12 +639,11 @@ public class SingersData } ``` - ## Templates -If you want to further customize the Excel style filter menu, you can use the [`ExcelStyleHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ExcelStyleHeaderIconTemplate) property to define a custom template for the header icon of the menu. +If you want to further customize the Excel style filter menu, you can use the [`ExcelStyleHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_ExcelStyleHeaderIconTemplate) property to define a custom template for the header icon of the menu. -The following code demonstrates how to customize the Excel style filter menu using the [`ExcelStyleHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ExcelStyleHeaderIconTemplate): +The following code demonstrates how to customize the Excel style filter menu using the [`ExcelStyleHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_ExcelStyleHeaderIconTemplate): ```razor -To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowAdvancedFiltering) input property to **true** +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_AllowAdvancedFiltering) input property to **true** @@ -349,7 +348,7 @@ While some filtering conditions have been applied to a column, and the filter ro 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 [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the `IgnoreCase` and the initial `Condition` properties. -The filtering feature is enabled for the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component by setting the [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowFiltering) input to **true**. The default [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Filterable) input to **false**. +The filtering feature is enabled for the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component by setting the [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_AllowFiltering) input to **true**. The default [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Filterable) input to **false**. @@ -365,7 +364,7 @@ The filtering feature is enabled for the [`IgbHierarchicalGrid`](https://www.inf ## Initial filtered state -To set the initial filtering state of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), set the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilteringExpressionsTree) property to an array of [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilteringExpressionsTree) for each column to be filtered. +To set the initial filtering state of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), set the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_FilteringExpressionsTree) property to an array of [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_FilteringExpressionsTree) for each column to be filtered. ```razor @@ -712,7 +711,6 @@ public class SingersData } ``` - ## Known Limitations > [!Note] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-load-on-demand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-load-on-demand.md index c4ccf7188..c33d9e64d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-load-on-demand.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-load-on-demand.md @@ -144,7 +144,6 @@ public class SingersData } ``` - ## Remote Service Provider First we will prepare our service provider so we will be ready to get the data we would need for the hierarchical grid. @@ -226,7 +225,7 @@ Next we will setup our hierarchical grid and connect it to our remote service pr ### Template defining -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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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: +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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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: ```razor @@ -334,7 +333,7 @@ With this, the setup of our application is almost done. This last step aims to i ### Setup of loading indication -The [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) can display a loading indicator by setting the [`IsLoading`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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 and display that the grid has no data if the service returns an empty array by setting it to **false**. +The [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) can display a loading indicator by setting the [`IsLoading`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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 and display that the grid has no data if the service returns an empty array by setting it to **false**. In this case the final version of our configuration would look like this: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-multi-column-headers.md index 1a5b37806..a86c70e06 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-multi-column-headers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-multi-column-headers.md @@ -409,7 +409,6 @@ public class HierarchicalCustomers } ``` - The declaration of multi-column headers is achieved by wrapping a set of columns into an [`IgbColumnGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html) component with [`Header`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Header) title information passed. ```razor @@ -890,7 +889,6 @@ public class HierarchicalCustomers } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -1254,7 +1252,6 @@ public class HierarchicalCustomers } ``` - ## API References - [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-overview.md index 47a0bb50c..85f92c8db 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-overview.md @@ -279,7 +279,6 @@ public class SingersData } ``` - ## Getting Started with Ignite UI for Blazor Hierarchical Grid ### Dependencies @@ -792,7 +791,6 @@ public class SingersData } ``` - ## Known Limitations |Limitation|Description| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-remote-data-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-remote-data-operations.md index a351dc173..b7e55e851 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-remote-data-operations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-remote-data-operations.md @@ -277,7 +277,6 @@ namespace Infragistics.Samples } ``` - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-actions.md index 13113e6e5..40b81f7c2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-actions.md @@ -19,7 +19,7 @@ The Ignite UI for Blazor Row Actions feature in Blazor Hierarchical Grid enables The predefined actions UI components are: -- [`IgbGridEditingActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridEditingActions.html) - includes functionality and UI specifically designed for the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) option and row deletion of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). +- [`IgbGridEditingActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridEditingActions.html) - includes functionality and UI specifically designed for the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowEditable) option and row deletion of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). - [`IgbGridPinningActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridPinningActions.html) - includes functionality and UI specifically designed for the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. @@ -50,28 +50,24 @@ They are added inside the [`IgbHierarchicalGrid`](https://www.infragistics.com/b These components expose templates giving flexibility for customization. For instance, if we would like to use the [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) for a Gmail scenario with row actions such as **delete**, **edit** and etc. You can simply create button component with icon, add click event to it and insert it into the [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html). - + ```razor
- - edit - - @if (!IsDeleted(actionstrip.Context)) - { - - delete - - } + +
``` - + ```razor @using IgniteUI.Blazor.Controls @@ -359,7 +355,6 @@ public class SingersData } ``` - ## API References - [`IgbGridPinningActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridPinningActions.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-adding.md index c7a3d8919..5087e2144 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-adding.md @@ -309,10 +309,9 @@ public class SingersData } ``` - ## Row Adding Usage -Then define a [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) with bound data source, [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) set to true and an [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) component with editing actions enabled. The `AddRow` input controls the visibility of the button that spawns the row adding UI. +Then define a [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) with bound data source, [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowEditable) set to true and an [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) component with editing actions enabled. The `AddRow` input controls the visibility of the button that spawns the row adding UI. @@ -378,7 +377,7 @@ The internal `BaseTransactionService` is automatically provided for [`IgbHierarc -Using [`BeginAddRowById`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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. +Using [`BeginAddRowById`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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. ```razor @code { @@ -415,9 +414,6 @@ After a new row is added through the row adding UI, its position and/or visibili ## Keyboard Navigation - ALT + + - Enters edit mode for adding a row - - - - ESC exits row adding mode without submitting any changes - TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. @@ -438,7 +434,7 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the [`RowAddTextTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowAddTextTemplate). +Customizing the text of the row adding overlay is possible using the [`RowAddTextTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowAddTextTemplate). @@ -500,13 +496,13 @@ The row adding UI comprises the buttons in the [`IgbActionStrip`](https://www.in ## API References -- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) +- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `RowEditCancel` - `EndEdit` -- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) +- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_PrimaryKey) - [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-drag.md index 24c7f98f6..1969b0f71 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-drag.md @@ -13,7 +13,7 @@ _premium: true # Row Dragging in Blazor Hierarchical Grid -The Ignite UI for Blazor Row Dragging feature in Blazor Hierarchical Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component and is configurable via the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable) input. +The Ignite UI for Blazor Row Dragging feature in Blazor Hierarchical Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) component and is configurable via the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowDraggable) input. ## Blazor Hierarchical Grid Row Drag Example @@ -933,10 +933,9 @@ public class SingersNestedData : List } ``` - ## Configuration -In order to enable row-dragging for your [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), all you need to do is set the grid's [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. +In order to enable row-dragging for your [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), all you need to do is set the grid's [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. ```razor @@ -945,7 +944,7 @@ In order to enable row-dragging for your [`IgbHierarchicalGrid`](https://www.inf ### Templating the Drag Icon -The drag handle icon can be templated using the grid's [`DragIndicatorIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_DragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (**drag_indicator**) to **drag_handle**. @@ -1008,9 +1007,9 @@ function getCurrentRowIndex(rowList, cursorPosition) { > [!Note] -> Make sure that there is a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. +> Make sure that there is a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_PrimaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. -Once [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: +Once [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@ -1328,14 +1327,13 @@ public class SingersData } ``` - ## Limitations -Currently, there are no known limitations for the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable). +Currently, there are no known limitations for the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowDraggable). ## API References -- [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable) +- [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowDraggable) - `RowDragStart` - `RowDragEnd` - [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-editing.md index 3eba54485..3ddc44f00 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-editing.md @@ -271,13 +271,12 @@ public class SingersData } ``` - > [!Note] > When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode. ## Row Editing Usage -Define a [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) with bound data source and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) set to true: +Define a [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) with bound data source and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowEditable) set to true: @@ -406,7 +405,7 @@ RowEditable="true"> > Setting primary key is mandatory for row editing operations. > [!Note] -> Enabling editing for individual columns is not necessary. Using the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) property in the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), all rows, with defined [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) input of that column to `false`. +> Enabling editing for individual columns is not necessary. Using the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowEditable) property in the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), all rows, with defined [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) input of that column to `false`. > [!Note] > The [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. @@ -753,10 +752,9 @@ public class SingersData } ``` - ## Known Issues and Limitations -- When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection @@ -768,14 +766,14 @@ public class SingersData ## API References -- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) +- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `EndEdit` - [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Field) - [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) -- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) +- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_PrimaryKey) - [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-pinning.md index db1d2c9c4..2e0776fd9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-pinning.md @@ -300,7 +300,6 @@ public class SingersData } ``` - ## Row Pinning UI The built-in row pinning UI is enabled by adding an [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) component with the [`IgbGridPinningActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridPinningActions.html) component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. @@ -350,7 +349,7 @@ this.Grid.PinRowAsync("ALFKI", 0); this.Grid.UnpinRowAsync("ALFKI"); ``` -Note that the row ID is the primary key value, defined by the [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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. +Note that the row ID is the primary key value, defined by the [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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` event and changing the `InsertAtIndex` property of the event arguments to the desired position index. @@ -379,7 +378,7 @@ igRegisterScript("rowPinningHandler", rowPinningHandler, false); ## Pinning Position -You can change the row pinning position via the [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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. ```razor @@ -848,7 +847,6 @@ public class SingersData } ``` - ## Row Pinning Limitations - Only records that exist in the data source can be pinned. @@ -1129,7 +1127,6 @@ public class SingersData } ``` - ## API References - [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-selection.md index 3f154bd13..cf78e629f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-row-selection.md @@ -289,7 +289,6 @@ public class SingersData } ``` - ## Setup In order to setup row selection in the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), you just need to set the [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection) property. This property accepts `GridSelectionMode` enumeration. @@ -500,7 +499,7 @@ Additionally, assigning row IDs to [`SelectedRows`](https://www.infragistics.com You can template header and row selectors in the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) and also access their contexts which provide useful functionality for different scenarios. -By default, the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`Click`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. +By default, the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`Click`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html#IgniteUI_Blazor_Controls_IgbCheckbox_Click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. #### Row Template @@ -527,7 +526,7 @@ igRegisterScript("WebGridRowSelectorTemplate", (ctx) => { The [`RowID`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowSelectorTemplateDetails.html#IgniteUI_Blazor_Controls_IgbRowSelectorTemplateDetails_RowID) property can be used to get a reference of an [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) row. This is useful when you implement a `click` handler on the row selector element. -In the above example we are using an [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) and we bind `rowContext.selected` to its [`Checked`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). +In the above example we are using an [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) and we bind `rowContext.selected` to its [`Checked`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html#IgniteUI_Blazor_Controls_IgbCheckbox_Checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). @@ -797,7 +796,6 @@ public class SingersData } ``` - ### Conditional Selection Demo This demo prevents some rows from being selected using the `RowSelectionChanging` event and a custom template with disabled checkbox for non-selectable rows. @@ -1032,7 +1030,6 @@ public class SingersData } ``` - ## API References - [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-selection.md index 17d0b6550..50fccd1f2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-selection.md @@ -18,7 +18,7 @@ With the Ignite UI for Blazor Select feature in Blazor Hierarchical Grid you can - Cell selection - Column selection -With the [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection) property, you can specify: +With the [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowSelection) property, you can specify: - None - Single @@ -267,18 +267,17 @@ public class SingersData } ``` - ## Blazor Hierarchical Grid Selection Options -The Ignite UI for Blazor [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) 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 [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). In order to change/enable selection mode you can use [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection), [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) or [`Selectable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Selectable) properties. +The Ignite UI for Blazor [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) 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 [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). In order to change/enable selection mode you can use [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowSelection), [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_CellSelection) or [`Selectable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Selectable) properties. ### Blazor Hierarchical Grid Row Selection -Property [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection) enables you to specify the following options: +Property [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowSelection) enables you to specify the following options: - `None` - Row selection would be disabled for the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). - `Single` - Selection of only one row within the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) would be available. @@ -294,7 +293,7 @@ Property [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/Ignit ### Blazor Hierarchical Grid Cell Selection -Property [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) enables you to specify the following options: +Property [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_CellSelection) enables you to specify the following options: - `None` - Cell selection would be disabled for the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). - `Single` - Selection of only one cell within the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) would be available. @@ -324,7 +323,7 @@ This leads to the following three variations: ## Known Issues and Limitations -When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection - Row Expand/collapse diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-size.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-size.md index 6e37bc6bb..e37bf29f8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-size.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-size.md @@ -300,7 +300,6 @@ public class HierarchicalCustomers } ``` - ## Usage As you can see in the demo above, the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set `--ig-size` either inline or part of a CSS class: @@ -409,14 +408,14 @@ Finally, let's provide the necessary logic in order to actually apply the size: } ``` -Another option that [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) provides for you, in order to be able to change the height of the rows in the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), is the property [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowHeight). So let's see in action how this property affects the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) layout along with the `--ig-size`. +Another option that [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) provides for you, in order to be able to change the height of the rows in the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html), is the property [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowHeight). So let's see in action how this property affects the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) layout along with the `--ig-size`. 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowHeight) specified**. +- `--ig-size` CSS variable will have no impact on row height **if there is [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowHeight) specified**. - `--ig-size` will **affect all of the rest elements in the Hierarchical Grid**, as it has been described above. -We can now extend our sample and add [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowHeight) property to the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html): +We can now extend our sample and add [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_RowHeight) property to the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html): ```razor @@ -634,7 +632,7 @@ You can sort any column or a combination of columns through the [`IgbHierarchica > [!Note] > Sorting is performed using our `DefaultSortingStrategy` algorithm. Any [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) or `ISortingExpression` can use a custom implementation of the `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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClearSort) method: +As with the filtering behavior, you can clear the sorting state by using the [`ClearSort`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_ClearSort) method: ```razor @code { @@ -649,14 +647,14 @@ As with the filtering behavior, you can clear the sorting state by using the [`C > [!Note] -> The [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_SortStrategy) of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) is of different type compared to the [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortStrategy) of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html), since they work in different scopes and expose different parameters. +> The [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_SortStrategy) of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) is of different type compared to the [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_SortStrategy) of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html), since they work in different scopes and expose different parameters. > [!Note] > The sorting operation **DOES NOT** change the underlying data source of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). ## Initial Sorting State -It is possible to set the initial sorting state of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) by passing an array of sorting expressions to the [`SortingExpressions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortingExpressions) property of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). +It is possible to set the initial sorting state of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html) by passing an array of sorting expressions to the [`SortingExpressions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_SortingExpressions) property of the [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html). @@ -686,7 +684,7 @@ It is possible to set the initial sorting state of the [`IgbHierarchicalGrid`](h The sorting indicator icon in the column header can be customized using a template. The following properties are available for templating the sorting indicator for any sorting state (ascending, descending, none): -- [`SortHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. +- [`SortHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_SortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. @@ -703,7 +701,7 @@ The sorting indicator icon in the column header can be customized using a templa -- [`SortAscendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. +- [`SortAscendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_SortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. @@ -720,7 +718,7 @@ The sorting indicator icon in the column header can be customized using a templa -- [`SortDescendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. +- [`SortDescendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_SortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. @@ -1037,7 +1035,6 @@ public class SingersData } ``` - ## API References - [`IgbSortingExpression`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSortingExpression.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-state-persistence.md index f34e1e6f8..6065da741 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-state-persistence.md @@ -569,7 +569,6 @@ public class SingersData } ``` - ## Limitations diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-summaries.md index 04cc6891a..ee23e4d2e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-summaries.md @@ -266,7 +266,6 @@ public class SingersData } ``` - > [!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** @@ -684,7 +683,6 @@ public class SingersData } ``` - ### Summary Template @@ -1083,7 +1081,6 @@ public class SingersData } ``` - ## Disabled Summaries The [`DisabledSummaries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DisabledSummaries) property provides precise per-column control over the Blazor Hierarchical Grid summary feature. This property enables users to customize the summaries displayed for each column in the HierarchicalGrid, 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. @@ -1464,7 +1461,6 @@ public class SingersData } ``` - ## Keyboard Navigation The summary rows can be navigated with the following keyboard interactions: @@ -1747,7 +1743,6 @@ public class SingersData } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-toolbar.md index a87962eb1..596948328 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-toolbar.md @@ -481,7 +481,6 @@ public class SingersData } ``` - ## 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. @@ -1259,7 +1258,6 @@ public class SingersNestedData : List } ``` - ## Custom Content If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable. @@ -2066,7 +2064,6 @@ public class SingersNestedData : List } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -2359,7 +2356,6 @@ public class SingersData } ``` - ## Known Limitations diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-virtualization.md index b2fc17d82..6594984df 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/hierarchical-grid-virtualization.md @@ -146,7 +146,6 @@ public class SingersData } ``` - ## Enabling Virtualization @@ -157,8 +156,8 @@ However, it is also possible to explicitly set the [`IgbHierarchicalGrid`](https 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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 [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html)'s [`ColumnWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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 [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html)'s [`ColumnWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html#IgniteUI_Blazor_Controls_IgbHierarchicalGrid_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 [`IgbHierarchicalGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbHierarchicalGrid.html)'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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/icon-button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/icon-button.md index 4378881be..2e7b7c951 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/icon-button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/icon-button.md @@ -48,7 +48,6 @@ The Ignite UI for Blazor Icon Button component allows developers to use register } ``` -
## Usage @@ -113,7 +112,6 @@ Similar to the regular button components, the icon button supports several varia } ``` - ```razor ``` @@ -157,7 +155,6 @@ The size of the button can be changed by utilizing the `--ig-size` CSS variable } ``` - ```css igc-icon-button { --ig-size: var(--ig-size-medium); @@ -242,7 +239,6 @@ igc-icon-button::part(icon) { } ``` - ## API References - [`IgbButtonBase`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButtonBase.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/icon.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/icon.md index 56adb2fdb..b8f7d5680 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/icon.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/icon.md @@ -42,7 +42,6 @@ The Blazor Icon component allows you to easily display font or choose from a lar } ``` -
## Usage @@ -159,7 +158,6 @@ igc-icon { } ``` - You can also set a custom size for the icon component. The best way to do this is by using the `--size` CSS variable. ```css @@ -218,7 +216,6 @@ igc-icon { } ``` - ## API References - [`IgbIcon`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIcon.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/input.md index a7e621955..e05cd01ae 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/input.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/input.md @@ -33,7 +33,6 @@ The Ignite UI for Blazor Input is a component where the user can enter data. } ``` - ## Dependencies To get started with the Input component, you first need to register its module. @@ -87,7 +86,6 @@ With `prefix` and `suffix` slots we can add different content before and after t } ``` - ## Helper Text The `helper-text` slot provides a hint placed below the Input. Let's add some helper text to our phone Input: @@ -120,7 +118,6 @@ The `helper-text` slot provides a hint placed below the Input. Let's add some he } ``` - ## Input Sizing We can allow the user to change the size of the [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html) using the `--ig-size` CSS variable. То do this, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the Input: @@ -161,7 +158,6 @@ We can allow the user to change the size of the [`IgbInput`](https://www.infragi } ``` - In the sample above we have demonstrated the use of the following attributes: - `required` - Used to mark the input as required @@ -245,7 +241,6 @@ igc-input::part(suffix) { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/line-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/line-chart.md index d81c5d6f7..61bb6aa33 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/line-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/line-chart.md @@ -109,7 +109,6 @@ public class CountryRenewableElectricity } ``` -
## Line Chart Recommendations @@ -238,7 +237,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Line Chart with Multiple Series @@ -339,7 +337,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Line Chart with Live Data @@ -477,7 +474,6 @@ You can create this type of chart in the [`IgbCategoryChart`](https://www.infrag } ``` -
## Blazor Styling Line Chart @@ -581,10 +577,9 @@ public class CountryRenewableElectricity } ``` +You can also create a dashed line within the [`IgbLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLineSeries.html) by using the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) and setting the [`DashArray`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarLineSeries.html#IgniteUI_Blazor_Controls_IgbPolarLineSeries_DashArray) property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line. -You can also create a dashed line within the [`IgbLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLineSeries.html) by using the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) and setting the [`DashArray`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DashArray) property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line. - -The following example demonstrates usage of the [`DashArray`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DashArray) in a [`IgbLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLineSeries.html) in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html): +The following example demonstrates usage of the [`DashArray`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarLineSeries.html#IgniteUI_Blazor_Controls_IgbPolarLineSeries_DashArray) in a [`IgbLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLineSeries.html) in [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html): ```razor @using IgniteUI.Blazor.Controls @@ -730,7 +725,6 @@ public class CountryRenewableElectricity } ``` -
## Advanced Types of Line Charts @@ -915,7 +909,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked 100% Line Chart @@ -1094,7 +1087,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Radial Line Chart @@ -1245,7 +1237,6 @@ public class FootballPlayerStats } ``` -
## Blazor Polar Line Chart @@ -1399,7 +1390,6 @@ public class BoatSailingData } ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/linear-gauge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/linear-gauge.md index 44e145696..d898a1e45 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/linear-gauge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/linear-gauge.md @@ -372,7 +372,6 @@ The following sample demonstrates how setting multiple properties on the same [` } ``` -
## Component Modules @@ -469,7 +468,6 @@ This is the primary measure displayed by the linear gauge component and is visua } ``` - ## Highlight Needle The linear gauge can be modified to show a second needle. This will make the main needle's [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearGauge.html#IgniteUI_Blazor_Controls_IgbLinearGauge_Value) appear with a lower opacity. To enable this first set [`HighlightValueDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearGauge.html#IgniteUI_Blazor_Controls_IgbLinearGauge_HighlightValueDisplayMode) to Overlay and then apply a [`HighlightValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearGauge.html#IgniteUI_Blazor_Controls_IgbLinearGauge_HighlightValue). @@ -520,7 +518,6 @@ The linear gauge can be modified to show a second needle. This will make the mai } ``` - ## Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same times the degree to which it resides within that state. @@ -582,7 +579,6 @@ The ranges are visual elements that highlight a specified range of values on a s } ``` - ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the linear gauge. @@ -640,7 +636,6 @@ Minor tick marks – The minor tick marks represent helper tick marks, which mig } ``` - ## Labels The labels indicate the measures on the scale. @@ -683,7 +678,6 @@ The labels indicate the measures on the scale. } ``` - ## Backing The backing element represents background and border of the linear gauge component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. @@ -727,7 +721,6 @@ The backing element represents background and border of the linear gauge compone } ``` - ## Scale The scale is a visual element that highlights the full range of values in the linear gauge. You can customize the appearance and the shape of the scale. It can also be inverted (using [`IsScaleInverted`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearGauge.html#IgniteUI_Blazor_Controls_IgbLinearGauge_IsScaleInverted) property) and all labels will be rendered from right-to-left instead of left-to-right. @@ -773,7 +766,6 @@ The scale is a visual element that highlights the full range of values in the li } ``` - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the linear gauge with all features and visuals enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/linear-progress.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/linear-progress.md index 924e4aca3..47a3d890a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/linear-progress.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/linear-progress.md @@ -27,7 +27,6 @@ The Ignite UI for Blazor Linear Progress Indicator component provides a visual i } ``` -
## Usage @@ -54,7 +53,7 @@ The simplest way to start using the [`IgbLinearProgress`](https://www.infragisti ### Progress Types -You can set the type of your indicator, using the [`Variant`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProgressBase.html#IgniteUI_Blazor_Controls_IgbProgressBase_Variant) attribute. There are five types of linear progress indicators - **primary** (default), **error**, **success**, **info**, and **warning**. +You can set the type of your indicator, using the [`Variant`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearProgress.html#IgniteUI_Blazor_Controls_IgbLinearProgress_Variant) attribute. There are five types of linear progress indicators - **primary** (default), **error**, **success**, **info**, and **warning**. ```razor @@ -86,16 +85,15 @@ You can make the indicator striped, using the [`Striped`](https://www.infragisti } ``` -
### Indeterminate Progress -If you want to track a process that is not determined precisely, you can set the [`Indeterminate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProgressBase.html#IgniteUI_Blazor_Controls_IgbProgressBase_Indeterminate) property. +If you want to track a process that is not determined precisely, you can set the [`Indeterminate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearProgress.html#IgniteUI_Blazor_Controls_IgbLinearProgress_Indeterminate) property. ### Animation Duration -The [`AnimationDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProgressBase.html#IgniteUI_Blazor_Controls_IgbProgressBase_AnimationDuration) property is used to specify how long the animation cycle should take. It takes as value a number which represents the animation duration in milliseconds. +The [`AnimationDuration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearProgress.html#IgniteUI_Blazor_Controls_IgbLinearProgress_AnimationDuration) property is used to specify how long the animation cycle should take. It takes as value a number which represents the animation duration in milliseconds. ```razor @@ -105,9 +103,9 @@ The [`AnimationDuration`](https://www.infragistics.com/blazor/docs/api/api/Ignit You can align the default value, using the [`LabelAlign`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearProgress.html#IgniteUI_Blazor_Controls_IgbLinearProgress_LabelAlign) property. Permitted values are **top**, **bottom**, **top-start**, **top-end**, **bottom-start** and **bottom-end**. -To hide the default label of the progress indicator, use the [`HideLabel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProgressBase.html#IgniteUI_Blazor_Controls_IgbProgressBase_HideLabel) attribute. +To hide the default label of the progress indicator, use the [`HideLabel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearProgress.html#IgniteUI_Blazor_Controls_IgbLinearProgress_HideLabel) attribute. -The [`LabelFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbProgressBase.html#IgniteUI_Blazor_Controls_IgbProgressBase_LabelFormat) property can be used to customize the [`IgbLinearProgress`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearProgress.html) default label. +The [`LabelFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearProgress.html#IgniteUI_Blazor_Controls_IgbLinearProgress_LabelFormat) property can be used to customize the [`IgbLinearProgress`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbLinearProgress.html) default label. The following sample demonstrates the above configuration: @@ -141,7 +139,6 @@ The following sample demonstrates the above configuration: } ``` -
### Dynamic Progress @@ -201,7 +198,6 @@ You can dynamically change the value of the progress indicator by using external } ``` -
## Styling @@ -251,7 +247,6 @@ Using this CSS parts we have almost full control of the Linear Progress styling. } ``` - ```css igc-linear-progress::part(track){ background-color: var(--ig-gray-300) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/list.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/list.md index eea779415..ef52a9be6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/list.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/list.md @@ -63,7 +63,6 @@ The following example represents a list populated with contacts with a name and } ``` -
## Usage @@ -131,7 +130,6 @@ If all went well, you should see the following in your browser: } ``` - Let's up our game a bit and enhance our list items. Say we want to create a list of contacts with a name and a phone number displayed under the name. To achieve that we can use some of the slots that come with the list items as demonstrated in the next example: ```razor @@ -183,7 +181,6 @@ After implementing the above code, our list component should now look like the f } ``` - ### Adding Avatar and Buttons We can use some of our other components in conjunction with the [`IgbList`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbList.html) component to enrich the experience and add some functionality. We can have a nice picture avatar to the left of the name and phone values. Additionally, we can add some buttons to the right of them to allow the user to text and call contacts, so let's update our contacts list component to show the avatar and the buttons. We can do that by using some of the list item's slots. @@ -310,7 +307,6 @@ The result of implementing the above code should look like the following: } ``` - ## Styling The [`IgbList`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbList.html) exposes several CSS parts, giving you full control over its style: @@ -398,7 +394,6 @@ igc-list-item::part(subtitle) { } ``` - In this article we covered a lot of ground with the [`IgbList`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbList.html) component. First, we created a simple list with text items. Then, we created a list of contact items and added functionality to them by using some additional Ignite UI for Blazor components, like the [`IgbAvatar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAvatar.html) and [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html). Finally, we changed the component's appearance through the exposed CSS parts.
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/maker-framework.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/maker-framework.md new file mode 100644 index 000000000..3536ff1a7 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/maker-framework.md @@ -0,0 +1,239 @@ +--- +title: MAKER Framework | Ignite UI AI Orchestration +_description: The MAKER Framework is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated step plans using consensus-based voting across OpenAI, Anthropic, and Google AI providers. +_keywords: Blazor, Ignite UI for Blazor, Infragistics, MAKER, multi-agent, AI orchestration, MCP, Model Context Protocol, consensus voting, plan and execute, task decomposition +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/maker-framework" +namespace: Infragistics.Controls +mentionedTypes: [] +_tocName: Maker Framework +--- + + + + + +# MAKER Framework + +The MAKER Framework (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction. + +The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry. + +## How MAKER Works + +The MAKER Framework operates in two sequential phases: planning and execution. Each phase uses a dedicated set of internal AI clients and applies the same consensus-based voting mechanism to validate outputs before advancing. + +In the **planning phase**, a planning client proposes batches of steps (configurable batch size, default 3). A separate plan-voting client then runs a "first-to-ahead-by-K" vote: multiple AI agents vote "Yes", "No", or "End" on the proposed steps. A proposal is accepted when one outcome leads the others by K votes. Rejected proposals include the rejection reasons in the next retry, driving continuous refinement until the plan is complete or the retry limit is reached. + +In the **execution phase**, the framework processes the validated step plan in configurable batches. An execution client runs each batch and produces an updated state. An execution-voting client validates the new state against the previous state and the original task, using the same K-margin voting algorithm. Rejected executions retry with feedback. The final accumulated state is the task result. + +The red-flag validation layer operates throughout both phases. Every AI client request is wrapped in a guarded call that runs configurable validators on the response before it enters the voting system. Malformed or too-short responses are retried with the failure message appended to the prompt. Custom validators can be added by implementing `IAIRedFlagValidator`. + +## Install the MAKER MCP Server + +MAKER is published on GitHub Packages under the `@igniteui` scope and requires a one-time registry setup. Run the following command once on your machine: + +```bash +npm config set @igniteui:registry https://npm.pkg.github.com +``` + +Then open `~/.npmrc` (Windows: `%USERPROFILE%\.npmrc`) and add your GitHub Personal Access Token with `read:packages` scope: + +After the registry is configured, the MCP server runs via `npx` without a separate global install. The native binary (~50 MB) is downloaded and cached on first run. Subsequent starts are instant. + +## Connect to Your AI Client + +Add the `maker` server entry to the MCP configuration file for your AI client. The `env` block passes your AI provider key; only set keys for the providers you use. + +### VS Code (GitHub Copilot) + +Add to `.vscode/mcp.json` in your workspace: + +```json +{ + "servers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +Switch Copilot Chat to Agent mode and confirm that `plan`, `execute`, and `plan_and_execute` appear in the tools list. + +### Claude Desktop + +1. Open your Claude Desktop configuration file: + - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` + - Windows: `%APPDATA%\Claude\claude_desktop_config.json` +2. Add the `maker` entry to the `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__Anthropic": "" + } + } + } +} +``` + +3. Restart Claude Desktop. The first start downloads the native binary (~30 s on a typical connection). + +### Cursor, Claude Code, JetBrains, and Other MCP Clients + +Any client that supports MCP with STDIO transport uses the same `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +## Configure the MAKER MCP Server + +All MAKER configuration is supplied through environment variables. The naming convention uses double underscore (`__`) as the section separator. Pass variables in the `env` block of your MCP client configuration. + +### AI Provider Keys + +Set at least one provider key. You can set keys for multiple providers simultaneously and assign different providers to different internal clients. + +| Environment Variable | Description | +| ------------------------------------- | ----------------- | +| `Executor__AIProviderKeys__OpenAI` | OpenAI API key | +| `Executor__AIProviderKeys__Anthropic` | Anthropic API key | +| `Executor__AIProviderKeys__Google` | Google AI API key | + +### Select Models per Internal Client + +MAKER uses four internal AI clients: `Planning`, `PlanVoting`, `Execution`, and `ExecutionVoting`. Each client can target a different provider and model. The defaults use `gpt-5.1` on OpenAI for all four clients. + +To mix providers for cost and quality balance, set the `Provider` and `Model` variables per client: + +```json +"env": { + "Executor__AIProviderKeys__OpenAI": "", + "Executor__AIProviderKeys__Anthropic": "", + "Executor__Clients__Planning__Provider": "Anthropic", + "Executor__Clients__Planning__Model": "claude-opus-4-5", + "Executor__Clients__PlanVoting__Provider": "OpenAI", + "Executor__Clients__PlanVoting__Model": "gpt-4.1-mini", + "Executor__Clients__Execution__Provider": "Anthropic", + "Executor__Clients__Execution__Model": "claude-opus-4-5", + "Executor__Clients__ExecutionVoting__Provider": "OpenAI", + "Executor__Clients__ExecutionVoting__Model": "gpt-4.1-mini" +} +``` + +Valid `Provider` values: `OpenAI`, `Anthropic`, `Google`. + +### Connect External MCP Servers + +MAKER can connect to external MCP servers as tool providers, making their tools available to the execution client. Configure each server with a name, description, URL, and optional API key using indexed environment variables: + +```json +"env": { + "Executor__McpServers__0__Name": "igniteui-cli", + "Executor__McpServers__0__Description": "Ignite UI CLI scaffolding and documentation tools", + "Executor__McpServers__0__Url": "https://mcp.example.com/igniteui-cli" +} +``` + +Increment the index (`0`, `1`, `2`, ...) to register additional servers. + +### Tune Batch Size and Voting Threshold + +Each MCP tool call accepts `batchSize` and `k` parameters in natural language. Set them in your prompt when invoking the tools. + +| Parameter | Default | Description | +| ----------- | ------- | ---------------------------------------------------------------------------------------------------------------------- | +| `batchSize` | `3` | Steps proposed or executed per voting round. Lower values give more control; higher values improve throughput. | +| `k` | `10` | Consensus margin threshold. Higher values require stronger agreement across voting agents before a result is accepted. | + +Lower `k` (3-5) for faster, exploratory tasks. Raise `k` (15-20) for critical tasks where correctness is more important than token cost. + +## Available Tools + +The MAKER MCP server exposes three tools to the connected AI agent. + +| Tool | Description | +| ------------------ | ------------------------------------------------------------------------- | +| `plan` | Decompose a task into a validated, ordered step list without executing it | +| `execute` | Execute a step list produced by `plan`, with consensus voting per batch | +| `plan_and_execute` | Plan and execute in one call with live progress events between phases | + +Use `plan` followed by `execute` when you want to inspect and validate the step plan before execution. Use `plan_and_execute` for unattended runs where inspection is not required. + +## Common Workflows + +### One-Shot Task + +Invoke `plan_and_execute` directly with default settings: + +> Use plan_and_execute to write a detailed comparison of REST vs GraphQL for a technical blog post. + +### Inspect the Plan Before Executing + +Use `plan` to review steps, then pass them to `execute`: + +> 1. Use plan to create a plan for migrating a PostgreSQL schema to a multi-tenant design. +> 2. Show me the steps. +> 3. Use execute with those steps to carry out the migration script. + +### High-Confidence Execution for Critical Tasks + +Raise `k` to require stronger consensus: + +> Use plan_and_execute with batchSize=3 and k=15 to review this smart contract for security vulnerabilities. + +### Low-Cost Exploratory Task + +Reduce both parameters to minimize token usage: + +> Use plan_and_execute with batchSize=3 and k=3 to draft a project README for a Node.js CLI tool. + +## Supported Platforms + +The native binary is distributed for four platforms. The correct binary is selected and cached automatically on first run. + +| Platform | Architecture | RID | +| -------- | --------------------- | ----------- | +| Windows | x64 | `win-x64` | +| macOS | x64 (Intel) | `osx-x64` | +| macOS | arm64 (Apple Silicon) | `osx-arm64` | +| Linux | x64 | `linux-x64` | + +ARM Linux is not currently packaged. To request additional platform support, open an issue at [github.com/IgniteUI/MAKER](https://github.com/IgniteUI/MAKER). + +The binary cache location can be overridden with the `MAKER_MCP_CACHE` environment variable. The default cache paths are `%LOCALAPPDATA%\maker-mcp\{version}\{rid}\` on Windows and `~/.cache/maker-mcp/{version}/{rid}/` on macOS and Linux. + +## Additional Resources + +- [AI-Assisted Development Overview](ai-assisted-development-overview.md) +- [Agent Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/map-api.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/map-api.md index b97f8b734..ea8456831 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/map-api.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/map-api.md @@ -16,7 +16,7 @@ The Blazor [`IgbGeographicMap`](https://www.infragistics.com/blazor/docs/api/api - [`Zoomable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_Zoomable) - [`ZoomToGeographic`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_ZoomToGeographic) - [`WorldRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WorldRect) -- [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeriesViewer.html#IgniteUI_Blazor_Controls_IgbSeriesViewer_WindowRect) +- [`WindowRect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowRect) - [`WindowScale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_WindowScale) - [`GetGeographicFromZoom`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_GetGeographicFromZoom) - [`GetGeographicPoint`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMap.html#IgniteUI_Blazor_Controls_IgbGeographicMap_GetGeographicPoint) @@ -42,9 +42,9 @@ The Blazor [`IgbGeographicSymbolSeries`](https://www.infragistics.com/blazor/doc - [`LatitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicSymbolSeries_LatitudeMemberPath) - [`LongitudeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicSymbolSeries_LongitudeMemberPath) -- [`MarkerType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMarkerSeries.html#IgniteUI_Blazor_Controls_IgbGeographicMarkerSeries_MarkerType) -- [`MarkerBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMarkerSeries.html#IgniteUI_Blazor_Controls_IgbGeographicMarkerSeries_MarkerBrush) -- [`MarkerOutline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicMarkerSeries.html#IgniteUI_Blazor_Controls_IgbGeographicMarkerSeries_MarkerOutline) +- [`MarkerType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicSymbolSeries_MarkerType) +- [`MarkerBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicSymbolSeries_MarkerBrush) +- [`MarkerOutline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicSymbolSeries.html#IgniteUI_Blazor_Controls_IgbGeographicSymbolSeries_MarkerOutline) ## Blazor Geographic Bubble Series API @@ -61,7 +61,7 @@ The Blazor [`IgbGeographicProportionalSymbolSeries`](https://www.infragistics.co The Blazor [`IgbGeographicShapeSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeries.html) and [`IgbGeographicPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicPolylineSeries.html) have the same API members: -- [`ShapeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeriesBase.html#IgniteUI_Blazor_Controls_IgbGeographicShapeSeriesBase_ShapeMemberPath) +- [`ShapeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGeographicShapeSeries.html#IgniteUI_Blazor_Controls_IgbGeographicShapeSeries_ShapeMemberPath) - [`Thickness`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_Thickness) - [`Brush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_Brush) - [`Outline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_Outline) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/mask-input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/mask-input.md index f2ec602f7..9f1c2f157 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/mask-input.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/mask-input.md @@ -39,7 +39,6 @@ The Ignite UI for Blazor Mask Input is an input field that allows the developer } ``` - ## Usage Before using the [`IgbMaskInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMaskInput.html), you need to register it as follows: @@ -117,10 +116,9 @@ After that you should see the following in your browser: } ``` - ### Prompt Character -Developers can customize the prompt symbol used for unfilled parts of the mask. To do this, simply provide any character to the [`Prompt`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMaskInputBase.html#IgniteUI_Blazor_Controls_IgbMaskInputBase_Prompt) property: +Developers can customize the prompt symbol used for unfilled parts of the mask. To do this, simply provide any character to the [`Prompt`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMaskInput.html#IgniteUI_Blazor_Controls_IgbMaskInput_Prompt) property: ```razor @@ -130,7 +128,7 @@ By default, the `prompt` character is **underscore**. ### Placeholder -Developers can also take advantage of the [`Placeholder`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInputBase.html#IgniteUI_Blazor_Controls_IgbInputBase_Placeholder) property, which serves the purpose of the native input placeholder attribute. If no value is provided for the placeholder, the value of the mask is used as such. +Developers can also take advantage of the [`Placeholder`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMaskInput.html#IgniteUI_Blazor_Controls_IgbMaskInput_Placeholder) property, which serves the purpose of the native input placeholder attribute. If no value is provided for the placeholder, the value of the mask is used as such. ```razor @@ -192,7 +190,6 @@ The [`IgbMaskInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.B } ``` - ## Styling The [`IgbMaskInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMaskInput.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -257,7 +254,6 @@ igc-mask-input::part(input)::placeholder { } ``` - ## Assumptions and limitations - The masked input does not expose a _type_ attribute since it is always an input of type **text**. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/multi-column-combobox.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/multi-column-combobox.md deleted file mode 100644 index 1b63e48f9..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/multi-column-combobox.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Blazor Combo | Data Visualization Tools | Infragistics -_description: Infragistics' Blazor combo component helps you select the best chart to display your data. Improve your graphs and visualization with Ignite UI for Blazor! -_keywords: Blazor combo, drop down, Ignite UI for Blazor, Infragistics -mentionedTypes: [] -_tocName: Multi-Column Combo Box -_premium: true ---- - -# Blazor Multi-Column Combo Box Overview - -The Multi-Column Combo Box automatically generates columns for properties on the data object. This component is unique in that it's a combo box that visualizes large amounts of data similar to a data grid embedded in the dropdown. - -## Blazor Multi-Column Combo Box Example - -This sample demonstrates how to create [`IgbMultiColumnComboBox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html) that displays data in multiple columns in a popup window. - -```razor -@using IgniteUI.Blazor.Controls - - -
-
- @if (CountryData != null) - { - - } -
-
- -@code { - - protected List CountryData; - protected string[] DisplayFields = new string[] { "Country", "Pop", "Continent" }; - - protected override void OnInitialized() - { - this.CountryData = SampleComboData.Create(); - } -} -``` - - -## Component Modules - -The Multi-Column Combo Box requires the following modules: - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor( - typeof(IgbMultiColumnComboBoxModule)); -``` - -## Usage - -### Binding a Data Source - -In order to display your objects in the Multi-Column Combo Box component, you will need to bind the `DataSource` property. This can be bound in the form of an array of complex objects. The following code demonstrates how to bind the data source property. - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - -### Setting Display Value and Data Value - -You can configure different properties of the Multi-Column Combo Box's bound `DataSource` to act as the display text for the control as well as the underlying value when a selection is made. This is done by setting the [`TextField`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html#IgniteUI_Blazor_Controls_IgbMultiColumnComboBox_TextField) and [`ValueField`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html#IgniteUI_Blazor_Controls_IgbMultiColumnComboBox_ValueField) properties of the control, respectively, to the name of the property on the data item that you want to represent these things. - -If the value of the component needs to be updated programmatically, the `ValueChanged` event needs to be handled. The `GetValue` and `GetValueAsync` methods can be used to get the value when not within the `ValueChanged` event handler. - -The following code snippet shows how to set these properties, given that the underlying data item has a "Country" and "ID" property: - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - -### Setting Fields - -By default, the Multi-Column Combo Box will show all of the properties on the underlying data item, but this can be controlled by setting the [`Fields`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html#IgniteUI_Blazor_Controls_IgbMultiColumnComboBox_Fields) property on the component. This property takes a `string[]` of property paths on the underlying data item to determine which properties are shown. - -The following code snippet shows how to set this, and the resulting drop-down would only show the ID and Country columns: - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - -### Setting Placeholder Text - -It is possible to configure the text that shows as a placeholder for when there is no selection in the Multi-Column Combo Box component. This is done by setting the [`Placeholder`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html#IgniteUI_Blazor_Controls_IgbMultiColumnComboBox_Placeholder) property to the string you would like to be displayed. The following code demonstrates how to set this: - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - -### Configuring Sorting Mode - -The user has the ability to sort the columns that are displayed in the Multi-Column Combo Box by clicking the header of the column in the drop-down. The way the sorting is configured can be modified as well, as the columns can be sorted by only a single column or multiple columns, and they can be limited to either ascending and descending, or they can be tri-state. This is done by setting the [`SortMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html#IgniteUI_Blazor_Controls_IgbMultiColumnComboBox_SortMode) property of the component. - -Note, the TriState sort options will allow sorted columns to be unsorted. - -The following code demonstrates how to set the Multi-Column Combo Box to be able to sort by multiple columns tri-state. - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - -## API References - -- `DataSource` -- [`Fields`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html#IgniteUI_Blazor_Controls_IgbMultiColumnComboBox_Fields) -- `GetValueAsync` -- `GetValue` -- [`IgbMultiColumnComboBox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html) -- [`Placeholder`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html#IgniteUI_Blazor_Controls_IgbMultiColumnComboBox_Placeholder) -- [`SortMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html#IgniteUI_Blazor_Controls_IgbMultiColumnComboBox_SortMode) -- [`TextField`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html#IgniteUI_Blazor_Controls_IgbMultiColumnComboBox_TextField) -- `ValueChanged` -- [`ValueField`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbMultiColumnComboBox.html#IgniteUI_Blazor_Controls_IgbMultiColumnComboBox_ValueField) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/navbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/navbar.md index 393383419..518295119 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/navbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/navbar.md @@ -81,7 +81,6 @@ The following example represents a [`IgbNavbar`](https://www.infragistics.com/bl } ``` - ## Usage Before using the [`IgbNavbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNavbar.html), you need to register it as follows: @@ -236,7 +235,6 @@ If all went well, you should see the following in your browser: } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/navigation-drawer.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/navigation-drawer.md index 99cf00778..970e0d224 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/navigation-drawer.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/navigation-drawer.md @@ -102,7 +102,6 @@ This sample demonstrates how to create [`IgbNavDrawer`](https://www.infragistics } ``` - ## Usage Before using the [`IgbNavDrawer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNavDrawer.html), you need to register it as follows: @@ -233,7 +232,6 @@ If all went well, you should see the following in your browser: } ``` - ## Navbar Integration While any content can be provided in the drawer, the [`IgbNavDrawerItem`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNavDrawerItem.html) is available to apply out-of-the-box styling to the items. @@ -447,7 +445,6 @@ If all goes well, your component should now look like this: } ``` - ## Mini Variant With the mini variant, the Navigation Drawer changes its width instead of closing. It is used to maintain quick navigation, available at all times, leaving just the icons. To achieve that, you only need to set up the `mini` slot of the drawer. @@ -588,7 +585,6 @@ And here's the result: } ``` - ## Styling The [`IgbNavDrawer`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNavDrawer.html) exposes several CSS parts - `base`, `main`, and `mini`, giving you full control over their styling. @@ -733,7 +729,6 @@ igc-nav-drawer-header-item { } ``` - ## API References - [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/overview.md index a5bba0a36..8a72f44ac 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/overview.md @@ -1,194 +1,341 @@ --- -title: Free Blazor Data Grid Lite (Open Source) - Ignite UI Grid Lite | MIT license -_description: Create apps with our open-source Grid Lite. It’s lightweight and packed with essential features - filtering, hiding, sorting, and more. Try now. -_keywords: overview, Blazor, {ComponentKeywords}, Ignite UI for Blazor, Infragistics -mentionedTypes: [{ComponentApiMembers}] -namespace: Infragistics.Controls +title: Blazor ComboBox Component – Ignite UI for Blazor +_description: Blazor Combo component provides a powerful input, combining features of the basic HTML input, select, filtering and custom drop-down lists. Try it for FREE +_keywords: Ignite UI for Blazor, UI controls, Blazor widgets, web widgets, UI widgets, Blazor, Native Blazor Components Suite, Native Blazor Controls, Native Blazor Components Library, Blazor ComboBox component _license: MIT -_tocName: Grid Lite +mentionedTypes: ["Combo", "ComboItem", "ComboHeader", "ComboList"] +_tocName: Combo Box --- -# Free & Open-Source Blazor Data Grid (Grid Lite) +# Blazor ComboBox Overview -The Ignite UI for Blazor Grid Lite is a lightweight, high-performance Blazor data grid that’s free to use, open-source, and built for modern Blazor applications. +Blazor ComboBox is a lightweight editor that enables users to easily select, filter, and group different predefined options in a provided list. The component also supports options for Blazor ComboBox keyboard navigation, templates to customize how the items, header, and footer are displayed. -This free Blazor data grid is open-source JavaScript data grid built as a Web Component, which means you can use it dependency-free with or without a web framework. It delivers essential data-display functionality with minimal overhead and the performance users expect. The Blazor Grid Lite is designed for developers who need fast and lightweight data presentation. +The Ignite UI for Blazor ComboBox component provides a list of options from which users can make a selection. It displays all options in a virtualized list of items, meaning the ComboBox can simultaneously show thousands of records, where one or more options can be selected. Additionally, the component features case-sensitive filtering, grouping, complex data binding and more. -## What You Get with our Free Blazor Data Grid +## Blazor ComboBox Example -Our free, open-source Blazor Grid Lite comes with the following column-based features: sorting, filtering, hiding, resizing and a variety of pre-defined data types. Blazing-fast performance is delivered with the use of row virtualization. In addition, the component supports keyboard navigation and theming through the [Ignite UI Theming Framework](../themes/overview.md). - -### Install IgniteUI.Blazor.GridLite +```razor +@using IgniteUI.Blazor.Controls -In Visual Studio, open the NuGet package manager by selecting **Tools** → **NuGet Package Manager** → **Manage NuGet Packages for Solution**. Search for and install the **IgniteUI.Blazor.GridLite** NuGet package. +
+ +
-Or install via the Package Manager Console: +@code { + private List Data; -```cmd -Install-Package IgniteUI.Blazor.GridLite + protected override void OnInitialized() { + this.Data = SampleData.Cities; + } +} ``` -Or via .NET CLI: - -```cmd -dotnet add package IgniteUI.Blazor.GridLite -``` +
-### Using Grid Lite +## Getting Started with Blazor ComboBox -1 - Add the **IgniteUI.Blazor.Controls** namespace in the **\_Imports.razor** file: +To get started with the [`IgbCombo`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html) component, first we need to register its module as follows: ```razor -@using IgniteUI.Blazor.Controls +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); ``` -2 - Add the Style Sheet in the appropriate location based on your project type: +You will also need to link an additional CSS file to apply the styling to the [`IgbCombo`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html) component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/\_Host.cshtml** file in a **Blazor Server** project: ```razor - - - + ``` -3 - Add the Grid Lite component to your razor page: +> [!WARNING] +> The [`IgbCombo`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html) component doesn't work with the standard `` element. Use `Form` instead. + +Then, we will bind an array of objects to the combo data source used for building the list of options. ```razor - - + @code { - private object[] data = new object[] - { - new { Name = "John", Age = 30, City = "New York" }, - new { Name = "Jane", Age = 25, City = "Los Angeles" }, - new { Name = "Bob", Age = 35, City = "Chicago" } + private class City { + public string Id { get; set; } + public string Name { get; set; } + public string Country { get; set; } + } + + private List Data = new List { + new City { + Id = "UK01", + Name = "London", + Country = "United Kingdom", + }, + new City { + Id = "BG01", + Name = "Sofia", + Country = "Bulgaria", + }, + new City { + Id = "US01", + Name = "New York", + Country = "United States", + }, }; } ``` -## Grid Lite in Action +### Data value and display properties + +When the combo is bound to a list of complex data (i.e. objects), we need to specify a property that the control will use to handle item selection. The component exposes the following properties: + + + +- `T` - **required**, if [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey) is omitted, this should be set to "object", otherwise this needs to match the property type of [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey). + + + +- [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey) - **Optional**, **required** for complex data object - Determines which field of the data source will be used to make selections. If [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey) is omitted, the selection API will use object references to select items. +- [`DisplayKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_DisplayKey) - **Optional**, **recommended** for complex data objects - Determines which field in the data source is used as the display value. If no value is specified for [`DisplayKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_DisplayKey), the combo will use the specified [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey) (if any). + In our case, we want the combo to display the `name` of each city and use the `id` field for item selection and as the underlying value for each item. Therefore, we provide these properties to the combo's [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey) and [`DisplayKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_DisplayKey) respectively. + +> [!Note] +> When the data source consists of primitive types (e.g. `strings`, `numbers`, etc.), **do not** specify a [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey) and/or [`DisplayKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_DisplayKey). + +### Setting Value + +The ComboBox component exposes a [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_Value) getter and setter in addition to an attribute, which is also called value. You can use the value attribute to set the selected items on component initialization. + +If you want to read the value, i.e. the list of currently selected items, or to update the value use the value getter and setter respectively. The value getter will return a list of all selected items as represented by the [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey). Likewise, if you want to update the list of selected items by using the value setter, you should provide a list of items by their [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey). + +Example: + +### Selection API + +The combo component exposes APIs that allow you to change the currently selected items. + +Besides selecting items from the list of options by user interaction, you can select items programmatically. This is done via the [`Select`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_Select) and [`Deselect`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_Deselect) methods. You can pass an array of items to both methods. If the methods are called with no arguments all items will be selected/deselected depending on which method is called. If you have specified a [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey) for your combo component, then you should pass the value keys of the items you would like to select/deselect: + +#### Select/deselect some items ```razor -@page "/" -@using Microsoft.AspNetCore.Components -@using Microsoft.AspNetCore.Components.Web -@using IgniteUI.Blazor.Controls + + + +@code { + private List Data; + private IgbCombo Combo; + private object[] Cities; -
+ protected override void OnInitialized() { + this.Data = SampleData.Cities; + this.Cities = new object[] { "UK01", "UK02", "UK03", "UK04", "UK05" }; + } - @if (users != null && columns != null) - { - + public void SelectCities() { + this.Combo.Select(Cities); } -
+ public void DeselectCities() { + this.Combo.Deselect(Cities); + } +} +``` + +#### Select/deselect all items + +```razor @code { - private List users; - private List columns; - - protected override void OnInitialized() - { - // Generate 1000 users like in the original sample - users = MockDataGenerator.CreateUsers(1000); - - columns = new List - { - new IgbColumnConfiguration - }, - new IgbColumnConfiguration - { - Key = nameof(User.FirstName), - HeaderText = "First name", - Sort = true, - Filter = true, - Resizable = true - }, - new IgbColumnConfiguration - { - Key = nameof(User.LastName), - HeaderText = "Last name", - Sort = true, - Filter = true, - Resizable = true - }, - new IgbColumnConfiguration - { - Key = nameof(User.Email), - HeaderText = "Email Address", - Type = GridLiteColumnDataType.String - }, - new IgbColumnConfiguration - { - Key = nameof(User.Priority), - HeaderText = "Priority", - Width = "150px", - Sort = true - }, - new IgbColumnConfiguration - { - Key = nameof(User.Satisfaction), - HeaderText = "Satisfaction rating", - Type = GridLiteColumnDataType.Number, - Sort = true, - Filter = true, - Width = "180px" - }, - new IgbColumnConfiguration - { - Key = nameof(User.RegisteredAt), - HeaderText = "Registered @", - Type = GridLiteColumnDataType.Date, - Sort = true, - Width = "180px" - }, - new IgbColumnConfiguration - { - Key = nameof(User.Active), - Type = GridLiteColumnDataType.Boolean, - HeaderText = "Active", - Width = "100px" - } - }; + public void SelectAll() { + this.Combo.Select(new object[] {}); + } + + public void DeselectAll() { + this.Combo.Deselect(new object[] {}); } } ``` +If the [`ValueKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ValueKey) property is omitted, you will have to list the items you wish to select/deselect as objects references: -Grid Lite is designed to give you the core features that you need to deliver a beautiful data grid / data table experience in your apps. Designed for performance and beauty, the Grid Lite will work in any framework, on any platform. +```razor +@using IgniteUI.Blazor.Controls -## Performance Built In +
+ + + + + +
+ Select UK Cities + Deselect UK Cities + Select All + Deselect All +
+
+ +@code { + private List Data; + private IgbCombo Combo; + private object[] UKCities; + + protected override void OnInitialized() { + this.Data = SampleData.Cities; + this.UKCities = new object[] { "UK01", "UK02", "UK03", "UK04", "UK05" }; + } + + public void SelectUKCities() { + this.Combo.Select(UKCities); + } -Row-level virtualization allows you to render unlimited amounts of data with smooth scrolling. + public void DeselectUKCities() { + this.Combo.Deselect(UKCities); + } -## Automatic Column Types + public void SelectAll() { + this.Combo.Select(new object[] {}); + } -Column types are automatically generated based on your data source, with built-in filtering tailored to each column type. + public void DeselectAll() { + this.Combo.Deselect(new object[] {}); + } +} +``` -## Interactive Features +### Validation + +The Ignite UI for Blazor Combo component supports most of the [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html) properties, such as [`Required`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_Required), [`Disabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_Disabled), [`Autofocus`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_Autofocus), [`Invalid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_Invalid), etc. The component also exposes two methods bound to its validation: + +- [`ReportValidity`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_ReportValidity) - checks for validity and returns true if the component satisfies the validation constraints. +- [`CheckValidity`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html#IgniteUI_Blazor_Controls_IgbCombo_CheckValidity) - a wrapper around reportValidity to comply with the native input API. + +## Keyboard Navigation + +When the combo component is focused and the list of options is **not visible**: + +- Open the list of options using Down/Alt + Down keys. + +When the combo component is focused and the list of options is **visible**: + +- Using the Down key will activate the next item in the list. +- Using the Up key will activate the previous item in the list. If the first item is already active it will focus the input. +- Using the HOME or END keys will activate the first or the last item in the list. +- Using the SPACE key will select the active item. +- Using the ENTER key will select the active item and close the list of options. +- Using the ESC or TAB/SHIFT + TAB keys will close the list of options. + +## Styling + +You can change the appearance of the [`IgbCombo`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html) component and its items, by using the exposed CSS parts listed below: + +| Part name | Description | +| -------------------- | ------------------------------------------------------------------------------- | +| `label` | The encapsulated text label. | +| `input` | The main input field. | +| `native-input` | The native input of the main input field. | +| `prefix` | The prefix wrapper. | +| `suffix` | The suffix wrapper. | +| `toggle-icon` | The toggle icon wrapper. | +| `clear-icon` | The clear icon wrapper. | +| `case-icon` | A case-icon wrapper that renders content inside the suffix of the filter-input. | +| `helper-text` | The helper text wrapper. | +| `search-input` | The search input field. | +| `list-wrapper` | The list of options wrapper. | +| `list` | The list of options box. | +| `item` | Represents each item in the list of options. | +| `group-header` | Represents each header in the list of options. | +| `active` | Appended to the item parts list when the item is active. | +| `selected` | Appended to the item parts list when the item is selected. | +| `checkbox` | Represents each checkbox of each list item. | +| `checkbox-indicator` | Represents the checkbox indicator of each list item. | +| `checked` | Appended to checkbox parts list when checkbox is checked. | +| `header` | The container holding the header content. | +| `footer` | The container holding the footer content. | +| `empty` | The container holding the empty content. | + +Using the CSS parts we have full control over the Combo styling. + +```css +igc-combo::part(search-input) { + background-color: var(--ig-gray-100); + border-radius: 2px; +} -All the core interactive features your users expect: column filtering, column hiding, column resizing, column sorting, and more. +igc-combo::part(input) { + background-color: var(--ig-gray-100); +} -## Beautiful UX & Branding +igc-combo::part(prefix) { + background-color: var(--ig-secondary-50); + color: var(--ig-primary-500); +} -Built-in theme support for Bootstrap, Material & Fluent, plus endless branding options in color palettes, fonts, elevation, display density & more. +igc-combo::part(toggle-icon) { + color: var(--ig-primary-500); +} +``` -## Rich Keyboard Navigation +```razor +@using IgniteUI.Blazor.Controls -Full Excel-style keyboard navigation gives users the experience they expect, with high performance even on large datasets. +
+ + Choose the desired place + + +
-## Is Grid Lite a Free & Open-Source Blazor Data Grid? +@code { + private List Data; + private IgbIcon locationIconRef { get; set; } + private string placeSvg = ""; -Yes. Ignite UI Grid Lite is a free, open-source Blazor data grid released under the MIT license. You can use it in commercial or personal projects with no licensing fees. It is part of our initiative to make Ignite UI more open, transparent, and accessible. + protected override void OnInitialized() { + this.Data = SampleData.Cities; + } -- MIT-licensed + protected override void OnAfterRender(bool firstRender) { + if (firstRender) { + this.locationIconRef.EnsureReady().ContinueWith(new Action((e) => { + this.locationIconRef.RegisterIconFromTextAsync("place", placeSvg, "material"); + })); + } + } +} +``` -- Free for commercial use +## API Reference -- Community-driven development +- [`IgbCombo`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCombo.html) +- [`Styling & Themes`](../../themes/overview.md) -- No feature gating +## Additional Resources -However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free Blazor data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster. +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pie-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pie-chart.md index 6415f3e4f..9c5b2d72d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pie-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pie-chart.md @@ -104,7 +104,6 @@ public class EnergyGlobalDemand } ``` -
## Blazor Pie Chart Recommendations @@ -152,9 +151,9 @@ Do Not Use Pie Chart When: Legends are used to show information about each point, to know about its contribution towards the total sum. You can collapse the point using legend click. -In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`Legend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_Legend) property. The [`LegendLabelMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_LegendLabelMemberPath) can then be used to specify which property on your data model it will use to display inside the legend for each pie slice. +In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`Legend`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_Legend) property. The [`LegendLabelMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_LegendLabelMemberPath) can then be used to specify which property on your data model it will use to display inside the legend for each pie slice. -Additionally you can use the [`LegendItemTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_LegendItemTemplate) and [`LegendItemBadgeTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_LegendItemBadgeTemplate) properties and the various font properties on ItemLegend to further customize the look of the legend items. +Additionally you can use the [`LegendItemTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_LegendItemTemplate) and [`LegendItemBadgeTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_LegendItemBadgeTemplate) properties and the various font properties on ItemLegend to further customize the look of the legend items. ```razor @using IgniteUI.Blazor.Controls @@ -245,16 +244,15 @@ public class EnergyGlobalDemand } ``` -
## Blazor Pie Chart Others Category Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice -In the sample below, the [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryThreshold) is set to 2, and [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryType) is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category. +In the sample below, the [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_OthersCategoryThreshold) is set to 2, and [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_OthersCategoryType) is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category. -If you set [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryType) to Percent, then [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryThreshold) will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryType) is most appropriate for your application. +If you set [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_OthersCategoryType) to Percent, then [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_OthersCategoryThreshold) will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_OthersCategoryType) is most appropriate for your application. ```razor @using IgniteUI.Blazor.Controls @@ -348,7 +346,6 @@ public class EnergyGlobalDemand } ``` -
## Blazor Pie Chart Explosion @@ -471,14 +468,13 @@ The pie chart supports explosion of individual pie slices as well as a `SliceCli } ``` -
## Blazor Pie Chart Selection -The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the [`SelectedItems`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_SelectedItems) property. The selected slices are then highlighted. +The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the [`SelectedItems`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_SelectedItems) property. The selected slices are then highlighted. -There is a property called [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_SelectionMode) which is how you set what mode you want the pie chart to use. The default value is `Single`. In order to disable selection, set the property to `Manual`. +There is a property called [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_SelectionMode) which is how you set what mode you want the pie chart to use. The default value is `Single`. In order to disable selection, set the property to `Manual`. The pie chart supports three different selection modes. @@ -563,7 +559,6 @@ For scenarios where you click on the Others slice, the pie chart will return an } ``` -
## Blazor Pie Chart Animation @@ -663,7 +658,6 @@ In the code below, the radiusFactor is increasing the chart by 0.25% of the size } ``` -
## Blazor Pie Chart Styling @@ -761,7 +755,6 @@ public class EnergyGlobalDemand } ``` -
## Blazor Radial Pie Chart @@ -908,7 +901,6 @@ public class FootballPlayerStats } ``` -
## Additional Resources @@ -921,12 +913,12 @@ public class FootballPlayerStats The following table lists API members mentioned in the above sections: -- [`LegendItemBadgeTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_LegendItemBadgeTemplate) -- [`LegendItemTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_LegendItemTemplate) -- [`LegendLabelMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_LegendLabelMemberPath) -- [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryThreshold) -- [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_OthersCategoryType) -- [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChartBase.html#IgniteUI_Blazor_Controls_IgbPieChartBase_SelectionMode) +- [`LegendItemBadgeTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_LegendItemBadgeTemplate) +- [`LegendItemTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_LegendItemTemplate) +- [`LegendLabelMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_LegendLabelMemberPath) +- [`OthersCategoryThreshold`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_OthersCategoryThreshold) +- [`OthersCategoryType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_OthersCategoryType) +- [`SelectionMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPieChart.html#IgniteUI_Blazor_Controls_IgbPieChart_SelectionMode) |Chart Type | Control Name | API Members | |-----------------|----------------|------------ | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-features.md index 086cd7b45..70ec34465 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-features.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-features.md @@ -158,7 +158,6 @@ public class PivotDataFlat } ``` - ## Dimensions Sorting Dimension values in the `rows` or `columns` can be sorted via the related chip or the API. This functionality is embedded and enabled by default. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-overview.md index 9eac63b9d..11df545a4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-overview.md @@ -183,7 +183,6 @@ public class PivotSalesData } ``` - ## Getting Started With Blazor Pivot Grid The Blazor PivotGrid can be configured via the [`PivotConfiguration`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPivotGrid.html#IgniteUI_Blazor_Controls_IgbPivotGrid_PivotConfiguration) property. @@ -498,7 +497,6 @@ public class PivotDataFlat } ``` - ### Auto generate configuration The [`AutoGenerateConfig`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPivotGrid.html#IgniteUI_Blazor_Controls_IgbPivotGrid_AutoGenerateConfig) property automatically generates dimensions and values based on the data source fields: @@ -586,7 +584,7 @@ When overriding the [`IgbPivotKeys`](https://www.infragistics.com/blazor/docs/ap |Limitation|Description| |--- |--- | -| Setting columns declaratively is not supported. | The Pivot grid generates its columns based on the [`Columns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Columns) configuration, so setting them declaratively, like in the base grid, is not supported. Such columns are disregarded. | +| Setting columns declaratively is not supported. | The Pivot grid generates its columns based on the [`Columns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPivotGrid.html#IgniteUI_Blazor_Controls_IgbPivotGrid_Columns) configuration, so setting them declaratively, like in the base grid, is not supported. Such columns are disregarded. | | Setting duplicate [`MemberName`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPivotDimension.html#IgniteUI_Blazor_Controls_IgbPivotDimension_MemberName) or [`Member`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPivotValue.html#IgniteUI_Blazor_Controls_IgbPivotValue_Member) property values for dimensions/values. | These properties should be unique for each dimension/value. Duplication may result in loss of data from the final result. | | Row Selection is only supported in **Single** mode. | Multiple selection is currently not supported. | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-state-persistence.md index 39e870fe1..8c8c36b9d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/pivot-grid-state-persistence.md @@ -538,7 +538,6 @@ public class PivotDataFlat } ``` - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/point-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/point-chart.md index aea3cd9f3..b5197e44a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/point-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/point-chart.md @@ -109,7 +109,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Point Chart with Single Series @@ -192,7 +191,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Point Chart with Multiple Series @@ -291,7 +289,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Point Chart Styling @@ -394,7 +391,6 @@ public class CountryRenewableElectricity } ``` -
## Advanced Types of Point Charts diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/polar-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/polar-chart.md index e68aaea6f..a7aa305ea 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/polar-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/polar-chart.md @@ -164,7 +164,6 @@ public class BoatSailingData } ``` -
## Blazor Polar Spline Area Chart @@ -301,7 +300,6 @@ public class BoatSailingData } ``` -
## Blazor Polar Marker Chart @@ -434,7 +432,6 @@ public class BoatSailingData } ``` -
## Blazor Polar Line Chart @@ -586,7 +583,6 @@ public class BoatSailingData } ``` -
## Blazor Polar Spline Chart @@ -721,7 +717,6 @@ public class BoatSailingData } ``` -
## Blazor Polar Chart Styling @@ -873,7 +868,6 @@ public class BoatSailingData } ``` -
## Additional Resources @@ -898,8 +892,8 @@ The following table lists API members mentioned in the above sections: - [`IgbPolarSplineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarSplineSeries.html) - [`IgbPolarSplineAreaSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarSplineAreaSeries.html) - [`IgbPolarScatterSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarScatterSeries.html) -- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) -- [`AngleMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarBase.html#IgniteUI_Blazor_Controls_IgbPolarBase_AngleMemberPath) -- [`RadiusMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarBase.html#IgniteUI_Blazor_Controls_IgbPolarBase_RadiusMemberPath) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarAreaSeries.html#IgniteUI_Blazor_Controls_IgbPolarAreaSeries_DataSource) +- [`AngleMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarAreaSeries.html#IgniteUI_Blazor_Controls_IgbPolarAreaSeries_AngleMemberPath) +- [`RadiusMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbPolarAreaSeries.html#IgniteUI_Blazor_Controls_IgbPolarAreaSeries_RadiusMemberPath) - [`IgbNumericAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericAngleAxis.html) - [`IgbNumericRadiusAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericRadiusAxis.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radial-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radial-chart.md index 2249f2ca5..ca09dffed 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radial-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radial-chart.md @@ -159,7 +159,6 @@ public class FootballPlayerStats } ``` -
## Blazor Radial Column Chart @@ -306,7 +305,6 @@ public class FootballPlayerStats } ``` -
## Blazor Radial Line Chart @@ -455,7 +453,6 @@ public class FootballPlayerStats } ``` -
## Blazor Radial Pie Chart @@ -602,7 +599,6 @@ public class FootballPlayerStats } ``` -
## Blazor Radial Chart Styling @@ -748,7 +744,6 @@ public class FootballPlayerStats } ``` -
## Blazor Radial Chart Settings @@ -776,9 +771,9 @@ The following table lists API members mentioned in the above sections: - [`IgbRadialColumnSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialColumnSeries.html) - [`IgbRadialLineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialLineSeries.html) - [`IgbRadialPieSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialPieSeries.html) -- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialLineSeries.html#IgniteUI_Blazor_Controls_IgbRadialLineSeries_DataSource) - `AngleAxisName` - `ValueAxisName` -- [`ValueMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbAnchoredRadialSeries.html#IgniteUI_Blazor_Controls_IgbAnchoredRadialSeries_ValueMemberPath) +- [`ValueMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialLineSeries.html#IgniteUI_Blazor_Controls_IgbRadialLineSeries_ValueMemberPath) - [`IgbCategoryAngleAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryAngleAxis.html) - [`IgbNumericRadiusAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericRadiusAxis.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radial-gauge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radial-gauge.md index 36ae6134d..c88c2ecd3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radial-gauge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radial-gauge.md @@ -493,7 +493,6 @@ The following sample demonstrates how setting multiple properties on the same [` } ``` -
Please refer to these topics on adding the IgniteUI.Blazor package. @@ -608,7 +607,6 @@ The backing can be circular or fitted. A circular shape creates a 360 degree cir } ``` - ## Scale The scale is visual element that highlights full range of values in the gauge which can be created by supplying [`MinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MinimumValue) and [`MaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MaximumValue) values. Together with backing, it defines overall shape of gauge. The [`ScaleStartAngle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_ScaleStartAngle) and [`ScaleEndAngle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_ScaleEndAngle) properties define bounds of arc of the scale. While, the [`ScaleSweepDirection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_ScaleSweepDirection) property specifies whether the scale sweeps in clockwise or counter-clockwise direction. You can customize appearance of the scale by setting [`ScaleBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_ScaleBrush), [`ScaleStartExtent`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_ScaleStartExtent), and [`ScaleEndExtent`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_ScaleEndExtent) properties. @@ -659,7 +657,6 @@ The scale is visual element that highlights full range of values in the gauge wh } ``` - ## Labels and Titles The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the [`MinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MinimumValue) and [`MaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MaximumValue) properties. You can position labels by setting the [`LabelExtent`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_LabelExtent) property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as [`FontBrush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_FontBrush) and [`Font`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_Font). @@ -706,7 +703,6 @@ Each of these labels for the needle have various styling attributes you can appl } ``` - ## Title & Subtitle [`TitleText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_TitleText) and [`SubtitleText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_SubtitleText) properties are available and can both be used to display custom text for the needle. Alternatively, [`TitleDisplaysValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_TitleDisplaysValue) and [`SubtitleDisplaysValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_SubtitleDisplaysValue), when set to true, will let display the needle's value and override [`TitleText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_TitleText) and [`SubtitleText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_SubtitleText). So you can occupy custom text for the title but show the value via the subtitle and vice versa. @@ -774,7 +770,6 @@ The radial gauge's labels and titles can change it's scaling. To enable this, fi } ``` - ## Tick Marks Tick marks are thin lines radiating from the center of the radial gauge. There are two types of tick marks: major and minor. Major tick marks are displayed at the [`Interval`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_Interval) between the [`MinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MinimumValue) and [`MaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MaximumValue) properties. Use the [`MinorTickCount`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MinorTickCount) property to specify the number of minor tick marks displayed between each major tick mark. You can control the length of tick marks by setting a fraction (between 0 and 1) to [`TickStartExtent`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_TickStartExtent), [`TickEndExtent`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_TickEndExtent), [`MinorTickStartExtent`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MinorTickStartExtent), and [`MinorTickEndExtent`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MinorTickEndExtent) properties. @@ -828,7 +823,6 @@ Tick marks are thin lines radiating from the center of the radial gauge. There a } ``` - ## Ranges A range highlights a set of continuous values bound by a specified [`MinimumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MinimumValue) and [`MaximumValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_MaximumValue) properties. You can add multiple ranges to the radial gauge by specifying their starting and ending values. Each range has a few customization properties such as [`Brush`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGaugeRange.html#IgniteUI_Blazor_Controls_IgbRadialGaugeRange_Brush) and [`Outline`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGaugeRange.html#IgniteUI_Blazor_Controls_IgbRadialGaugeRange_Outline). Alternatively, you can set [`RangeBrushes`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_RangeBrushes) and [`RangeOutlines`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_RangeOutlines) properties to a list of colors for the ranges. @@ -890,7 +884,6 @@ A range highlights a set of continuous values bound by a specified [`MinimumValu } ``` - ## Needle Radial gauge needles are visual elements used to signify a gauge set value. Needles are available in one of the several predefined shapes. The needle can have a pivot shape, which is placed in the center of the gauge. The pivot shape also takes one of the predefined shapes. Pivot shapes that include an overlay or an underlay can have a separate pivot brush applied to the shape. @@ -955,7 +948,6 @@ You can enable an interactive mode of the gauge (using [`IsNeedleDraggingEnabled } ``` - ## Highlight Needle The radial gauge can be modified to show a second needle. This will make the main needle's [`Value`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_Value) appear with a lower opacity. To enable this first set [`HighlightValueDisplayMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_HighlightValueDisplayMode) to Overlay and then apply a [`HighlightValue`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadialGauge.html#IgniteUI_Blazor_Controls_IgbRadialGauge_HighlightValue). @@ -1004,7 +996,6 @@ The radial gauge can be modified to show a second needle. This will make the mai } ``` - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the radial gauge with all features and visuals enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radio.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radio.md index 986c3b9f6..4761702d7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radio.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/radio.md @@ -34,7 +34,6 @@ The Ignite UI for Blazor Radio component allows the user to select a single opti } ``` -
### Usage @@ -112,7 +111,6 @@ The [`IgbRadio`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazo } ``` - ### Checked You can use the `checked` attribute to toggle on the radio. @@ -147,7 +145,6 @@ You can use the `checked` attribute to toggle on the radio. } ``` - ### Invalid You can use the `invalid` attribute to mark the radio as invalid. @@ -169,7 +166,6 @@ You can use the `invalid` attribute to mark the radio as invalid. } ``` - ### Disabled You can use the `disabled` attribute to disable the radio. @@ -204,7 +200,6 @@ You can use the `disabled` attribute to disable the radio. } ``` - ### Group Alignment The [`IgbRadioGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRadioGroup.html) allows you to easily change the placement directionality of the radio buttons it contains using the `alignment` attribute. Allowed values are `vertical`(default) and `horizontal`. @@ -236,7 +231,6 @@ The [`IgbRadioGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI. } ``` - ### Forms You can use the `name` and `value` attributes when using the radio with `Form`. @@ -304,7 +298,6 @@ igc-radio::part(label) { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/rating.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/rating.md index efdfb517c..98fb764d9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/rating.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/rating.md @@ -21,7 +21,6 @@ The Ignite UI for Blazor Rating component allows users to view and provide feedb @code { } ``` - Before using the [`IgbRating`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRating.html), you need to register it as follows: ```razor @@ -103,7 +102,6 @@ The [`IgbRating`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blaz } ``` - > The number of rating symbols between the opening and closing brackets of the rating component determines the max value. ## Single Selection @@ -151,7 +149,6 @@ The Ignite UI for Blazor Rating component has a single selection mode that allow @code { } ``` - > Keep in mind that the `step` attribute doesn't work with single selection mode. ## Empty & Selected @@ -210,7 +207,6 @@ The Ignite UI for Blazor Rating component allows users to use different icons/el } ``` - ## Configuration ### Single @@ -311,7 +307,6 @@ igc-rating::part(empty) { @code { } ``` - ## API Reference - [`IgbRating`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRating.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/ripple.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/ripple.md index 0fd50ef7d..29b9a39cc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/ripple.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/ripple.md @@ -29,7 +29,6 @@ The Ignite UI for Blazor Ripple component creates an animation in response to a } ``` - ## Usage Before using the [`IgbRipple`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRipple.html), you need to register it as follows: @@ -92,7 +91,6 @@ igc-ripple { } ``` - ## API References - [`IgbButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbButton.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/scatter-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/scatter-chart.md index f25bbf5d5..2d6cb6979 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/scatter-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/scatter-chart.md @@ -186,7 +186,6 @@ public class CountryDemographicEurope } ``` -
## Blazor Scatter Line Chart @@ -371,7 +370,6 @@ public class HealthDataForGermany } ``` -
## Blazor Scatter Spline Chart @@ -556,7 +554,6 @@ public class HealthDataForGermany } ``` -
## Blazor Scatter High Density Chart @@ -620,7 +617,6 @@ Use the Blazor Scatter High Density (HD) Chart to bind and show scatter data ran } ``` -
## Blazor Scatter Area Chart @@ -687,7 +683,6 @@ Blazor Scatter Area Chart draws a colored surface based on a triangulation of X } ``` -
## Blazor Scatter Contour Chart @@ -754,7 +749,6 @@ Blazor Scatter Contour Chart draws colored contour lines based on a triangulatio } ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/select.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/select.md index 8aef30bda..027a456bd 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/select.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/select.md @@ -28,7 +28,6 @@ The Ignite UI for Blazor Select component allows a single selection from a list @code { } ``` -
## Usage @@ -106,7 +105,6 @@ The [`IgbSelectItem`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI. } ``` - ### Header You can use the [`IgbSelectHeader`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSelectHeader.html) to provide a header for a group of items. @@ -127,7 +125,6 @@ You can use the [`IgbSelectHeader`](https://www.infragistics.com/blazor/docs/api @code { } ``` - ```razor Tasks @@ -234,7 +231,6 @@ Multiple [`IgbSelectItem`](https://www.infragistics.com/blazor/docs/api/api/Igni } ``` - ```razor diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/shape-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/shape-chart.md index d64815bdc..803bef738 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/shape-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/shape-chart.md @@ -102,7 +102,6 @@ You can create this type of chart in the [`IgbDataChart`](https://www.infragisti } ``` -
## Blazor Scatter Polyline Chart @@ -192,7 +191,6 @@ You can create this type of chart in the [`IgbDataChart`](https://www.infragisti } ``` -
## Additional Resources @@ -210,8 +208,8 @@ The following table lists API members mentioned in the above sections: - [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) - [`IgbScatterPolygonSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolygonSeries.html) - [`IgbScatterPolylineSeries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolylineSeries.html) -- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSeries.html#IgniteUI_Blazor_Controls_IgbSeries_DataSource) -- [`ShapeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbShapeSeriesBase.html#IgniteUI_Blazor_Controls_IgbShapeSeriesBase_ShapeMemberPath) +- [`DataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolygonSeries.html#IgniteUI_Blazor_Controls_IgbScatterPolygonSeries_DataSource) +- [`ShapeMemberPath`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbScatterPolygonSeries.html#IgniteUI_Blazor_Controls_IgbScatterPolygonSeries_ShapeMemberPath) - [`IgbNumericXAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericXAxis.html) - [`IgbNumericYAxis`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbNumericYAxis.html) - `YAxisName` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/single-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/single-selection.md index 5cea00cf9..06fb82bca 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/single-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/single-selection.md @@ -71,7 +71,6 @@ To enable single-selection and quick filtering, set the [`SingleSelect`](https:/ } ``` -
## Selection API diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/skills.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/skills.md new file mode 100644 index 000000000..502a2e7e2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/skills.md @@ -0,0 +1,253 @@ +--- +title: Agent Skills | AI Skills | AI-Assisted Development | Ignite UI for Blazor | Infragistics +_description: Learn how to use Agent Skills to supercharge AI-assisted development with Ignite UI for Blazor components, grids, data operations, and theming. +_keywords: Ignite UI for Blazor, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie +_license: MIT +mentionedTypes: [] +last_updated: "2026-04-24" +_tocName: Agent Skills +--- + + + +# Ignite UI for Blazor Agent Skills + +Ignite UI for Blazor ships with **[Agent Skills](https://agentskills.io/)** - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Blazor. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. + +> [!NOTE] +> The AI tooling landscape is evolving rapidly. Skill discovery locations and distribution options may change as tools and IDEs are updated. Always consult the official documentation for your specific tool or agent for the latest information. + +## Available Skills + +The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-blazor/tree/master/skills) directory of the Ignite UI for Blazor repository: + +| Skill | Path | Description | +|:------|:-----|:------------| +| Components & Layout | [`skills/igniteui-blazor-components/SKILL.md`](https://github.com/IgniteUI/igniteui-blazor/blob/master/skills/igniteui-blazor-components/SKILL.md) | Components, form controls, overlays, layout | +| Data Grids | [`skills/igniteui-blazor-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-blazor/blob/master/skills/igniteui-blazor-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Grid Lite, sorting, filtering, grouping, paging, remote data | +| Theming & Styling | [`skills/igniteui-blazor-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-blazor/blob/master/skills/igniteui-blazor-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Generate From Image Design | [`skills/igniteui-blazor-generate-from-image-design/SKILL.md`](https://github.com/IgniteUI/igniteui-blazor/blob/master/skills/igniteui-blazor-generate-from-image-design/SKILL.md) | Build Blazor apps from screenshots, mockups, and wireframes using Ignite UI components | + +## Skill Locations + +Each AI coding tool discovers skills from specific directories. Place your skill files in the appropriate location so your AI assistant can find and use them automatically. The general `.agents/skills/` convention is supported across multiple tools, while each tool also has its own specific directories. + +### General (`.agents/skills/`) + +The `.agents/skills/` directory is a cross-agent convention supported by multiple tools, including [VS Code with Copilot](https://code.visualstudio.com/docs/copilot/customization/agent-skills), [OpenAI Codex](https://developers.openai.com/codex/skills), [Cursor](https://cursor.com/docs/skills), [Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers), [Antigravity](https://antigravity.google/docs/skills), and [Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes). Copy the skill directories into `.agents/skills/` in your project root: + +``` +.agents/ + skills/ + igniteui-blazor-components/ + SKILL.md + igniteui-blazor-grids/ + SKILL.md + igniteui-blazor-theming/ + SKILL.md + igniteui-blazor-generate-from-image-design/ + SKILL.md +``` + +For user-level (global) skills available across all projects, use `~/.agents/skills/` instead. + +### GitHub Copilot + +[GitHub Copilot](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Project | `.github/skills/`, `.claude/skills/` | +| Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | + +> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. + +### Claude + +[Claude](https://code.claude.com/docs/en/skills#where-skills-live) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Project | `.claude/skills/` | +| Personal | `~/.claude/skills/` | + +### Cursor + +[Cursor](https://cursor.com/docs/skills#skill-directories) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Project | `.agents/skills/`, `.cursor/skills/` | +| User (global) | `~/.cursor/skills/` | + +### Gemini CLI and Antigravity + +[Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers) and [Antigravity](https://antigravity.google/docs/skills) discover skills from: + +| Scope | Location | +|:------|:---------| +| Workspace | `.gemini/skills/`, `.agents/skills/` | +| User | `~/.gemini/skills/`, `~/.agents/skills/` | + +> **Tip:** Use the `/skills` slash command in Gemini CLI to view and manage installed skills. + +### Junie (JetBrains IDEs) + +[Junie](https://junie.jetbrains.com/docs/agent-skills.html) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Project | `.junie/skills/` | +| User | `~/.junie/skills/` | + +### Windsurf + +[Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Workspace | `.windsurf/skills/`, `.agents/skills/` | +| Global | `~/.codeium/windsurf/skills/`, `~/.agents/skills/` | + +--- + +## Installing Skills + +Use one of the options below to download and place the skill files into the appropriate [skill location](#skill-locations) for your AI assistant. + +### **Option A - Use the Ignite UI CLI** + +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files — all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below. + +```bash +ig ai-config --assistants generic --agents claude +``` + +Use `--agents` with multiple values to target several agents at once: + +```bash +ig ai-config --assistants generic vscode --agents claude copilot cursor +``` + +| Flag | Values | Default | +|------|--------|---------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively | + +### **Option B - Use the `GitHub CLI`** + +The GitHub CLI can be used to download skill files directly from the Ignite UI for Blazor repository. Run the following commands in your project root to start the installation process: + +```bash +gh skill install IgniteUI/igniteui-blazor +``` + +You will be asked to select which skills to install and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents. + +To update skills later, run the following command: + +```bash +gh skill update IgniteUI/igniteui-blazor +``` + +If Ignite UI for Blazor is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: + +**macOS / Linux / Windows (PowerShell)** + +```bash +cp -r node_modules/IgniteUI.Blazor/skills/. .agents/skills/ +``` + +**Windows (Command Prompt)** + +```cmd +robocopy node_modules\IgniteUI.Blazor\skills .agents\skills /E +``` + +Or copy individual skill directories as needed: + +**macOS / Linux / Windows (PowerShell)** + +```bash +cp -r node_modules/IgniteUI.Blazor/skills/igniteui-blazor-components .agents/skills/ +cp -r node_modules/IgniteUI.Blazor/skills/igniteui-blazor-grids .agents/skills/ +cp -r node_modules/IgniteUI.Blazor/skills/igniteui-blazor-theming .agents/skills/ +cp -r node_modules/IgniteUI.Blazor/skills/igniteui-blazor-generate-from-image-design .agents/skills/ +``` + +**Windows (Command Prompt)** + +```cmd +robocopy node_modules\IgniteUI.Blazor\skills\igniteui-blazor-components .agents\skills\igniteui-blazor-components /E +robocopy node_modules\IgniteUI.Blazor\skills\igniteui-blazor-grids .agents\skills\igniteui-blazor-grids /E +robocopy node_modules\IgniteUI.Blazor\skills\igniteui-blazor-theming .agents\skills\igniteui-blazor-theming /E +robocopy node_modules\IgniteUI.Blazor\skills\igniteui-blazor-generate-from-image-design .agents\skills\igniteui-blazor-generate-from-image-design /E +``` + +### **Option C - Use the `gemini skills` CLI** + +The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: + +- **User scope** (default) - installs skills globally for your user account, making them available across all projects. Skills are placed in `~/.gemini/skills/` or `~/.agents/skills/`. +- **Workspace scope** - installs skills locally into the current project directory under `.agents/skills/`, scoping them to that project only. + +**Install to user scope (default):** + +```bash +gemini skills install https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-components +gemini skills install https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-grids +gemini skills install https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-theming +gemini skills install https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-generate-from-image-design +``` + +**Install to workspace scope:** + +```bash +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-components +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-grids +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-theming +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-blazor.git --path skills/igniteui-blazor-generate-from-image-design +``` + +Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. + +### **Option D - Use the `npx skills` CLI** + +The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: + +```bash +npx skills add IgniteUI/IgniteUI.Blazor +``` + +The CLI will guide you through a series of prompts to: + +1. Select which skills to install (components, theming, etc.). +2. Choose the target location for the skill files in your project (e.g. `.agents/skills/`, `.github/skills/`). +3. Download and write the selected skill files automatically. + +Once complete, the skills are ready to use - no manual file copying required. + +> **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/IgniteUI.Blazor](https://github.com/IgniteUI/igniteui-blazor) repository. + +--- + +## Theming MCP Server + +The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file](https://github.com/IgniteUI/igniteui-blazor/blob/master/skills/igniteui-blazor-theming/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. + +For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./theming-mcp.md) documentation. + +## Additional Resources + +
+ +- [Getting Started with Ignite UI for Blazor](../general-getting-started.md) +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+Our community is active and always welcoming to new ideas. + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/slider.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/slider.md index f81da47bc..ec0b0ca30 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/slider.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/slider.md @@ -55,7 +55,6 @@ The Blazor Slider & Range Slider components allow selection in a given range by } ``` - ## Usage Before using the [`IgbSlider`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html) and [`IgbRangeSlider`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeSlider.html), you need to register them as follows: @@ -142,12 +141,11 @@ Both sliders emit two events when any of the values is changed. The [`IgbInput`] } ``` - -While dragging a slider thumb, it displays its value in a tooltip. You could hide this tooltip using the [`HideTooltip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_HideTooltip) property. +While dragging a slider thumb, it displays its value in a tooltip. You could hide this tooltip using the [`HideTooltip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_HideTooltip) property. ### Disabled -You can use the [`Disabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_Disabled) property of the sliders to disable their user interactions. +You can use the [`Disabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_Disabled) property of the sliders to disable their user interactions. ```razor @using IgniteUI.Blazor.Controls @@ -172,10 +170,9 @@ igc-slider { } ``` - ### Constraints -The track of the sliders has a minimum and maximum values which are configured using the [`Min`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_Min) and [`Max`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_Max) properties. Additionally, you can restrict the thumb dragging using the [`LowerBound`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_LowerBound) and [`UpperBound`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_UpperBound) properties. +The track of the sliders has a minimum and maximum values which are configured using the [`Min`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_Min) and [`Max`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_Max) properties. Additionally, you can restrict the thumb dragging using the [`LowerBound`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_LowerBound) and [`UpperBound`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_UpperBound) properties. ```razor @using IgniteUI.Blazor.Controls @@ -204,10 +201,9 @@ igc-slider { } ``` - ### Step -The [`Step`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_Step) property specifies the granularity of the slider that the value must adhere to. By default, the slider track looks continuous. Setting the [`DiscreteTrack`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_DiscreteTrack) property of the slider to **true** will make it to display the steps on the track. +The [`Step`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_Step) property specifies the granularity of the slider that the value must adhere to. By default, the slider track looks continuous. Setting the [`DiscreteTrack`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_DiscreteTrack) property of the slider to **true** will make it to display the steps on the track. ```razor @using IgniteUI.Blazor.Controls @@ -235,12 +231,11 @@ The [`Step`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Co } ``` - -If the [`Step`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_Step) property is set to `0`, no stepping is implied and any value in the slider range is allowed. In this case, the slider will look continuous even if [`DiscreteTrack`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_DiscreteTrack) is set to **true**. +If the [`Step`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html#IgniteUI_Blazor_Controls_IgbInput_Step) property is set to `0`, no stepping is implied and any value in the slider range is allowed. In this case, the slider will look continuous even if [`DiscreteTrack`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_DiscreteTrack) is set to **true**. ### Tick Marks -The slider components could display tick marks and labels. The slider components support two types of tick marks: primary and secondary. In order to display the primary tick marks, you should set the [`PrimaryTicks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_PrimaryTicks) property to a value greater than `1`. The number of primary ticks will be evenly distributed on the track. In order to display the secondary tick marks, you should set the [`SecondaryTicks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_SecondaryTicks) property to a value greater than `0`. The value of [`SecondaryTicks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_SecondaryTicks) specifies the number of secondary ticks between every two primary ticks. +The slider components could display tick marks and labels. The slider components support two types of tick marks: primary and secondary. In order to display the primary tick marks, you should set the [`PrimaryTicks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_PrimaryTicks) property to a value greater than `1`. The number of primary ticks will be evenly distributed on the track. In order to display the secondary tick marks, you should set the [`SecondaryTicks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_SecondaryTicks) property to a value greater than `0`. The value of [`SecondaryTicks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_SecondaryTicks) specifies the number of secondary ticks between every two primary ticks. ```razor @using IgniteUI.Blazor.Controls @@ -267,10 +262,9 @@ The slider components could display tick marks and labels. The slider components } ``` +Additionally, you could configure the orientation of the tick marks using the [`TickOrientation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_TickOrientation) property. By default, the [`TickOrientation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_TickOrientation) value is `end` which displays the ticks below the slider track. You could set it to `start` which displays them above the track and `mirror` which mirrors the ticks above and below the track. -Additionally, you could configure the orientation of the tick marks using the [`TickOrientation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_TickOrientation) property. By default, the [`TickOrientation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_TickOrientation) value is `end` which displays the ticks below the slider track. You could set it to `start` which displays them above the track and `mirror` which mirrors the ticks above and below the track. - -By default, the tick marks display labels with their values. You could modify the rotation of the tick labels using the `SliderTickLabelRotation` property. Additionally, you could hide the labels of the primary and secondary ticks using the [`HidePrimaryLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_HidePrimaryLabels) and [`HideSecondaryLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_HideSecondaryLabels) properties. +By default, the tick marks display labels with their values. You could modify the rotation of the tick labels using the `SliderTickLabelRotation` property. Additionally, you could hide the labels of the primary and secondary ticks using the [`HidePrimaryLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_HidePrimaryLabels) and [`HideSecondaryLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_HideSecondaryLabels) properties. ```razor @using IgniteUI.Blazor.Controls @@ -299,10 +293,9 @@ By default, the tick marks display labels with their values. You could modify th } ``` - ### Value Format -If you want to format the thumb and tick label values, the slider provides [`ValueFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_ValueFormat), [`ValueFormatOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_ValueFormatOptions) and [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_Locale) properties. Тhe [`ValueFormatOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_ValueFormatOptions) allows you to specify the number of fraction and significant digits, style (decimal, currency, percent, unit), notation and others taking into account the specified [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_Locale). The [`ValueFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_ValueFormat) is a string which may contain the `{0}` identifier which will be replaced by the value with applied format options. +If you want to format the thumb and tick label values, the slider provides [`ValueFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_ValueFormat), [`ValueFormatOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_ValueFormatOptions) and [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_Locale) properties. Тhe [`ValueFormatOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_ValueFormatOptions) allows you to specify the number of fraction and significant digits, style (decimal, currency, percent, unit), notation and others taking into account the specified [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_Locale). The [`ValueFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_ValueFormat) is a string which may contain the `{0}` identifier which will be replaced by the value with applied format options. ```razor @using IgniteUI.Blazor.Controls @@ -368,10 +361,9 @@ If you want to format the thumb and tick label values, the slider provides [`Val } ``` - ### Labels -In some cases you would want to format the values of the slider as string values i.e. map the values **\[0, 1, 2]** to **\['Low', 'Medium', 'High']**. For this scenario the slider allows you to define [`IgbSliderLabel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderLabel.html) elements inside it. The text content of the slider labels is going to be used for thumb and tick labels. Please note that when slider labels are provided, the [`Min`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_Min), [`Max`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_Max) and [`Step`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_Step) properties are automatically calculated so that they do not allow values that do not map to the provided labels. In the case of 'Low', 'Medium' and 'High' labels, [`Min`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_Min) is set to `0`, [`Max`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_Max) is set to `2` and [`Step`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_Step) is set to `1`. +In some cases you would want to format the values of the slider as string values i.e. map the values **\[0, 1, 2]** to **\['Low', 'Medium', 'High']**. For this scenario the slider allows you to define [`IgbSliderLabel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderLabel.html) elements inside it. The text content of the slider labels is going to be used for thumb and tick labels. Please note that when slider labels are provided, the [`Min`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_Min), [`Max`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_Max) and [`Step`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_Step) properties are automatically calculated so that they do not allow values that do not map to the provided labels. In the case of 'Low', 'Medium' and 'High' labels, [`Min`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_Min) is set to `0`, [`Max`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_Max) is set to `2` and [`Step`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_Step) is set to `1`. ```razor @using IgniteUI.Blazor.Controls @@ -402,7 +394,6 @@ In some cases you would want to format the values of the slider as string values } ``` - ## Styling The [`IgbSlider`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -492,22 +483,21 @@ The following sample demonstrates how to style the track fill and thumb parts: } ``` - ## API References -- [`HidePrimaryLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_HidePrimaryLabels) -- [`HideSecondaryLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_HideSecondaryLabels) -- [`HideTooltip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_HideTooltip) -- [`PrimaryTicks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_PrimaryTicks) +- [`HidePrimaryLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_HidePrimaryLabels) +- [`HideSecondaryLabels`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_HideSecondaryLabels) +- [`HideTooltip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_HideTooltip) +- [`PrimaryTicks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_PrimaryTicks) - [`IgbRangeSlider`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRangeSlider.html) -- [`SecondaryTicks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_SecondaryTicks) +- [`SecondaryTicks`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_SecondaryTicks) - [`IgbSliderLabel`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderLabel.html) - [`IgbSlider`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html) - `SliderTickLabelRotation` -- [`TickOrientation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_TickOrientation) -- [`UpperBound`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_UpperBound) -- [`ValueFormatOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_ValueFormatOptions) -- [`ValueFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSliderBase.html#IgniteUI_Blazor_Controls_IgbSliderBase_ValueFormat) +- [`TickOrientation`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_TickOrientation) +- [`UpperBound`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_UpperBound) +- [`ValueFormatOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_ValueFormatOptions) +- [`ValueFormat`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSlider.html#IgniteUI_Blazor_Controls_IgbSlider_ValueFormat) - [`Styling & Themes`](../themes/overview.md) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/snackbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/snackbar.md index a62824184..34c83ab7a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/snackbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/snackbar.md @@ -29,7 +29,6 @@ This sample demonstrates how to create [`IgbSnackbar`](https://www.infragistics. } ``` -
### Usage @@ -50,7 +49,7 @@ You will also need to link an additional CSS file to apply the styling to the [` For a complete introduction to the Ignite UI for Blazor, read the [**Getting Started**](../general-getting-started.md) topic. -The simplest way to display the snackbar component is to use its [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_Show) method and call it on a button click. +The simplest way to display the snackbar component is to use its [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html#IgniteUI_Blazor_Controls_IgbSnackbar_Show) method and call it on a button click. ```razor
@@ -63,7 +62,7 @@ The simplest way to display the snackbar component is to use its [`Show`](https: ### Display Time -Use the [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_DisplayTime) property to configure how long the snackbar component is visible. By default, it's set to 4000 milliseconds. +Use the [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html#IgniteUI_Blazor_Controls_IgbSnackbar_DisplayTime) property to configure how long the snackbar component is visible. By default, it's set to 4000 milliseconds. ```razor @using IgniteUI.Blazor.Controls @@ -106,10 +105,9 @@ Use the [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteU } ``` - ### Action Text -By default, the snackbar component is hidden automatically after a period specified by the [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_DisplayTime). You can use [`KeepOpen`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_KeepOpen) property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar [`ActionText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html#IgniteUI_Blazor_Controls_IgbSnackbar_ActionText) you can display an action button inside the component. +By default, the snackbar component is hidden automatically after a period specified by the [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html#IgniteUI_Blazor_Controls_IgbSnackbar_DisplayTime). You can use [`KeepOpen`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html#IgniteUI_Blazor_Controls_IgbSnackbar_KeepOpen) property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar [`ActionText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html#IgniteUI_Blazor_Controls_IgbSnackbar_ActionText) you can display an action button inside the component. ```razor @using IgniteUI.Blazor.Controls @@ -144,7 +142,6 @@ By default, the snackbar component is hidden automatically after a period specif } ``` - ## Styling The [`IgbSnackbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html) component exposes several CSS parts to give you full control over its styling: @@ -186,15 +183,14 @@ igc-snackbar::part(base) { } ``` -
## API References - [`ActionText`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html#IgniteUI_Blazor_Controls_IgbSnackbar_ActionText) -- [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_DisplayTime) -- [`KeepOpen`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_KeepOpen) -- [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_Show) +- [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html#IgniteUI_Blazor_Controls_IgbSnackbar_DisplayTime) +- [`KeepOpen`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html#IgniteUI_Blazor_Controls_IgbSnackbar_KeepOpen) +- [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html#IgniteUI_Blazor_Controls_IgbSnackbar_Show) - [`IgbSnackbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSnackbar.html) - [`Styling & Themes`](../themes/overview.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/sparkline-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/sparkline-chart.md index a40832d89..c53e30f25 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/sparkline-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/sparkline-chart.md @@ -76,7 +76,6 @@ The following example shows all the different types of `Sparkline` available. Th } ``` -
Like this sample? Get access to our complete Blazor toolkit and start building your own apps in minutes. Download it for free. @@ -179,7 +178,6 @@ The Blazor Sparkline supports the following types of sparklines by setting the [ } ``` -
## Markers @@ -374,7 +372,6 @@ public class SparklineProfitData } ``` -
## Normal Range @@ -520,7 +517,6 @@ public class SparklineMixedData } ``` -
## Trendlines @@ -632,7 +628,6 @@ public class SparklineMixedData } ``` -
## Unknown Value Interpolation @@ -740,7 +735,6 @@ public class SparklineUnknownData } ``` -
## Sparkline in Data Grid @@ -810,7 +804,6 @@ You can embed the Blazor Sparkline in a template column of data grid or other UI } ``` - ## Additional Resources You can find more information about related chart types in these topics: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/spline-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/spline-chart.md index 74b7a3eac..af6d8a8e0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/spline-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/spline-chart.md @@ -105,7 +105,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Spline Chart with Single Series @@ -190,7 +189,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Spline Chart with Multiple Series @@ -288,7 +286,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Spline Chart Styling @@ -390,7 +387,6 @@ public class CountryRenewableElectricity } ``` -
## Advanced Types of Spline Charts @@ -577,7 +573,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked 100% Spline Chart @@ -755,7 +750,6 @@ public class ContinentsBirthRate } ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stacked-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stacked-chart.md index 176942ad5..ef0250051 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stacked-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stacked-chart.md @@ -225,7 +225,6 @@ The following example, you can use the drop-down to switch between all of the di } ``` -
The following sections demonstrate individual types of Ignite UI for Blazor Stacked Charts. @@ -410,7 +409,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked 100 Area Chart @@ -590,7 +588,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked Bar Chart @@ -762,7 +759,6 @@ public class EnergyRenewableConsumption } ``` -
## Blazor Stacked 100% Bar Chart @@ -931,7 +927,6 @@ public class EnergyRenewableConsumption } ``` -
## Blazor Stacked Column Chart @@ -1112,7 +1107,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked 100% Column Chart @@ -1269,7 +1263,6 @@ public class OnlineTrafficByDevice } ``` -
## Blazor Stacked Line Chart @@ -1450,7 +1443,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked 100% Line Chart @@ -1629,7 +1621,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked Spline Area Chart @@ -1812,7 +1803,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked 100% Spline Area Chart @@ -1991,7 +1981,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked Spline Chart @@ -2172,7 +2161,6 @@ public class ContinentsBirthRate } ``` -
## Blazor Stacked 100% Spline Chart @@ -2350,7 +2338,6 @@ public class ContinentsBirthRate } ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/step-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/step-chart.md index 70e6ded75..dc05cc291 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/step-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/step-chart.md @@ -112,7 +112,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Step Line Chart @@ -213,7 +212,6 @@ public class CountryRenewableElectricity } ``` -
## Blazor Step Chart Styling @@ -315,7 +313,6 @@ public class CountryRenewableElectricity } ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stepper.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stepper.md index 51e38fb2b..d54b40ee8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stepper.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stepper.md @@ -111,7 +111,6 @@ The following Ignite UI for Blazor Stepper Example below shows the component in } ``` -
## Getting Started with Blazor Stepper @@ -318,7 +317,6 @@ The sample below demonstrates how stepper orientation and titles position could } ``` -
### Step States @@ -453,7 +451,6 @@ The sample below demonstrates all exposed step types and how they could be chang } ``` -
### Stepper Animations @@ -569,7 +566,6 @@ The [`IgbStepper`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Bla } ``` -
## Keyboard Navigation @@ -729,7 +725,6 @@ igc-step::part(indicator) { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stock-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stock-chart.md index 4d7388b94..f72a677d9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stock-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/stock-chart.md @@ -52,7 +52,6 @@ You can create Stock Chart using the [`IgbFinancialChart`](https://www.infragist } ``` -
## Stock Chart Recommendations @@ -131,7 +130,6 @@ As a Stock Chart is meant to allow the user to perform data analysis functions, } ``` -
## Blazor Stock Chart @@ -178,7 +176,6 @@ In this example the Stock Chart is representing the S\&P 500 over the course of } ``` -
## Blazor Stock Chart Styling @@ -223,7 +220,6 @@ If you need a Stock Chart with more features such as composite other series, you } ``` -
## Blazor Chart Annotations @@ -444,7 +440,6 @@ Note: When using the ordinal X axis mode, the CalloutsXMemberPath should point t } ``` -
## Blazor Chart Panes @@ -523,7 +518,6 @@ In this example, the stock chart is plotting revenue for United States. } ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/switch.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/switch.md index 7ea769103..e2b7eca54 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/switch.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/switch.md @@ -27,7 +27,6 @@ The Ignite UI for Blazor Switch component is a binary choice selection component } ``` -
## Usage @@ -67,7 +66,7 @@ To provide a meaningful label for the switch, simply place some text between the Label ``` -You can specify if the label should be positioned before or after the switch toggle by setting the [`LabelPosition`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_LabelPosition) attribute of the switch. Allowed values are `before` and `after`(default): +You can specify if the label should be positioned before or after the switch toggle by setting the [`LabelPosition`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSwitch.html#IgniteUI_Blazor_Controls_IgbSwitch_LabelPosition) attribute of the switch. Allowed values are `before` and `after`(default): ```razor Label @@ -98,7 +97,6 @@ The switch can also be labelled by elements external to the switch. In this case } ``` - ### Checked You can use the `checked` attribute to toggle on the switch. @@ -120,7 +118,6 @@ You can use the `checked` attribute to toggle on the switch. } ``` - ### Required You can use the `required` attribute to mark the switch as required. @@ -158,7 +155,6 @@ You can use the `disabled` attribute to disable the switch. } ``` - ### Forms You can use the `name` and `value` attributes when using the switch with `Form`. @@ -201,12 +197,11 @@ The [`IgbSwitch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blaz } ``` -
## API References -- [`LabelPosition`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_LabelPosition) +- [`LabelPosition`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSwitch.html#IgniteUI_Blazor_Controls_IgbSwitch_LabelPosition) - [`IgbSwitch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSwitch.html) - [`Styling & Themes`](../themes/overview.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tabs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tabs.md index 26f46be46..69715aaca 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tabs.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tabs.md @@ -60,7 +60,6 @@ The Blazor Tabs example below displays three different tabs aligned in a single } ``` - ## How to use Tabs with Ignite UI for Blazor Before using the [`IgbTabs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTabs.html), you need to import it as follows: @@ -77,15 +76,21 @@ Simple [`IgbTabs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Bla ```razor - Tab 1 - Tab 2 - Tab 3 - Panel 1 - Panel 2 - Panel 3 + + Content for tab 1 + + + Content for tab 2 + + +
Tab 3
+ Content for tab 3 + ``` +Tab text can be set either as simple string using the [`Label`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTab.html#IgniteUI_Blazor_Controls_IgbTab_Label) property or by assigning children to the `label` slot. Any remaining children in the default slot are rendered as the tab content. + ### Selection The [`IgbTabs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTabs.html) emits `Change` event when the user selects an item either by key press or click. The [`Select`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTabs.html#IgniteUI_Blazor_Controls_IgbTabs_Select) method allows you to select a tab by specifying the [`IgbTab`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTab.html) or its id. @@ -99,7 +104,7 @@ The default behavior, which selects a tab when the user is navigating with the a A tab is disabled by setting the [`Disabled`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTab.html#IgniteUI_Blazor_Controls_IgbTab_Disabled) attribute: ```razor -Tab 1 + ``` ### Alignment @@ -182,7 +187,6 @@ If the space is not enough to fit all tabs, scroll buttons are displayed. } ``` - ### Scrolling Scroll buttons are shown when the available space is not enough to render all Blazor tabs. The start scroll button is disabled if the first tab is in view. Respectively, when last tab is in view the end scroll button is disabled. By pressing one of the scroll buttons the tabs are scrolled so the tab in that direction is fully visible, or if it is already visible the previous/next tab in that direction is displayed. @@ -208,7 +212,6 @@ Scroll buttons are shown when the available space is not enough to render all Bl } ``` - ### Keyboard Navigation |Keys|Description| @@ -221,7 +224,7 @@ Scroll buttons are shown when the available space is not enough to render all Bl ### Prefix / Suffix -Each tab has default slot to display information - icon, text or both and `prefix` and `suffix` slots to show additional content in the beginning and/or in the end. +Besides the `label` slot to display information - icon, text or both, each tab also has `prefix` and `suffix` slots to show additional content in the beginning and/or in the end. ```razor @using IgniteUI.Blazor.Controls @@ -275,7 +278,6 @@ Each tab has default slot to display information - icon, text or both and `prefi } ``` - ## Styling The [`IgbTabs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTabs.html) component exposes several CSS parts, giving you full control over its style: @@ -295,9 +297,11 @@ The [`IgbTab`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor. |Name|Description| |--|--| -| `content` | The content wrapper. | -| `prefix` | The prefix wrapper. | -| `suffix` | The suffix wrapper. | +| `content` | Tab header's label slot container. | +| `prefix` | Tab header's label prefix. | +| `suffix` | Tab header's label suffix. | +| `tab-header` | The header of a single tab. | +| `tab-body` | Holds the body content of a single tab, only the body of the selected tab is visible. | ```css igc-tab::part(tab-header), @@ -379,7 +383,6 @@ igc-tab::part(tab-header)::before { } ``` - ## API Reference - [`IgbTabs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTabs.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/templates.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/templates.md index 7b32bbdfe..c1e3dca01 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/templates.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/templates.md @@ -57,7 +57,6 @@ The Ignite UI for Blazor ComboBox component allows defining custom templates for } ``` - ## Template Types ### Item Template diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/text-area.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/text-area.md index 504b5cfa6..37d513162 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/text-area.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/text-area.md @@ -28,7 +28,6 @@ The Ignite UI for Blazor Text Area represents a multi-line plain-text editing co } ``` - ## Dependencies ```razor @@ -80,7 +79,6 @@ With `prefix` and `suffix` slots we can add different content before and after t } ``` - ## Text Area Resizing There are three different resize options of the [`IgbTextarea`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTextarea.html). When set to `none`, the text area does not resize and uses a scroll bar to show overflow text. When set to `vertical` (the default option), the text area lets the user resize it vertically. When set to `auto`, the text area shows all the user input at once. Overflow text wraps onto a new line and expands the text area automatically. @@ -117,7 +115,6 @@ There are three different resize options of the [`IgbTextarea`](https://www.infr } ``` - ## Form Integration The sample below shows how a [`IgbTextarea`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTextarea.html) could be integrated into a form. @@ -154,7 +151,6 @@ The sample below shows how a [`IgbTextarea`](https://www.infragistics.com/blazor } ``` - ## Styling The [`IgbTextarea`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTextarea.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -232,7 +228,6 @@ igc-textarea::part(suffix) { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/themes-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/themes-overview.md index 9a27366fd..0ce1b6fea 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/themes-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/themes-overview.md @@ -17,6 +17,13 @@ To enable a theme, a theme file should be loaded. Depending on your project conf Here's the complete list of all bundled themes and their path: -## API References - -- `ConfigureTheme` +| Name | Variant | Location | +| ----------- | ------- | ------------------------------------------------- | +| **Bootstrap*- | Light | \_content/IgniteUI.Blazor/themes/light/bootstrap.css | +| **Material*- | Light | \_content/IgniteUI.Blazor/themes/light/material.css | +| **Fluent*- | Light | \_content/IgniteUI.Blazor/themes/light/fluent.css | +| **Indigo*- | Light | \_content/IgniteUI.Blazor/themes/light/indigo.css | +| **Bootstrap*- | Dark | \_content/IgniteUI.Blazor/themes/dark/bootstrap.css | +| **Material*- | Dark | \_content/IgniteUI.Blazor/themes/dark/material.css | +| **Fluent*- | Dark | \_content/IgniteUI.Blazor/themes/dark/fluent.css | +| **Indigo*- | Dark | \_content/IgniteUI.Blazor/themes/dark/indigo.css | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/theming-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/theming-grid.md index c9521f09e..d865a2b5c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/theming-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/theming-grid.md @@ -173,7 +173,6 @@ public class NwindData } ``` - ```razor diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/theming-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/theming-mcp.md new file mode 100644 index 000000000..95eaa836c --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/theming-mcp.md @@ -0,0 +1,325 @@ +--- +title: Blazor Theming MCP | Infragistics +_description: Use the Ignite UI Theming MCP server to generate Ignite UI for Blazor palettes, themes, typography, and design token overrides through your AI assistant. +_keywords: Ignite UI for Blazor controls, Blazor widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations +_license: MIT +mentionedTypes: [] +_tocName: Theming MCP +--- + + + +# Ignite UI Theming MCP + +

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe the theme, palette, or component overrides you want generated.

+ +
+ +## Overview + +The Ignite UI Theming MCP server gives AI assistants the knowledge and tools to produce accurate theming code, including palettes with proper shade generation, typography, elevations, component design token overrides, and more. + +The server supports all four Ignite UI design systems (**Material**, **Bootstrap**, **Fluent**, and **Indigo**) in both light and dark variants. While this guide focuses on Blazor, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. + +Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** - the server compiles it for you. + +The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, the Theming MCP handles palettes, themes, tokens, typography, elevations, and styling workflows, while the CLI MCP handles project creation, project modification, component workflows, and documentation-oriented tasks. Most teams will want both servers connected in the same AI client. + +**Example prompts to try once connected:** + +> _"Create a complete Material Design dark theme for my Blazor app with primary #2563eb and coral secondary #f97316."_ + +> _"What design tokens are available for the button component? Customize it with my brand purple #8b5cf6."_ + +> _"My brand guidelines specify exact hex values for every primary shade - create a custom palette with those explicit values."_ + +> _"Make the calendar component use smaller spacing."_ + +## Prerequisites + +Before configuring the MCP server, make sure you have: + +- **Node.js** (v18 or later) installed. This provides the `npx` command used to launch the server. +- A project with an **Ignite UI package** listed as a dependency in `package.json`. +- An **AI client with MCP support** - for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. + +If you do not have Ignite UI Theming installed yet, run: + +```bash +npm install igniteui-theming +``` + +## Setup + +The MCP server is bundled with the `igniteui-theming` package and launched via `npx`. No separate installation is needed beyond having an Ignite UI package already in your project. + +The canonical launch command is: + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +> [!NOTE] +> The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. + +### VS Code + +GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root: + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI Theming tools will be available. + +> [!NOTE] +> MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. + +### Cursor + +Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +The server will be picked up automatically when you open a new Cursor chat session. + +> [!NOTE] +> You can also configure MCP servers globally via **Settings → MCP** in Cursor. + +### Claude Desktop + +Add the server to your Claude Desktop configuration file: + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Restart Claude Desktop after saving. You will see an MCP server indicator (slider icon) in the chat input area, confirming that MCP tools are active. + +### Claude Code + +Claude Code supports MCP servers through its CLI and a project-scoped `.mcp.json` file. To share the configuration with your team, create or edit `.mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Alternatively, you can add the server via the command line for your local environment only: + +```bash +claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp +``` + +Use the `/mcp` command inside Claude Code to verify the server is connected. + +### JetBrains IDEs + +JetBrains AI Assistant supports MCP servers through the IDE settings: + +1. Open **Settings** (or **Preferences** on macOS). + +2. Navigate to **Tools → AI Assistant → Model Context Protocol (MCP)**. + +3. Click **+ Add** and choose **As JSON** or use the form fields. + +4. Enter the following configuration: + + ```json + { + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` + +5. Click **OK** and restart the AI Assistant. + +> [!NOTE] +> MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. + +### Other MCP Clients + +For any other MCP-compatible client, use the STDIO transport with this launch command: + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +## Customize AI Behavior with Project Rules + +This section is optional. It is aimed at teams that want to fine-tune _how_ the AI generates theming code to match their existing codebase conventions. + +Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI _which tools to call and in what order_. You do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. + +### VS Code (`.github/copilot-instructions.md`) + +```markdown +## Theming Conventions + +### Sass Code Style +- Use `@use` / `@forward` - never `@import`. +- Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`). +- Prefer setting primary design tokens over overriding many dependent tokens. + For example, setting `$foreground` on a flat button automatically derives + `$hover-background`, `$focus-background`, and `$active-background`. +- Keep component overrides scoped - use the component's default selector + (e.g., `.igx-button--flat`) unless a narrower scope is needed. +``` + +### Cursor (`.cursor/rules/theming.mdc`) + +```markdown +--- +description: Ignite UI for Blazor theming conventions +globs: ["**/*.scss", "**/styles/**"] +--- + +## Project Theming Rules + +### Code conventions +- `@use` / `@forward` only - no `@import`. +- Extract shared colors into variables; do not repeat hex literals. +- Prefer primary tokens - let dependent tokens derive automatically. +- One component override per file. Name the file after the component. +- Comment every override with the design rationale. +- Never hard-code gray shades for text - use palette grays so dark mode works. +- For dark mode, only the palette changes. Component overrides stay the same. +``` + +> [!NOTE] +> Both files are committed to source control, so every team member gets the same AI behavior without manual setup. Adapt the brand colors, design system, and file paths to match your project. + +## Available Tools + +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly. Just describe what you want. + +To see the current full list of tools and their parameters at any time, ask your AI assistant: + +> _"What tools does the Ignite UI Theming MCP provide?"_ + +Here is a brief overview of each tool: + +| Tool | Description | +|------|-------------| +| `detect_platform` | Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. | +| `create_palette` | Generates a color palette with automatic shade variants (50-900, A100-A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | +| `create_custom_palette` | Fine-grained palette creation. Specify exact hex values for every shade when automatic generation is not suitable. | +| `create_typography` | Sets up a font family and type scale for a given design system. | +| `create_elevations` | Configures box-shadow elevation levels (0-24) for Material or Indigo design systems. | +| `create_theme` | One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). | +| `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). | +| `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. | +| `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. | +| `get_component_design_tokens` | Returns all available design tokens for a component. Always call this before `create_component_theme`. | +| `create_component_theme` | Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. | +| `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | +| `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | + +> [!NOTE] +> For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. + +## Common Workflows + +The following scenarios show what you can ask the AI to do once the MCP server is connected. + +### New Project Theme + +> _"I'm starting a new Blazor project with Ignite UI. Create a complete Material Design light theme with primary #2563eb, secondary #f97316, and Roboto font."_ + +The AI will call `create_theme` and return a ready-to-use `styles.scss` file. The generated output will look similar to this: + +### Dark Mode Variant + +> _"I need a dark mode version of my existing theme. Keep the same primary blue but use a dark surface #121212."_ + +### Brand-Exact Color Shades + +> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values - create a custom palette."_ + +The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. + +### Component-Level Customization + +> _"Style the flat button with a purple background #8b5cf6 and white text, with a lighter purple #a78bfa on hover."_ + +The AI will call `get_component_design_tokens` first to discover valid token names, then call `create_component_theme` with the correct values. + +### Layout Adjustments + +> _"The calendar feels bloated - reduce its spacing, and make all components slightly smaller."_ + +The AI will call `set_spacing` scoped to the calendar component and `set_size` at the `:root` level. + +## Troubleshooting + +**Platform not detected** + +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `IgniteUI.Blazor`) as a dependency. You can also tell the AI explicitly: _"Use the Blazor platform."_ + +**Luminance warning on colors** + +If the AI warns about color luminance, it means the chosen color is too light or too dark for automatic shade generation to work well. Either pick a mid-range color or ask the AI to use `create_custom_palette` with explicit shade values instead. + +**Surface color mismatch** + +For light themes use a light surface (e.g., `#fafafa`). For dark themes use a dark surface (e.g., `#121212`). Mismatched surface colors cause the AI to emit a warning. + +## Additional Resources + +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) +- [Ignite UI for Blazor Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [MAKER Framework](./maker-framework.md) + + + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor) +- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tile-manager.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tile-manager.md index 324606679..ab2ce3ab9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tile-manager.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tile-manager.md @@ -198,7 +198,6 @@ The following Ignite UI for Blazor Tile Manager Example shows the component in a } ``` - > [!Warning] > Due to the iframe permissions policy, the fullscreen button in this example will only work when the example is opened in standalone mode by clicking the 'Expand to fullscreen' button in the top-right corner. @@ -369,7 +368,6 @@ We also have properties for setting the minimum width of the columns ([`MinColum } ``` - ## Tile component The Tile component has properties that can be set individually for each tile. Some of these properties include: @@ -486,7 +484,6 @@ You also have the option to disable both action buttons and create custom ones a } ``` - In this example, we created custom action buttons using the Ignite UI Icon Button component. ## Resizing @@ -595,7 +592,6 @@ You can see the difference between the three states in the example below: } ``` - ### Snapping Tiles resize in full grid units, meaning they can only grow or shrink by whole columns or rows. The ghost element snaps to the next column or row when expanding past the halfway point and to the previous one when shrinking past the halfway mark. This applies to all adorners (bottom, side and corner), ensuring tiles always stay aligned to the grid. @@ -690,7 +686,6 @@ Similar to resizing, when you initiate the drag-and-drop process, a ghost elemen } ``` - ## Serialization The Tile Manager provides methods that help manage the layout of tiles: @@ -744,7 +739,6 @@ The Tile Manager provides methods that help manage the layout of tiles: } ``` - ## Styling You can also customize the appearance of the two components - [`IgbTileManager`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTileManager.html) and [`IgbTile`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTile.html). @@ -844,7 +838,6 @@ You can also change the icon of the adorners to a custom one using the `side-ado } ``` - ## API Reference - [`IgbTileManager`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTileManager.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/toast.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/toast.md index edef16815..103ba9df8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/toast.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/toast.md @@ -40,7 +40,6 @@ Take a look at the simple Ignite UI for Blazor Toast example below. The animated } ``` -
### How To Use Ignite UI for Blazor Toast Notification @@ -61,7 +60,7 @@ You will also need to link an additional CSS file to apply the styling to the [` ``` -The simplest way to display the toast component is to use its [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_Show) method and call it on a button click. +The simplest way to display the toast component is to use its [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html#IgniteUI_Blazor_Controls_IgbToast_Show) method and call it on a button click. ```razor Show Toast @@ -88,9 +87,9 @@ The simplest way to display the toast component is to use its [`Show`](https://w ### Properties -Use the [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_DisplayTime) property to configure how long the toast component is visible. By default, it's set to 4000 milliseconds. +Use the [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html#IgniteUI_Blazor_Controls_IgbToast_DisplayTime) property to configure how long the toast component is visible. By default, it's set to 4000 milliseconds. -By default, the toast component is hidden automatically after a period specified by the [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_DisplayTime). You can use [`KeepOpen`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_KeepOpen) property to change this behavior. In this way, the toast will remain visible. +By default, the toast component is hidden automatically after a period specified by the [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html#IgniteUI_Blazor_Controls_IgbToast_DisplayTime). You can use [`KeepOpen`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html#IgniteUI_Blazor_Controls_IgbToast_KeepOpen) property to change this behavior. In this way, the toast will remain visible. ```razor Toggle Toast @@ -185,7 +184,6 @@ By default, the toast component is hidden automatically after a period specified } ``` - ## Styling You can style the Blazor [`IgbToast`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html) notifications directly using its tag selector: @@ -229,15 +227,14 @@ igc-toast { } ``` -
## API References - [`IgbCalendar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCalendar.html) -- [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_DisplayTime) -- [`KeepOpen`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_KeepOpen) -- [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbBaseAlertLike.html#IgniteUI_Blazor_Controls_IgbBaseAlertLike_Show) +- [`DisplayTime`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html#IgniteUI_Blazor_Controls_IgbToast_DisplayTime) +- [`KeepOpen`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html#IgniteUI_Blazor_Controls_IgbToast_KeepOpen) +- [`Show`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html#IgniteUI_Blazor_Controls_IgbToast_Show) - [`IgbToast`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToast.html) - [`Styling & Themes`](../themes/overview.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/toolbar.md index 33b3f5ade..86414587a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/toolbar.md @@ -120,7 +120,6 @@ public class CountryRenewableElectricity } ``` - ## Dependencies Add the **IgniteUI.Blazor.Controls** namespace in the **\_Imports.razor** file: @@ -473,7 +472,6 @@ public class CountryRenewableElectricity } ``` - ### Blazor Data Chart Integration The Blazor Toolbar contains a [`Target`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbToolbar.html#IgniteUI_Blazor_Controls_IgbToolbar_Target) property. This is used to link a component, such as the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) as shown in the code below: @@ -708,7 +706,6 @@ public class CountryRenewableElectricity } ``` - ### Color Editor You can add a custom color editor tool to the the Blazor Toolbar, which will also work with the Command event to perform custom styling to your application. @@ -864,7 +861,6 @@ public class CountryRenewableElectricity } ``` - @@ -161,9 +160,9 @@ To enable the advanced filtering, the [`AllowAdvancedFiltering`](https://www.inf -The advanced filtering generates a [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilteringExpressionsTree) which is stored in the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AdvancedFilteringExpressionsTree) input property. You could use the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AdvancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. +The advanced filtering generates a [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FilteringExpressionsTree) which is stored in the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_AdvancedFilteringExpressionsTree) input property. You could use the [`AdvancedFilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_AdvancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. -In case you don't want to show the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) toolbar, you could use the [`OpenAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_OpenAdvancedFilteringDialog) and [`CloseAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CloseAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. +In case you don't want to show the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) toolbar, you could use the [`OpenAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_OpenAdvancedFilteringDialog) and [`CloseAdvancedFilteringDialog`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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 [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). Both filtering user interfaces will work independently of one another. The final filtered result in the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) is the intersection between the results of the two filters. @@ -307,7 +306,6 @@ public class EmployeesFlatData } ``` - ## API References - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-editing.md index bc77137ac..5393ab8b0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-editing.md @@ -132,7 +132,6 @@ public class EmployeesNestedTreeData } ``` - ## Cell Editing ### Editing through UI @@ -353,7 +352,6 @@ public class RoleplayTreeGridData } ``` - ## CRUD operations > [!Note] @@ -398,7 +396,7 @@ Updating data in the Tree Grid is achieved through `UpdateRow` and `UpdateCell` ### Deleting data from the Tree Grid -Please keep in mind that `DeleteRow` method will remove the specified row only if a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) is defined. +Please keep in mind that `DeleteRow` method will remove the specified row only if a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_PrimaryKey) is defined. ```razor @code { @@ -445,7 +443,7 @@ igRegisterScript("HandleCellEdit", (ev) => { }, false); ``` -If the value entered in a cell under the **Age** column is below 18 or the value in the **HireDate** column is in the future, the editing will be cancelled and the user will be alerted to the cancellation. + @@ -547,7 +545,6 @@ public class EmployeesNestedTreeData } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -678,13 +675,9 @@ public class EmployeesNestedTreeData } ``` - ## API References - [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) - - - - [`IgbDatePicker`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDatePicker.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-merging.md index f833f0e0e..2322bf77e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-merging.md @@ -125,7 +125,6 @@ public class EmployeesFlatDetails } ``` - ## Enabling and Using Cell Merging diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-selection.md index bcc5c5c39..13235e7d8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-cell-selection.md @@ -157,7 +157,6 @@ public class EmployeesFlatData } ``` - ## Selection Types ### Tree Grid Multiple-Cell Selection @@ -251,18 +250,17 @@ public class EmployeesFlatData } ``` - ### Tree Grid Single Selection -When you set the [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) to **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. +When you set the [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_CellSelection) to **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. > When single cell is selected [`Selected`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_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` event is emitted. ### Tree Grid None Selection -If you want to disable cell selection you can just set [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) to **none**. 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. +If you want to disable cell selection you can just set [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_CellSelection) to **none**. 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 @@ -291,7 +289,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Select range -[`SelectRange`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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. @@ -320,7 +318,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Clear cell selection -[`ClearCellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClearCellSelection) will clear the current cell selection. +[`ClearCellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ClearCellSelection) will clear the current cell selection. ```razor @code { @@ -357,7 +355,7 @@ The multi-cell selection is index based (DOM elements selection). - `Filtering` - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells. - `Resizing` - On column resizing selected cells will not be cleared. - `Hiding` - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected. -- [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Pinning) - Selected cell will not be cleared. Same as hiding +- [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_Pinning) - Selected cell will not be cleared. Same as hiding - `GroupBy` - On column grouping selected cells will not be cleared. @@ -495,7 +493,6 @@ public class OrdersTreeData } ``` - ## API References - [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-clipboard-interactions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-clipboard-interactions.md index f070d711b..8169cb60b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-clipboard-interactions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-clipboard-interactions.md @@ -222,7 +222,6 @@ public class EmployeeBasicData // EmployeesFlatDetails } ``` - ## Functionality Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are: @@ -249,7 +248,7 @@ Copy behavior is working with the default interaction defined by the browser and ## API Usage -We expose [`ClipboardOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClipboardOptions) property, which handles the following options: +We expose [`ClipboardOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ClipboardOptions) property, which handles the following options: - `Enabled` Enables/disables copying of selected cells. - `CopyHeaders` Include the associated headers when copying. @@ -259,7 +258,7 @@ We expose [`ClipboardOptions`](https://www.infragistics.com/blazor/docs/api/api/ > [!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` Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`ClipboardOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClipboardOptions). +- `GridCopy` Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`ClipboardOptions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ClipboardOptions). ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-collapsible-column-groups.md index a0085677a..cb229a9eb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-collapsible-column-groups.md @@ -222,7 +222,6 @@ public class EmployeesFlatDetails } ``` - ## Setup To get started with the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) and the **Collapsible multi-column headers** feature, first you need to install Ignite UI for Blazor by typing the following command: @@ -241,7 +240,7 @@ Also, we strongly suggest that you take a brief look at [multi-column headers](m In order to define a column group as collapsible, you need to set the [`Collapsible`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_Collapsible) property on the [`IgbColumnGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html) to **true**. -You need to define the property [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_VisibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. +You need to define the property [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`VisibleWhenCollapsed`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html#IgniteUI_Blazor_Controls_IgbColumnGroup_VisibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. Let's see the markup below: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-hiding.md index d75fae09e..f616498e5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-hiding.md @@ -174,7 +174,6 @@ public class EmployeesFlatDetails } ``` - ## Tree Grid Setup Let's start by creating our [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) and binding it to our data. We will also enable both filtering and sorting for the columns. @@ -484,7 +483,6 @@ public class EmployeesFlatDetails } ``` - ## API References In this article we learned how to use the built-in column hiding UI in the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html)'s toolbar. The column hiding UI has a few more APIs to explore, which are listed below. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-moving.md index 2297a7a96..185e0090d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-moving.md @@ -229,16 +229,15 @@ public class EmployeesFlatDetails } ``` - ## Overview -**Column moving** feature is enabled on a per-grid level, meaning that the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) could have either movable or immovable columns. This is done via the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Moving) input of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). +**Column moving** feature is enabled on a per-grid level, meaning that the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) could have either movable or immovable columns. This is done via the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_Moving) input of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). ## API In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: -[`MoveColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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` value), which determines whether to place the column before or after the target column. +[`MoveColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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` value), which determines whether to place the column before or after the target column. ```razor public async void HandleClick() @@ -259,7 +258,7 @@ In addition to the drag and drop functionality, the Column Moving feature also p } ``` -Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Moving) property to true. +Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`Moving`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_Moving) property to true. ## Events @@ -504,7 +503,6 @@ public class EmployeesFlatDetails } ``` - ## API References - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md index cecdf4079..efe4507f2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md @@ -134,14 +134,13 @@ public class EmployeesFlatData } ``` - ## Column Pinning API Column pinning is controlled through the [`Pinned`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Pinned) property of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html). Pinned columns are rendered on the left side of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) body. -You may also use the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html)'s [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PinColumn) or [`UnpinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_UnpinColumn) methods of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) to pin or unpin columns by their field name: +You may also use the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html)'s [`PinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_PinColumn) or [`UnpinColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_UnpinColumn) methods of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) to pin or unpin columns by their field name: @@ -153,7 +152,7 @@ A column is pinned to the right of the rightmost pinned column. Changing the ord ## Pinning Position -You can change the column pinning position via the [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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. ```razor @@ -335,7 +334,6 @@ public class EmployeesFlatDetails } ``` - ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. @@ -561,7 +559,6 @@ public class EmployeesFlatDetails } ``` - ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. @@ -746,7 +743,6 @@ public class EmployeesFlatData } ``` - ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) 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 [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). @@ -910,7 +906,6 @@ public class EmployeesFlatData } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-resizing.md index 6d3e25470..56aa4c25f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-resizing.md @@ -159,7 +159,6 @@ public class EmployeesFlatDetails } ``` - **Column resizing** is also enabled per-column level, meaning that the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) can have a mix of resizable and non-resizable columns. This is done via the [`Resizable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Resizable) input of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html). ```razor @@ -428,7 +427,6 @@ public class EmployeesFlatDetails } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -590,7 +588,6 @@ public class EmployeesFlatDetails } ``` - ## API References - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-selection.md index d910e9a9d..e36c2be9e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-selection.md @@ -13,7 +13,7 @@ _premium: true # Blazor Tree Grid Column Selection Overview -The Blazor Tree Grid Column Selection feature in Ignite UI for Blazor offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. +The Blazor Tree Grid Column Selection feature in Ignite UI for Blazor offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ColumnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. ## Blazor Tree Grid Column Selection Example @@ -149,10 +149,9 @@ public class FoodsData } ``` - ## Basic Usage -The column selection feature can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) input, which takes `GridSelectionMode` values. +The column selection feature can be enabled through the [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ColumnSelection) input, which takes `GridSelectionMode` values. ## Interactions @@ -327,11 +326,10 @@ public class EmployeesFlatDetails } ``` - ## Keyboard Combinations > [!Note] -> The keyboard combinations are available only when the grid [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) input is set to `multiple`. +> The keyboard combinations are available only when the grid [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ColumnSelection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: @@ -531,7 +529,6 @@ public class EmployeesFlatDetails } ``` - ## API References The column selection UI has a few more APIs to explore, which are listed below. @@ -542,12 +539,12 @@ The column selection UI has a few more APIs to explore, which are listed below. [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) properties: -- [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ColumnSelection) -- [`SelectedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SelectedColumns) -- [`SelectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SelectColumns) -- [`DeselectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_DeselectColumns) -- [`SelectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SelectAllColumns) -- [`DeselectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_DeselectAllColumns) +- [`ColumnSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ColumnSelection) +- [`SelectedColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_SelectedColumns) +- [`SelectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_SelectColumns) +- [`DeselectColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_DeselectColumns) +- [`SelectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_SelectAllColumns) +- [`DeselectAllColumns`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_DeselectAllColumns) [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-types.md index 36075aaa3..7e9f3aba8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-types.md @@ -475,7 +475,6 @@ public class Worker //end data ``` - ## Blazor Tree Grid Default Template @@ -490,7 +489,7 @@ This column [`DataType`](https://www.infragistics.com/blazor/docs/api/api/Ignite ### Number -If the [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) is set to **number**, the cell value will be formatted based on application or grid's [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Locale) settings, as well as when [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: +If the [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) is set to **number**, the cell value will be formatted based on application or grid's [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_Locale) settings, as well as when [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_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 `.` @@ -505,7 +504,7 @@ If the [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Bl ### 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Locale) format or [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: +The appearance of the date portions will be set (e.g. day, month, year) based on [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_Locale) format or [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: - **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc. - **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: @@ -597,7 +596,7 @@ Default template is using the value coming from the data as an image source to a ``` -When [`AutoGenerate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AutoGenerate) is used for the 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 [`AutoGenerate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_AutoGenerate) is used for the 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. ### Currency @@ -697,7 +696,7 @@ igRegisterScript("CurrencyFormatter", (value) => { - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) - [`PipeArgs`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_PipeArgs) - [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) -- [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_Locale) +- [`Locale`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_Locale) - [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-conditional-cell-styling.md index 987dd3e95..48c53557d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-conditional-cell-styling.md @@ -19,33 +19,33 @@ The Ignite UI for Blazor Conditional Styling feature in Blazor Tree Grid allows The [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component in Ignite UI for Blazor provides two ways to **conditional styling of rows** based on custom rules. -- By setting [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) input on the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component; -- By setting [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowStyles) input on the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component; +- By setting [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowClasses) input on the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component; +- By setting [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowStyles) input on the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component; Further in this topic we will cover both of them in more details. ### Using Row Classes -You can conditionally style the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) rows by setting the [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) input and define custom rules. +You can conditionally style the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) rows by setting the [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowClasses) input and define custom rules. ```razor ``` -The [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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. ```razor igRegisterScript("RowClassesHandler", () => { return { - activeRow: (row) => row.index === 0 + activeRow: (row) => row.index % 2 === 0 }; }, true); ``` ```css .activeRow { - border: 2px solid #fc81b8; + border-top: 2px solid #fc81b8; border-left: 3px solid #e41c77; } ``` @@ -151,12 +151,11 @@ public class EmployeesFlatData } ``` - ### Using Row Styles -The [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) control exposes the [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowStyles) property which allows conditional styling of the data rows. Similar to [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). +The [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) control exposes the [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowStyles) property which allows conditional styling of the data rows. Similar to [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). -> The callback signature for both [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowStyles) and [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowClasses) is: +> The callback signature for both [`RowStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowStyles) and [`RowClasses`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowClasses) is: ```razor (row) => boolean @@ -304,7 +303,6 @@ public class EmployeesFlatDetails } ``` - ## Tree Grid Conditional Cell Styling ## Overview @@ -480,7 +478,6 @@ public class OrdersTreeData } ``` - - By using the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) input [`CellStyles`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_CellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. > The callback signature for both `cellStyles` and `cellClasses` is now changed to: @@ -637,7 +634,6 @@ public class OrdersTreeData } ``` - ## 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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-editing.md index 2da8beaa1..7a843e1c9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-editing.md @@ -20,7 +20,7 @@ The Ignite UI for Blazor Cell Editing feature in Blazor Tree Grid provides an ea ## Setup -In order to specify which edit mode should be enabled, the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) exposes the following boolean properties - [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable). +In order to specify which edit mode should be enabled, the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) exposes the following boolean properties - [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowEditable). The [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) property enables you to specify the following options: @@ -29,12 +29,12 @@ The [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazo > Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). -The [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) property enables you to specify the following options: +The [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowEditable) property enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled. This is the default value. - **true** - the row editing in the corresponding grid will be enabled. -In the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), if you set [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) property to true, and the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. +In the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), if you set [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowEditable) property to true, and the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. All available column data types could be found in the official [Column types topic](column-types.md#default-template). @@ -86,7 +84,7 @@ The grid exposes a wide array of events that provide greater control over the ed ### Event Cancellation - `RowEditEnter` - Neither `Row` nor `Cell` will enter edit mode. -- `CellEditEnter` - Prevents entering cell edit. If [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. +- `CellEditEnter` - Prevents entering cell edit. If [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. - `CellEdit` - Allowed `Cell` and/or `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. @@ -194,7 +192,6 @@ public class EmployeesFlatData } ``` - ### Features integration While a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-excel-style-filtering.md index dbcba664c..76a327496 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-excel-style-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-excel-style-filtering.md @@ -174,10 +174,9 @@ public class FoodsData } ``` - ## Usage -To turn on the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component's Excel-style filtering, two inputs should be set. The [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowFiltering) should be set to **true** and the [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilterMode) should be set to `ExcelStyleFilter` value. +To turn on the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component's Excel-style filtering, two inputs should be set. The [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_AllowFiltering) should be set to **true** and the [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FilterMode) should be set to `ExcelStyleFilter` value. ```razor @@ -346,12 +345,11 @@ public class FoodsData } ``` - ## Templates -If you want to further customize the Excel style filter menu, you can use the [`ExcelStyleHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ExcelStyleHeaderIconTemplate) property to define a custom template for the header icon of the menu. +If you want to further customize the Excel style filter menu, you can use the [`ExcelStyleHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ExcelStyleHeaderIconTemplate) property to define a custom template for the header icon of the menu. -The following code demonstrates how to customize the Excel style filter menu using the [`ExcelStyleHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ExcelStyleHeaderIconTemplate): +The following code demonstrates how to customize the Excel style filter menu using the [`ExcelStyleHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ExcelStyleHeaderIconTemplate): ```razor ## Styling @@ -652,7 +649,6 @@ public class FoodsData } ``` - ## API References - [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-export-excel.md index f146ffc79..e63f5305e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-export-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-export-excel.md @@ -154,7 +154,6 @@ public class EmployeesNestedData } ``` - ## Export Multi Column Headers Grid You can export [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` `IgnoreMultiColumnHeaders` to `true`. @@ -372,7 +371,6 @@ public class EmployeesFlatDetails } ``` - ## Export Grid with Frozen Column Headers By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` `FreezeHeaders` to `true`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-filtering.md index 8e37a4f3b..049825d84 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-filtering.md @@ -153,22 +153,21 @@ public class OrdersData } ``` - ## Setup -In order to specify if filtering is enabled and which filtering mode should be used, the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) exposes the following properties - [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowFiltering), [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowAdvancedFiltering), [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilterMode) and [`Filterable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Filterable). +In order to specify if filtering is enabled and which filtering mode should be used, the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) exposes the following properties - [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_AllowFiltering), [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_AllowAdvancedFiltering), [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FilterMode) and [`Filterable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Filterable). -Property [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowFiltering) enables you to specify the following options: +Property [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_AllowFiltering) enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled. This is the default value. - **true** - the filtering for the corresponding grid will be enabled. -Property [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowAdvancedFiltering) enables you to specify the following options: +Property [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_AllowAdvancedFiltering) enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled. This is the default value. - **true** - the advanced filtering for the corresponding grid will be enabled. -Property [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilterMode) enables you to specify the following options: +Property [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FilterMode) enables you to specify the following options: - **QuickFilter** - a simplistic filtering UI. This is the default value. - **ExcelStyleFilter** - an Excel-like filtering UI. @@ -187,7 +186,7 @@ Property [`Filterable`](https://www.infragistics.com/blazor/docs/api/api/IgniteU -To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowAdvancedFiltering) input property to **true** +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`AllowAdvancedFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_AllowAdvancedFiltering) input property to **true** @@ -208,7 +207,7 @@ While some filtering conditions have been applied to a column, and the filter ro 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 [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set [`DataType`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DataType) of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the `IgnoreCase` and the initial `Condition` properties. -The filtering feature is enabled for the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component by setting the [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_AllowFiltering) input to **true**. The default [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Filterable) input to **false**. +The filtering feature is enabled for the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component by setting the [`AllowFiltering`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_AllowFiltering) input to **true**. The default [`FilterMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Filterable) input to **false**. @@ -226,7 +225,7 @@ The filtering feature is enabled for the [`IgbTreeGrid`](https://www.infragistic ## Initial filtered state -To set the initial filtering state of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), set the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilteringExpressionsTree) property to an array of [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FilteringExpressionsTree) for each column to be filtered. +To set the initial filtering state of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), set the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FilteringExpressionsTree) property to an array of [`FilteringExpressionsTree`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FilteringExpressionsTree) for each column to be filtered. ```razor @@ -431,7 +430,6 @@ public class OrdersData } ``` - ## Known Limitations > [!Note] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-keyboard-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-keyboard-navigation.md index 7f4210035..7656c042a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-keyboard-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-keyboard-navigation.md @@ -52,9 +52,6 @@ When the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/Ignite - CTRL + ↑ sorts the active column header in ASC order. If the column is already sorted in ASC, sorting state is cleared. - CTRL + ↓ sorts the active column header in DSC order. If the column is already sorted in DSC, sorting state is cleared. - SPACE selects the column. If the column is already selected, selection is cleared. - - - - SHIFT + ALT + → ungroups the column, if the column is marked as groupable. - ALT + ← or ALT + ↑ collapses the column group header, if the header is not already collapsed. - ALT + → or ALT + ↓ expands the column group header, if the header is not already expanded. @@ -92,10 +89,6 @@ When the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/Ignite - SPACE - selects the row, if [Row Selection](row-selection.md) is enabled. - ALT + ← or ALT + ↑ - - - - - collapses the current node. @@ -107,16 +100,12 @@ collapses the current node. - - expands the current node. - - Practice all of the above mentioned actions in the demo sample below. Focus any navigable grid element and a list with some of the available actions for the element will be shown to guide you through. ## Custom Keyboard Navigation @@ -290,7 +279,6 @@ public class EmployeesNestedData } ``` - ## Known Limitations |Limitation|Description| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-live-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-live-data.md index 92e2400c8..f50e8cd2e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-live-data.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-live-data.md @@ -1612,7 +1612,6 @@ namespace Infragistics.Samples } ``` - ## Data binding and updates A service provides data to the component when the page loads, and when the slider controller is used to fetch a certain number of records. While in a real scenario updated data would be consumed from the service, here data is updated in code. This is done to keep the demo simple and focus on its main goal - demonstrate the grid performance. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-multi-column-headers.md index d61199bf3..149e254f3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-multi-column-headers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-multi-column-headers.md @@ -231,7 +231,6 @@ public class EmployeesFlatDetails } ``` - The declaration of multi-column headers is achieved by wrapping a set of columns into an [`IgbColumnGroup`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumnGroup.html) component with [`Header`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Header) title information passed. @@ -530,7 +529,6 @@ public class EmployeesFlatDetails } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -716,7 +714,6 @@ public class EmployeesFlatDetails } ``` - ## API References - [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-overview.md index 09e8941aa..df3adabbe 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-overview.md @@ -172,7 +172,6 @@ public class EmployeesNestedData } ``` - ## Getting Started with Ignite UI for Blazor Tree Grid ### Dependencies @@ -481,7 +480,6 @@ public class EmployeesFlatData } ``` - ## Persistence and Integration The indentation of the tree grid cell persists across other tree grid features like filtering, sorting and paging. @@ -631,7 +629,6 @@ public class EmployeesNestedData } ``` - ## API References - [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-paging.md index d638250de..4d2aace46 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-paging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-paging.md @@ -139,7 +139,6 @@ public class OrdersTreeData } ``` - ```css .gridSize { --ig-size: var(--ig-size-small); @@ -343,7 +342,6 @@ public class OrdersTreeData } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-actions.md index 102136274..63bbfc9bf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-actions.md @@ -19,7 +19,7 @@ The Ignite UI for Blazor Row Actions feature in Blazor Tree Grid enables develop The predefined actions UI components are: -- [`IgbGridEditingActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridEditingActions.html) - includes functionality and UI specifically designed for the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) option and row deletion of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). +- [`IgbGridEditingActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridEditingActions.html) - includes functionality and UI specifically designed for the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowEditable) option and row deletion of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). - [`IgbGridPinningActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridPinningActions.html) - includes functionality and UI specifically designed for the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. @@ -50,28 +50,24 @@ They are added inside the [`IgbTreeGrid`](https://www.infragistics.com/blazor/do These components expose templates giving flexibility for customization. For instance, if we would like to use the [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) for a Gmail scenario with row actions such as **delete**, **edit** and etc. You can simply create button component with icon, add click event to it and insert it into the [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html). - + ```razor
- - edit - - @if (!IsDeleted(actionstrip.Context)) - { - - delete - - } + +
``` - + ```razor @using IgniteUI.Blazor.Controls @@ -240,7 +236,6 @@ public class EmployeesFlatDetails } ``` - ## API References - [`IgbGridPinningActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridPinningActions.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-adding.md index 386ced00a..3b7ab200e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-adding.md @@ -140,10 +140,9 @@ public class EmployeesNestedTreeData } ``` - ## Row Adding Usage -Then define a [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) with bound data source, [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) set to true and an [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) component with editing actions enabled. The `AddRow` input controls the visibility of the button that spawns the row adding UI. +Then define a [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) with bound data source, [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowEditable) set to true and an [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) component with editing actions enabled. The `AddRow` input controls the visibility of the button that spawns the row adding UI. @@ -241,7 +240,7 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the [`RowAddTextTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowAddTextTemplate). +Customizing the text of the row adding overlay is possible using the [`RowAddTextTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowAddTextTemplate). @@ -303,13 +302,13 @@ The row adding UI comprises the buttons in the [`IgbActionStrip`](https://www.in ## API References -- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) +- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `RowEditCancel` - `EndEdit` -- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) +- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_PrimaryKey) - [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-drag.md index f04b22429..f732f8582 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-drag.md @@ -13,7 +13,7 @@ _premium: true # Row Dragging in Blazor Tree Grid -The Ignite UI for Blazor Row Dragging feature in Blazor Tree Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component and is configurable via the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable) input. +The Ignite UI for Blazor Row Dragging feature in Blazor Tree Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) component and is configurable via the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowDraggable) input. ## Blazor Tree Grid Row Drag Example @@ -178,10 +178,9 @@ public class EmployeesNestedData } ``` - ## Configuration -In order to enable row-dragging for your [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), all you need to do is set the grid's [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. +In order to enable row-dragging for your [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), all you need to do is set the grid's [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. ```razor @@ -190,7 +189,7 @@ In order to enable row-dragging for your [`IgbTreeGrid`](https://www.infragistic ### Templating the Drag Icon -The drag handle icon can be templated using the grid's [`DragIndicatorIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_DragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (**drag_indicator**) to **drag_handle**. @@ -227,9 +226,9 @@ With the help of the grid's row drag events you can create a grid that allows yo > [!Note] -> Make sure that there is a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. +> Make sure that there is a [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_PrimaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. -Once [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: +Once [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@ -425,14 +424,13 @@ public class EmployeesNestedTreeData } ``` - ## Limitations -Currently, there are no known limitations for the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable). +Currently, there are no known limitations for the [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowDraggable). ## API References -- [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowDraggable) +- [`RowDraggable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowDraggable) - `RowDragStart` - `RowDragEnd` - [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-editing.md index 1dd1f7bc3..4c4251c47 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-editing.md @@ -131,13 +131,12 @@ public class EmployeesNestedTreeData } ``` - > [!Note] > When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode. ## Row Editing Usage -Define a [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) with bound data source and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) set to true: +Define a [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) with bound data source and [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowEditable) set to true: ```razor @@ -154,7 +153,7 @@ Define a [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/Ignite > Setting primary key is mandatory for row editing operations. > [!Note] -> Enabling editing for individual columns is not necessary. Using the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) property in the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), all rows, with defined [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) input of that column to `false`. +> Enabling editing for individual columns is not necessary. Using the [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowEditable) property in the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), all rows, with defined [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) input of that column to `false`. > [!Note] > The [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. @@ -365,10 +364,9 @@ public class EmployeesNestedTreeData } ``` - ## Known Issues and Limitations -- When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection @@ -380,14 +378,14 @@ public class EmployeesNestedTreeData ## API References -- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowEditable) +- [`RowEditable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `EndEdit` - [`Field`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Field) - [`Editable`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_Editable) -- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) +- [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_PrimaryKey) - [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-pinning.md index c64da8210..7ad1377a3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-pinning.md @@ -170,7 +170,6 @@ public class EmployeesNestedTreeData } ``` - ## Row Pinning UI The built-in row pinning UI is enabled by adding an [`IgbActionStrip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbActionStrip.html) component with the [`IgbGridPinningActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridPinningActions.html) component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. @@ -220,7 +219,7 @@ this.Grid.PinRowAsync("ALFKI", 0); this.Grid.UnpinRowAsync("ALFKI"); ``` -Note that the row ID is the primary key value, defined by the [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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. +Note that the row ID is the primary key value, defined by the [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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` event and changing the `InsertAtIndex` property of the event arguments to the desired position index. @@ -249,7 +248,7 @@ igRegisterScript("rowPinningHandler", rowPinningHandler, false); ## Pinning Position -You can change the row pinning position via the [`Pinning`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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. ```razor @@ -433,7 +432,6 @@ public class EmployeesNestedTreeData } ``` - ## Row Pinning Limitations - Only records that exist in the data source can be pinned. @@ -584,7 +582,6 @@ public class EmployeesNestedTreeData } ``` - ## API References - [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-selection.md index ed496e004..f9fb7225b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-row-selection.md @@ -180,7 +180,6 @@ public class EmployeesFlatData } ``` - ## Setup In order to setup row selection in the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), you just need to set the [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection) property. This property accepts `GridSelectionMode` enumeration. @@ -411,7 +410,7 @@ Additionally, assigning row IDs to [`SelectedRows`](https://www.infragistics.com You can template header and row selectors in the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) and also access their contexts which provide useful functionality for different scenarios. -By default, the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`Click`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. +By default, the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`Click`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html#IgniteUI_Blazor_Controls_IgbCheckbox_Click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. #### Row Template @@ -438,7 +437,7 @@ igRegisterScript("WebGridRowSelectorTemplate", (ctx) => { The [`RowID`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbRowSelectorTemplateDetails.html#IgniteUI_Blazor_Controls_IgbRowSelectorTemplateDetails_RowID) property can be used to get a reference of an [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) row. This is useful when you implement a `click` handler on the row selector element. -In the above example we are using an [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) and we bind `rowContext.selected` to its [`Checked`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckboxBase.html#IgniteUI_Blazor_Controls_IgbCheckboxBase_Checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). +In the above example we are using an [`IgbCheckbox`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html) and we bind `rowContext.selected` to its [`Checked`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCheckbox.html#IgniteUI_Blazor_Controls_IgbCheckbox_Checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). ### Header Template @@ -562,7 +561,6 @@ public class EmployeesFlatData } ``` - ### Excel Style Row Selectors Demo @@ -708,7 +706,6 @@ public class EmployeesFlatData } ``` - ### Conditional Selection Demo @@ -815,7 +812,6 @@ public class EmployeesFlatData } ``` - ## API References - [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-search.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-search.md index b0136c099..f12da6db1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-search.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-search.md @@ -173,7 +173,6 @@ public class EmployeesFlatData } ``` - ## Blazor Search Usage ### Tree Grid Setup @@ -208,9 +207,9 @@ public bool exactMatch = false; ### Blazor Search Box Input -Now let's create our search input! By binding our `SearchText` to the `Value` property to our newly created input and subscribe to the `ValueChanging` event, we can detect every single `SearchText` modification by the user. This will allow us to use the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html)'s [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext) and [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindPrev) methods to highlight all the occurrences of the `SearchText` and scroll to the next/previous one (depending on which method we have invoked). +Now let's create our search input! By binding our `SearchText` to the `Value` property to our newly created input and subscribe to the `ValueChanging` event, we can detect every single `SearchText` modification by the user. This will allow us to use the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html)'s [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FindNext) and [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext) and the [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindPrev) methods have three arguments: +Both the [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FindNext) and the [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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) @@ -235,7 +234,7 @@ public void NextSearch() ### 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext) and the [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FindNext) and the [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FindPrev) methods inside the buttons' respective click event handlers. @@ -264,7 +263,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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext)/[`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FindNext)/[`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FindPrev) methods depending on which key the user has pressed. ```razor @@ -436,7 +435,7 @@ On the right in our input group, let's create three separate containers with the } ``` -- For the search navigation buttons, we have added two ripple styled buttons with material icons. The handlers for the click events remain the same - invoking the [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext)/[`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindPrev) methods. +- For the search navigation buttons, we have added two ripple styled buttons with material icons. The handlers for the click events remain the same - invoking the [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FindNext)/[`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FindPrev) methods. ```razor
@@ -474,10 +473,10 @@ In this article we implemented our own search bar for the [`IgbTreeGrid`](https: [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) methods: -- [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindNext) -- [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_FindPrev) -- [`ClearSearch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClearSearch) -- [`RefreshSearch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RefreshSearch) +- [`FindNext`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FindNext) +- [`FindPrev`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_FindPrev) +- [`ClearSearch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ClearSearch) +- [`RefreshSearch`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RefreshSearch) [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) properties: @@ -487,9 +486,6 @@ Additional components with relative APIs that were used: - [`IgbIcon`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIcon.html) - [`IgbChip`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbChip.html) - - - - [`IgbInput`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbInput.html) - [`IgbIconButton`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbIconButton.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-selection.md index 5513000c2..67abe3c3c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-selection.md @@ -18,7 +18,7 @@ With the Ignite UI for Blazor Select feature in Blazor Tree Grid you can easily - Cell selection - Column selection -With the [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection) property, you can specify: +With the [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowSelection) property, you can specify: - None - Single @@ -160,12 +160,11 @@ public class EmployeesFlatData } ``` - ## Blazor Tree Grid Selection Options ### Blazor Tree Grid Row Selection -Property [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowSelection) enables you to specify the following options: +Property [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowSelection) enables you to specify the following options: - `None` - Row selection would be disabled for the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). - `Single` - Selection of only one row within the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) would be available. @@ -181,7 +180,7 @@ Property [`RowSelection`](https://www.infragistics.com/blazor/docs/api/api/Ignit ### Blazor Tree Grid Cell Selection -Property [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_CellSelection) enables you to specify the following options: +Property [`CellSelection`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_CellSelection) enables you to specify the following options: - `None` - Cell selection would be disabled for the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). - `Single` - Selection of only one cell within the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) would be available. @@ -211,7 +210,7 @@ This leads to the following three variations: ## Known Issues and Limitations -When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +When the grid has no [`PrimaryKey`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_PrimaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection - Row Expand/collapse diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-size.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-size.md index 72487b59d..5757ee46a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-size.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-size.md @@ -231,7 +231,6 @@ public class EmployeesFlatDetails } ``` - ## Usage As you can see in the demo above, the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set `--ig-size` either inline or part of a CSS class: @@ -342,14 +341,14 @@ Finally, let's provide the necessary logic in order to actually apply the size: } ``` -Another option that [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) provides for you, in order to be able to change the height of the rows in the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), is the property [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowHeight). So let's see in action how this property affects the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) layout along with the `--ig-size`. +Another option that [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) provides for you, in order to be able to change the height of the rows in the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html), is the property [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowHeight). So let's see in action how this property affects the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) layout along with the `--ig-size`. 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowHeight) specified**. +- `--ig-size` CSS variable will have no impact on row height **if there is [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowHeight) specified**. - `--ig-size` will **affect all of the rest elements in the Tree Grid**, as it has been described above. -We can now extend our sample and add [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_RowHeight) property to the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html): +We can now extend our sample and add [`RowHeight`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_RowHeight) property to the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html): ```razor @@ -447,7 +445,7 @@ You can sort any column or a combination of columns through the [`IgbTreeGrid`]( > [!Note] > Sorting is performed using our `DefaultSortingStrategy` algorithm. Any [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html) or `ISortingExpression` can use a custom implementation of the `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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_ClearSort) method: +As with the filtering behavior, you can clear the sorting state by using the [`ClearSort`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_ClearSort) method: ```razor @code { @@ -462,14 +460,14 @@ As with the filtering behavior, you can clear the sorting state by using the [`C > [!Note] -> The [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_SortStrategy) of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) is of different type compared to the [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortStrategy) of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html), since they work in different scopes and expose different parameters. +> The [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_SortStrategy) of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) is of different type compared to the [`SortStrategy`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_SortStrategy) of the [`IgbColumn`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html), since they work in different scopes and expose different parameters. > [!Note] > The sorting operation **DOES NOT** change the underlying data source of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). ## Initial Sorting State -It is possible to set the initial sorting state of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) by passing an array of sorting expressions to the [`SortingExpressions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortingExpressions) property of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). +It is possible to set the initial sorting state of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html) by passing an array of sorting expressions to the [`SortingExpressions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_SortingExpressions) property of the [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html). @@ -499,7 +497,7 @@ It is possible to set the initial sorting state of the [`IgbTreeGrid`](https://w The sorting indicator icon in the column header can be customized using a template. The following properties are available for templating the sorting indicator for any sorting state (ascending, descending, none): -- [`SortHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. +- [`SortHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_SortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. @@ -516,7 +514,7 @@ The sorting indicator icon in the column header can be customized using a templa -- [`SortAscendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. +- [`SortAscendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_SortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. @@ -533,7 +531,7 @@ The sorting indicator icon in the column header can be customized using a templa -- [`SortDescendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_SortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. +- [`SortDescendingHeaderIconTemplate`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_SortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. @@ -715,7 +713,6 @@ public class OrdersTreeData } ``` - ## API References - [`IgbSortingExpression`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbSortingExpression.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-state-persistence.md index d96110986..0df220d2c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-state-persistence.md @@ -465,7 +465,6 @@ public class EmployeesNestedData } ``` - ## Limitations diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-summaries.md index c7265873a..5d69887ad 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-summaries.md @@ -170,7 +170,6 @@ public class OrdersTreeData } ``` - > [!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** @@ -437,7 +436,6 @@ public class EmployeesFlatData } ``` - ### Summary Template @@ -630,7 +628,6 @@ public class EmployeesNestedTreeData } ``` - ## Disabled Summaries The [`DisabledSummaries`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbColumn.html#IgniteUI_Blazor_Controls_IgbColumn_DisabledSummaries) property provides precise per-column control over the Blazor Tree Grid summary feature. This property enables users to customize the summaries displayed for each column in the TreeGrid, 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. @@ -908,7 +905,6 @@ public class OrdersTreeData } ``` - ## Child Summaries @@ -1089,7 +1085,6 @@ public class OrdersTreeData } ``` - ## Keyboard Navigation @@ -1293,7 +1288,6 @@ public class OrdersTreeData } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-toolbar.md index 9516bce87..1b50f977c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-toolbar.md @@ -153,7 +153,6 @@ public class EmployeesFlatAvatars } ``` - The predefined [`IgbGridToolbarActions`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridToolbarActions.html) and [`IgbGridToolbarTitle`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridToolbarTitle.html) UI components are added inside the [`IgbGridToolbar`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridToolbar.html) and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: @@ -341,7 +340,6 @@ public class EmployeesFlatAvatars } ``` - ### Title @@ -593,7 +591,6 @@ public class EmployeesFlatAvatars } ``` - ## 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. @@ -720,7 +717,6 @@ public class OrdersTreeData } ``` - ## Custom Content If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable. @@ -875,7 +871,6 @@ public class EmployeesFlatAvatars } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -1024,7 +1019,6 @@ public class EmployeesFlatAvatars } ``` - ## API References The Grid Toolbar service has a few more APIs to explore, which are listed below. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-virtualization.md index 361ed4034..7e1aebac9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-virtualization.md @@ -23,8 +23,8 @@ However, it is also possible to explicitly set the [`IgbTreeGrid`](https://www.i 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/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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 [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html)'s [`ColumnWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbGridBaseDirective.html#IgniteUI_Blazor_Controls_IgbGridBaseDirective_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`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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 [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html)'s [`ColumnWidth`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html#IgniteUI_Blazor_Controls_IgbTreeGrid_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 [`IgbTreeGrid`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreeGrid.html)'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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree.md index 7df53daf0..973be66b0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree.md @@ -55,7 +55,6 @@ In this basic Ignite UI for Blazor Tree example, you can see how to define a tre } ``` -
## How to Use Ignite UI for Blazor Tree With Ignite UI @@ -250,7 +249,6 @@ igc-tree-item { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/treemap-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/treemap-chart.md index 204954e32..2583036d5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/treemap-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/treemap-chart.md @@ -100,7 +100,6 @@ public class CountyHierarchicalData } ``` -
## Treemap Recommendations @@ -282,7 +281,6 @@ public class CountyHierarchicalData } ``` -
### Layout Types @@ -473,7 +471,6 @@ public class CountyHierarchicalData } ``` - ### Blazor Treemap Highlighting In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set [`HighlightingMode`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreemap.html#IgniteUI_Blazor_Controls_IgbTreemap_HighlightingMode)to Brighten or FadeOthers. @@ -592,7 +589,6 @@ public class CountyHierarchicalData } ``` - ## Blazor Treemap Percent based highlighting - [`HighlightedDataSource`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbTreemap.html#IgniteUI_Blazor_Controls_IgbTreemap_HighlightedDataSource): Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property. @@ -687,7 +683,6 @@ public class CountryTopUrbanPopData } ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/xdate-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/xdate-picker.md deleted file mode 100644 index db5f5a44f..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/xdate-picker.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: Blazor XDate Picker | Data Visualization Tools | Infragistics -_description: Infragistics' Blazor xdate picker component helps your users select dates. Improve your graphs and visualization with Ignite UI for Blazor! -_keywords: Blazor xdate picker, drop down, Ignite UI for Blazor, Infragistics -mentionedTypes: ["XDatePicker"] -_tocName: XDate Picker -_premium: true ---- - -# Blazor XDate Picker Overview - -The XDate Picker component allows users to use a drop-down calendar UI allowing the intuitive selection of a day, month and year. This can be helpful when an application user needs to select specific dates, and multiple editors can be combined to create a date-range UI. - -> [!WARNING] -> The `XDatePicker` component is deprecated from version of Ignite UI for Blazor. For the latest supported Ignite UI for Blazor Date Picker component refer to its respective page under "Scheduling". - -## Blazor XDate Picker Example - -This sample demonstrates how to create `XDatePicker` with option to select a single date. - -```razor -@using IgniteUI.Blazor.Controls - - -
-
- -
-
- -@code { - - public DateTime SelectedDate { get; set; } - public IgbXDatePicker DatePicker { get; set; } - - protected override void OnInitialized() - { - this.SelectedDate = DateTime.Today; - } -} -``` - - -## Component Modules - -The XDate Picker component requires the following modules to be registered: - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor( - typeof(IgbXDatePickerModule)); -``` - -
- -## Usage - -The Blazor XDate Picker editor component consists of three default parts - the text area, a calendar drop-down button, and a clear button. These areas are described below: - -- Text Area: This displays the selected date, stored in the `Value` property of the editor. - -- Calendar: Clicking the calendar button will open the calendar drop-down of the XDate Picker. The calendar will open to show the month of the currently selected `Value`, if there is one. If a `Value` is not specified, the calendar will show the month corresponding to the current date. The month at the top can be clicked to show a list of months, and the same applies for the year. There are also arrow buttons to the left and right of the month and year visualization that will increment and decrement the shown month chronologically. - -- Clear Button: The 'x' icon will clear the current value. - -| Property | Type | Description | -| ---------|------|------------ | -| `IconColor` | string | Changes the color of the calendar button. | -| `AllowTextInput` | bool | The **xdate** picker's value can be typed-in and modified by toggling this property to true. | -| `DateFormat` | enum | Defaults to DateShort e.g. 'mm/dd/yyyy'. When set to DateLong, the date displayed in the editor will appear as e.g. Wednesday, April 14, 2021. | -| `FirstDayOfWeek` | enum | Defaults to Sunday. A given day of the week will be used as the first day in each weekly row of the calendar, e.g. Monday through Sunday. | -| `FormatString` | string | When DateShort is used, the date's format can be configured e.g. 'dd/mm/yyyy'. Note, if the `DateFormat`'s DateLong and `FormatString` are set then the `DateFormat` is ignored. | -| `Label` | string | Displays custom text above the date in the top-left corner of the XDate Picker. | -| `MinDate` | DateTime | Restricts earlier dates from being selected or viewed. | -| `MaxDate` | DateTime | Restricts later dates from being selected or viewed. | -| `Placeholder` | string | A custom string to be displayed when the value within the edit portion of the calendar is cleared. | -| `ShowClearButton` | bool | Defaults to true, the clear button is directly to the left of the calendar button, visualized by an X. When clicked, it will clear the `Value` of the XDate Picker. The clear button's visibility can be toggled on and off. | -| `ShowTodayButton`| bool | The today is directly below the dates when the calendar is opened. When clicked, it will select the current date. The today button's visibility can be toggled on and off. | -| `ShowWeekNumbers` | bool | Week numbers can be displayed as a number, at the left of every row of dates, in the drop down portion of the XDate Picker. The week number's visibility can be toggled on and off. | -| `FirstWeekOfYear` | enum | Configures the start of the week numbers for the entire year. Can be set to FirstDay, FirstFourDayWeek, FirstFullWeek. | -| `OpenOnFocus` | bool | By default, the dropdown portion of the XDate Picker is opened on single click, forcing the user to click the calendar button to drop down the calendar. | -| `Value` | date | Sets the value of the XDate Picker and selects it in the dropdown calendar. | - -Users can also customize the XDate Picker's font by using the various text properties of the control. They are: `TextColor`, `TextFontFamily`, `TextFontSize`, `TextFontStyle`, and `TextFontWeight`. - -### Editing - -The following example demonstrates how to enable editing in the `XDatePicker`. - -```razor -@using IgniteUI.Blazor.Controls - - -
-
- -
-
- -@code { - - public DateTime SelectedDate { get; set; } - public IgbXDatePicker DatePicker { get; set; } - protected override void OnInitialized() - { - this.SelectedDate = DateTime.Today; - } -} -``` - - -
- -### Date Limits - -The following example demonstrates how to restrict selected dates in the `XDatePicker`. - -```razor -@using IgniteUI.Blazor.Controls - - -
-
-
- -
-
- -
-
-
- -
-
- -@code { - public DateTime SelectedDate { get; set; } - public DateTime MinDate { get; set; } - public DateTime MaxDate { get; set; } - public IgbXDatePicker DatePicker { get; set; } - - protected override void OnInitialized() - { - this.SelectedDate = DateTime.Today; - var current = DateTime.Today; - this.MinDate = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1); - this.MaxDate = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.DaysInMonth(DateTime.Today.Year, DateTime.Today.Month)); - } -} -``` - - -
- -### Date Formats - -The following example demonstrates how apply a long date in the `XDatePicker`. - -```razor -@using IgniteUI.Blazor.Controls - - -
-
- -
-
- -
-
- -@code { - - public DateTime SelectedDate { get; set; } - public IgbXDatePicker DatePicker { get; set; } - public DateFormats DateFormat { get; set; } - - protected override void OnInitialized() - { - this.SelectedDate = DateTime.Today; - this.DateFormat = DateFormats.DateLong; - } -} -``` - - -
- -### Date Ranges - -The following example demonstrates how combine multiple `XDatePicker` controls. - -```razor -@using IgniteUI.Blazor.Controls - -
-
- From: - - To: - -
-
- - - -@code { - - public DateTime FromDate { get; set; } - public DateTime ToDate { get; set; } - - protected override void OnAfterRender(bool firstRender) - { - if (firstRender) - { - this.FromDate = DateTime.Today; - this.ToDate = DateTime.Today.AddDays(1); - StateHasChanged(); - } - } - - public void FromDateValueChanged(IgbSelectedValueChangedEventArgs e) - { - FromDate = e.NewValue; - if(this.FromDate > this.ToDate) - { - this.ToDate = this.FromDate.AddDays(1); - StateHasChanged(); - } - } - - public void ToDateValueChanged(IgbSelectedValueChangedEventArgs e) - { - this.ToDate = e.NewValue; - if (this.ToDate < this.FromDate) - { - this.FromDate = e.NewValue.AddDays(-1); - StateHasChanged(); - } - } -} -``` - - -
- -## API References - -The following is a list of API members mentioned in the above sections: - -- `XDatePicker` -- `IconColor` -- `AllowTextInput` -- `DateFormat` -- `FirstDayOfWeek` -- `FormatString` -- `Label` -- `MinDate` -- `MaxDate` -- `Placeholder` -- `ShowClearButton` -- `ShowTodayButton` -- `ShowWeekNumbers` -- `FirstWeekOfYear` -- `OpenOnFocus` -- `Value` -- `TextColor` -- `TextFontFamily` -- `TextFontSize` -- `TextFontStyle` -- `TextFontWeight` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/accordion.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/accordion.md index 5790d92ea..319444b5c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/accordion.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/accordion.md @@ -110,7 +110,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Getting Started with React Accordion @@ -435,7 +434,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` -
### Nested React Accordions Scenario @@ -566,7 +564,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Keyboard Navigation diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/ai-assisted-development-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/ai-assisted-development-overview.md index c8fb766ed..4f83ef8f5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/ai-assisted-development-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/ai-assisted-development-overview.md @@ -1,30 +1,109 @@ --- title: AI-Assisted Development with Ignite UI - Ignite UI for React -_description: Ignite UI provides Agent Skills, the Ignite UI CLI MCP server, and the Theming MCP server to ground AI coding assistants in correct component APIs, import paths, and design tokens across Angular, React, and Web Components. -_keywords: React, Ignite UI for React, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor +_description: Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command — npx igniteui-cli ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs. +_keywords: React, Ignite UI for React, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config _language: en _license: MIT _canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" +last_updated: "2026-05-03" namespace: Infragistics.Controls mentionedTypes: [] _tocName: Agent Workflow --- + + # AI-Assisted Development with Ignite UI -Ignite UI for Angular, React, and Web Components provides a three-part AI toolchain - Agent Skills, the Ignite UI CLI MCP server, and the Ignite UI Theming MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server exposes the Ignite UI Theming Engine as queryable agent context. All three components work with GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant. +Ignite UI for React provides a complete AI toolchain - Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server and the MAKER MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server (`@igniteui/mcp-server`) exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server (`igniteui-theming`) exposes the Ignite UI Theming Engine as queryable agent context. The MAKER MCP (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. Skills, CLI MCP and Theming MCP - all three are configured by a single command: `npx igniteui-cli ai-config` + +The MCP servers and Agent Skills serve different purposes and have different prerequisites: + +| Component | What it provides | Requires Ignite UI installed? | +| -------------------- | -------------------------------------------------------------- | ----------------------------- | +| Ignite UI MCP server | Documentation queries, API reference, scaffolding tools | No | +| Theming MCP server | Design tokens, palette tools, WCAG contrast validation | No | +| Agent Skills | Project-level instruction packages for correct component usage | Yes | + +You can start evaluating Ignite UI AI assistance with the MCP servers alone - Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages. + +The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts. + +## Configure the AI Toolchain + +Run this command from the root of your existing Angular, React, Blazor, or Web Components project. It configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. Existing files are only updated if their content has changed. + +```bash +npx igniteui-cli ai-config +``` + +> [!IMPORTANT] +> Without a version pin, `npx` may pull an older CLI version that does not recognize the `ai-config` subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x. + +After the command finishes, start the MCP servers in your AI client. The servers are configured but not yet running - the client needs to launch each server before its tools are available to the agent. + +### What to Expect + +If Ignite UI is **not** installed in the project: + +``` +Ignite UI MCP servers configured in .vscode/mcp.json +No AI skill files found. Make sure packages are installed (npm install) and your Ignite UI packages are up-to-date. +``` + +The MCP servers are ready to use. Skills will be added automatically the next time you run `ai-config` after installing Ignite UI. + +If Ignite UI **is** installed in the project: + +``` +Ignite UI MCP servers configured in .vscode/mcp.json +Agent Skills copied to .claude/skills/ +``` + +Both the MCP servers and Skills are configured. + +### Start the Servers + +**VS Code with GitHub Copilot:** -The AI toolchain does not currently support Blazor in the CLI MCP and Agent Skills layers - Blazor coverage is provided by the Theming MCP only. The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts. +Open `.vscode/mcp.json`. VS Code displays an inline **Start** button above each server entry. Click **Start** for both `igniteui` and `igniteui-theming`. Once started, VS Code shows the available tool count next to each server (for example, _"13 tools | 1 prompt"_). Alternatively, run **MCP: List Servers** from the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`), select each server, and choose **Start**. + +**Cursor:** + +Open **Settings → MCP**, locate the `igniteui` and `igniteui-theming` entries, and toggle each one on. Cursor starts each server immediately and displays its tool count. + +**Claude Code:** + +Run `claude mcp list` to confirm both servers are registered. Claude Code starts MCP servers automatically when their tools are first invoked - no manual start step is required. + +**JetBrains AI Assistant:** + +Open **Settings → Tools → AI Assistant → Model Context Protocol (MCP)**. Click the play icon next to each server entry to start it. + +**Claude Desktop:** + +Quit and relaunch Claude Desktop. The servers start automatically on launch. + +### Install Ignite UI and Add Skills Later + +If you ran `ai-config` without Ignite UI installed and want to add Skills, install the Ignite UI package for your framework and re-run the command: + +```bash +npm install igniteui-react +npx igniteui-cli@latest ai-config +``` + +The command detects that Skills are now available and copies them. The MCP server entries in `.vscode/mcp.json` are left unchanged (already up-to-date) ## The AI Toolchain at a Glance Ignite UI's AI toolchain consists of three independently usable layers. Each layer can be enabled on its own; they are designed to work together. -| Layer | What it provides | Owner | Frameworks | -| --- | --- | --- | --- | -| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor | -| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components | -| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS variable generation, theming queries via MCP | Infragistics | Angular, React, Web Components, Blazor | +| Layer | What it provides | Owner | Frameworks | +| --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- | +| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor | +| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components, Blazor | +| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS custom property generation, WCAG AA contrast validation | Infragistics | Angular, React, Web Components, Blazor | The CLI MCP server and Theming MCP server are both started through `npx` and connect to any MCP-compatible client through STDIO transport. Agent Skills are local files placed in your project that the AI client reads from disk. @@ -38,17 +117,17 @@ For full setup instructions and IDE wiring, see [Agent Skills](skills.md). ## CLI MCP Server -The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session. +The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, Blazor or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session. -The CLI MCP server starts via `npx` without a global install: +The CLI MCP server is configured via `npx` without a global install: ```bash -npx -y igniteui-cli mcp +npx igniteui-cli ai-config ``` The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see the CLI MCP setup guides below. -The CLI MCP server does not support Blazor. It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. +It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. ## Theming MCP Server @@ -68,20 +147,35 @@ For configuration details, see [Theming MCP](theming-mcp.md). The CLI MCP server and Theming MCP server work with any editor or AI client that supports MCP with STDIO transport. -| Client | Configuration method | -| --- | --- | -| VS Code with GitHub Copilot | `.vscode/mcp.json` | -| Cursor | `.cursor/mcp.json` | -| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | -| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | -| Claude Code | `.mcp.json` or the Claude Code MCP CLI command | -| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** | +| Client | Configuration method | +| --------------------------- | ----------------------------------------------------------------- | +| VS Code with GitHub Copilot | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` or the Claude Code MCP CLI command | +| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)*- | Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings. -## Set Up the AI Toolchain +### Quick Setup + +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. + +**Using the Ignite UI CLI:** + +```bash +npx igniteui-cli ai-config +``` + +If you have the Ignite UI CLI installed globally, use the shorter form: + +```bash +ig ai-config +``` -Setting up the Ignite UI AI toolchain takes three steps: load Agent Skills for your framework, connect the CLI MCP server, and optionally connect the Theming MCP server. All three steps are independent and can be done in any order. +> [!NOTE] +> The command requires Ignite UI packages to be installed in your project (`npm install`). If no skill files are found, make sure your packages are up-to-date. ### Step 1 - Load Agent Skills @@ -140,10 +234,6 @@ For configuration details and theming workflows, see [Theming MCP](theming-mcp.m ## Additional Resources -- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md) - - - - [Agent Skills](./skills.md) - [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/area-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/area-chart.md index 519ef82f1..6a10b77d2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/area-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/area-chart.md @@ -134,7 +134,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Area Chart Recommendations @@ -275,7 +274,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Area Chart with Multiple Series @@ -399,7 +397,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Area Chart Styling @@ -528,7 +525,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Advanced Types of Area Charts @@ -660,7 +656,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The following sections explain more advanced types of React Area Charts that can be created using the [`IgrDataChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatachart.html) control instead of [`IgrCategoryChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrcategorychart.html) control with simplified API. @@ -822,7 +817,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked Area Chart @@ -1007,7 +1001,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100% Area Chart @@ -1189,7 +1182,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked Spline Area Chart @@ -1374,7 +1366,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100% Spline Area Chart @@ -1555,7 +1546,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Radial Area Chart @@ -1718,7 +1708,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Polar Area Chart @@ -1886,7 +1875,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Polar Spline Area Chart @@ -2039,7 +2027,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/avatar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/avatar.md index d843aa1cc..32c99d77c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/avatar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/avatar.md @@ -44,7 +44,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Usage @@ -111,7 +110,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Image The avatar can also display an image when the [`src`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igravatar.html#src) attribute is assigned a valid URL to a static asset. In that case the [`initials`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igravatar.html#initials) value will be ignored and children elements will not be rendered. @@ -145,7 +143,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Shape The avatar supports three shapes - `circle`, `rounded`, and `square`. The default shape of the avatar is `square` and it can be changed via the `shape` attribute. @@ -180,7 +177,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Size Apart from the shape, the size of the avatar can also be changed by utilizing the `--ig-size` CSS variable. The supported sizes are `small` (default), `medium`, and `large`. The following code snippet shows how to use a different component size: @@ -232,7 +228,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Styling The [`IgrAvatar`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igravatar.html) component exposes several CSS parts, giving you full control over its style: @@ -340,7 +335,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md index c774867de..d9268b906 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md @@ -44,7 +44,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Usage @@ -115,7 +114,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Shape The badge component supports `rounded`(default) and `square` shapes. These values can be assigned to the [`shape`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbadge.html#shape) attribute. @@ -155,7 +153,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Dot The Ignite UI for React badge component can also render as a minimal dot indicator for notifications by setting its `dot` attribute. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.). @@ -166,7 +163,6 @@ The Ignite UI for React badge component can also render as a minimal dot indicat - ## Styling The [`IgrBadge`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbadge.html) component exposes a `base` CSS part that can be used to change all of its style properties. @@ -214,7 +210,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/banner.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/banner.md index 01075b026..eb780f452 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/banner.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/banner.md @@ -108,7 +108,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage First, you need to the install the corresponding Ignite UI for React npm package by running the following command: @@ -306,7 +305,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Binding to events The banner component emits the `Closing` and `Closed` events when being closed. The `Closing` event is cancelable - it uses the [`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent) interface and the emitted object has its `cancelable` property set to **true**. If we cancel the `Closing` event, the corresponding end action and event will not be triggered - the banner will not be closed and the `Closed` event will not be emitted. @@ -530,7 +528,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling The [`IgrBanner`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbanner.html) component exposes several CSS parts which give you full control over its style: @@ -709,7 +706,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrBanner`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbanner.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bar-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bar-chart.md index a722cb0ba..c1bf96bf6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bar-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bar-chart.md @@ -176,7 +176,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Bar Chart Recommendations @@ -368,7 +367,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Bar Chart with Multiple Series @@ -534,7 +532,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Bar Chart Styling @@ -692,7 +689,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked Bar Chart @@ -872,7 +868,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100% Bar Chart @@ -1048,7 +1043,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bubble-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bubble-chart.md index c6c3bf96e..1a143931d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bubble-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bubble-chart.md @@ -260,12 +260,11 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Bubble Chart with Single Series -You can bind your data to `ItemsSource` property of [`IgrBubbleSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html) and map data columns using its [`xMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrscatterbase.html#xMemberPath), [`yMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrscatterbase.html#yMemberPath), [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#radiusMemberPath) properties, as shown in the example below: +You can bind your data to `ItemsSource` property of [`IgrBubbleSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html) and map data columns using its [`xMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#xMemberPath), [`yMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#yMemberPath), [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#radiusMemberPath) properties, as shown in the example below: ```typescript export class WorldStatsItem { @@ -447,7 +446,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Bubble Chart with Multiple Series @@ -697,12 +695,11 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Bubble Chart Styling -In React Bubble Chart, you can customize shape of bubble markers using [`markerType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrmarkerseries.html#markerType) property, their size with [`radiusScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#radiusScale) property, and their appearance using [`markerBrush`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrmarkerseries.html#markerBrush), [`markerOutline`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrmarkerseries.html#markerOutline), [`markerThickness`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrmarkerseries.html#markerThickness) properties. In addition, you can also color bubble markers based on a data column using [`fillMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#fillMemberPath) and [`fillScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#fillScale) properties. In this example, usage of above properties is demonstrated. +In React Bubble Chart, you can customize shape of bubble markers using [`markerType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#markerType) property, their size with [`radiusScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#radiusScale) property, and their appearance using [`markerBrush`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#markerBrush), [`markerOutline`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#markerOutline), [`markerThickness`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#markerThickness) properties. In addition, you can also color bubble markers based on a data column using [`fillMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#fillMemberPath) and [`fillScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#fillScale) properties. In this example, usage of above properties is demonstrated. ```typescript export class WorldStatsItem { @@ -890,7 +887,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources @@ -908,11 +904,11 @@ The following table lists API members mentioned in the above sections: - `ItemsSource` - [`fillMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#fillMemberPath) - [`fillScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#fillScale) -- [`markerType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrmarkerseries.html#markerType) -- [`markerBrush`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrmarkerseries.html#markerBrush) -- [`markerOutline`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrmarkerseries.html#markerOutline) -- [`markerThickness`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrmarkerseries.html#markerThickness) +- [`markerType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#markerType) +- [`markerBrush`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#markerBrush) +- [`markerOutline`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#markerOutline) +- [`markerThickness`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#markerThickness) - [`radiusScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#radiusScale) - [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#radiusMemberPath) -- [`xMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrscatterbase.html#xMemberPath) -- [`yMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrscatterbase.html#yMemberPath) +- [`xMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#xMemberPath) +- [`yMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrbubbleseries.html#yMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bullet-graph.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bullet-graph.md index 21db6d413..c7d21c311 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bullet-graph.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/bullet-graph.md @@ -322,7 +322,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
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-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrbulletgraph.html#transitionDuration) property. @@ -448,7 +447,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## 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-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrbulletgraph.html#value) appear with a lower opacity. A good example is if [`value`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrbulletgraph.html#value) is 50 and [`highlightValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrbulletgraph.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-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrbulletgraph.html#targetValue) is set to. To enable this first set [`highlightValueDisplayMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrbulletgraph.html#highlightValueDisplayMode) to Overlay and then apply a [`highlightValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrbulletgraph.html#highlightValue) to something lower than [`value`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrbulletgraph.html#value). @@ -508,7 +506,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Comparative Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state. @@ -580,7 +577,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. @@ -648,7 +644,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Labels The labels indicate the measures on the scale. @@ -701,7 +696,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Backing The backing element represents background and border of the bullet graph component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. @@ -752,7 +746,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Scale The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using [`isScaleInverted`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrbulletgraph.html#isScaleInverted) property) and all labels will be rendered from right-to-left instead of left-to-right. @@ -805,7 +798,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the bullet graph with all features and visuals enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button-group.md index cff71160f..b6ed1126b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button-group.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button-group.md @@ -96,7 +96,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage First, you need to the install the corresponding Ignite UI for React npm package by running the following command: @@ -201,7 +200,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Selection In order to configure the Ignite UI for React [`IgrButtonGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbuttongroup.html) selection, you could use its [`selection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbuttongroup.html#selection) property. This property accepts the following three modes: @@ -320,7 +318,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - A [`IgrToggleButton`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtogglebutton.html) could be marked as selected via its [`selected`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtogglebutton.html#selected) attribute or through the [`IgrButtonGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbuttongroup.html) [`selectedItems`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbuttongroup.html#selectedItems) attribute: ```tsx @@ -393,7 +390,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling The [`IgrButtonGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbuttongroup.html) component exposes `group` CSS part that allows us to style the button group container. @@ -485,7 +481,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API Reference - [`IgrButtonGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbuttongroup.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button.md index bf9a5419a..ee368e73f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/button.md @@ -56,7 +56,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage First, you need to the install the corresponding Ignite UI for React npm package by running the following command: @@ -90,8 +89,8 @@ With `prefix` and `suffix` slots of the [`IgrButton`](https://www.infragistics.c ## Type -The button component will change its internal structure from a [` - - - - -
- - - - - - - - - -
- ); - } - - onExcelEditModeChange = (event: any) => { - this.grid.editModeClickAction = parseInt(event.target.value); - this.setState({ }); - } - - //#region Input Control Handlers - - onCommitClick = () => { - this.grid.commitEdits(); - - // request a new render so the undo/redo buttons update. - this.setState({ }); - } - - onUndoClick = () => { - this.grid.undo(); - - // request a new render so the undo/redo buttons update. - this.setState({ }); - } - - onRedoClick = () => { - this.grid.redo(); - - // request a new render so the undo/redo buttons update. - this.setState({ }); - } - - onEditModeChange = (event: any) => { - this.grid.cancelEdits(); - this.grid.editMode = parseInt(event.target.value); - this.setState({ }); - } - //#endregion - - //#region Grid Handlers - onDeleteRowClick = (e: MouseEvent) => { - const button = e.srcElement as HTMLButtonElement; - const viewIndex = parseInt(button.id); - const rowItem = this.grid.actualDataSource.getItemAtIndex(viewIndex); - - this.grid.removeItem(rowItem); - this.setState({ }); - } - - onCellValueChanging = (s: IgrDataGrid, e: IgrGridCellValueChangingEventArgs) => { - - if(e.newValue === "") { - - s.setEditError(e.editID, "Error, cell is empty"); - } - - // request a new render so the undo/redo buttons update. - setTimeout(() => this.setState({ })); - - } - - onRowEditEnded = (s: IgrDataGrid, e: IgrGridRowEditEndedEventArgs) => { - this.setState({}); - } - - onDeleteCellUpdating = (s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - if (content.childElementCount === 0) { - const button = document.createElement("button") as HTMLButtonElement; - button.innerText = "Delete"; - button.addEventListener("click", this.onDeleteRowClick); - content.appendChild(button); - } - - const button = content.children[0] as HTMLButtonElement; - button.disabled = e.cellInfo.isDeleted; - button.id = e.cellInfo.dataRow.toString(); - } - //#endregion -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Overview - -Editing in the React data grid is configured by using the [`editMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#editMode) option of the React grid. This property takes three different options, listed below: - -- [`None`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.editmodetype.html#None): Editing is not enabled. -- [`Cell`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.editmodetype.html#Cell): Allow cells to enter edit mode and commit the value on exiting edit mode. -- [`CellBatch`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.editmodetype.html#CellBatch): Allows cells to enter edit mode but changes will be cached later until they are committed. -- [`Row`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.editmodetype.html#Row): Allow rows to enter edit mode and commit the value on exit. - -When set to [`CellBatch`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.editmodetype.html#CellBatch), in order to commit the changes you must perform the `commitEdits` method from the grid. The grid will italicize the cells until they are committed providing control over when to push changes back to the datasource. - -In addition, error handling can be performed by hooking the `onCellValueChanging` event and inspecting new values before they are committed. The grid exposes a `setEditError` method that can output an error message. This keeps the cell in edit mode until a valid value is entered. Otherwise the grid's `rejectEdit` method can be performed to revert the invalid value. If no invalid value is found, you can also commit your changes by calling the grid's `acceptEdit` method. - -Commits can be approved or declined at the grid level by hooking `onDataCommitting` via the `acceptCommit` or `rejectCommit` methods passing the `commitID` event argument as the parameter. This event also exposes a `changes` collection which stores all the modifications prior to being committed. For example, you can check if a commit was from an add, update, or delete operation via the [`TransactionType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_core.transactiontype.html) property exposed on the `changes` collection and perform an `acceptCommit` or `rejectCommit` when necessary. - -## Excel Style Editing - -[`editOnKeyPress`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#editOnKeyPress) enables you to instantly begin editing when typing similar to how Excel behaves. In addition you may set the [`editModeClickAction`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#editModeClickAction) property to `SingleClick` to allow users to quickly edit cells while navigating to other cells. By default double-clicking is required to enter edit mode. - -## Code Snippet - -The following demonstrates how to configure editing on the data grid and committing the data. - -```tsx - - - -``` - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; - -onCommitClick = () => { - this._grid.commitEdits(); -} -``` - -## Undo/Redo batch changes - -The following demonstrates how to revert changes while batch updating is enabled. - -```tsx - - - - -``` - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; - -onUndoClick = () => { - this._grid.undo(); - - // request a new render so the undo/redo buttons update. - this.setState({ }); -} - -onRedoClick = () => { - this._grid.redo(); - - // request a new render so the undo/redo buttons update. - this.setState({ }); -} -``` - -## Error Validation and Commit Integrity - -The following demonstrates how incorporate error by checking if cells are empty when leaving edit mode and accepts commits that are from updated cells only. - -```tsx - - -``` - -```ts -import { IgrGridDataCommittingEventArgs } from 'igniteui-react-data-grids'; -import { TransactionType } from 'igniteui-react-core' - -onCellValueChanging = (s: IgrDataGrid, e: IgrGridCellValueChangingEventArgs) => { - //check if value is empty upon exiting edit mode. - if (e.newValue === "") { - s.setEditError(e.editID, "Error, cell is empty"); - //or revert changes - s.rejectEdit(e.editID); - } - else { - s.acceptEdit(e.editID); - } -} - -onDataCommitting = (s: IgrDataGrid, e: IgrGridDataCommittingEventArgs) => { - - if (e.changes[0].transactionType === TransactionType.Update) { - //commit was passed - s.acceptCommit(e.commitID); - } - else{ - //commit was prevented - s.rejectCommit(e.commitID); - } -} -``` - -## API References - -- [`CellBatch`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.editmodetype.html#CellBatch) -- [`editModeClickAction`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#editModeClickAction) -- [`editMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#editMode) -- `SingleClick` -- [`TransactionType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_core.transactiontype.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-cell-merging.md deleted file mode 100644 index fe3e2b010..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-cell-merging.md +++ /dev/null @@ -1,1178 +0,0 @@ ---- -title: React Data Grid | Cell Merging | Merging | Infragistics -_description: Use the cell merging feature of the Infragistics' React data grid to join cells with duplicate values. -_keywords: React Table, Data Grid, cell merging, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "MergedCellMode", "MergedCellEvaluationCriteria"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Cell Merging -_premium: true ---- - -# React Grid Cell Merging - -The Ignite UI for React Data Table / Data Grid supports cell merging. You may opt-in and detect when adjacent sibling records for a specific column contains the same value. While the cells are not active, selected, or in edit mode, the value displays across the cells. - -## React Grid Cell Merging Example - -```typescript -/* tslint:disable */ -export const Regions: any[] = [ - { - "Name": "North America", - "Countries": [ "Canada", "United States", "Mexico" ] - }, - { - "Name": "Middle East", - "Countries": [ "Turkey", "Iraq", "Saudi Arabia", "Syria", "UAE", "Israel", "Jordan", "Lebanon", "Oman", "Kuwait", "Qatar", "Bahrain", "Iran" ] - }, - { - "Name": "Europe", - "Countries": [ "Russia", "Germany", "France", "United Kingdom", "Italy", "Spain", "Poland", "Romania", "Netherlands", "Belgium", "Greece", - "Portugal", "Czechia", "Hungary", "Sweden", "Austria", "Switzerland", "Bulgaria", "Denmark", "Finland", "Slovakia", "Norway", - "Ireland", "Croatia", "Slovenia", "Estonia", "Iceland",] - }, - { - "Name": "Africa", - "Countries": [ "Nigeria", "Ethiopia", "Egypt", "South Africa", "Algeria", "Morocco", "Cameroon", "Niger", "Senegal", "Tunisia", "Libya"] - }, - { - "Name": "Asia Pacific", - "Countries": [ "Afghanistan", "Australia", "Azerbaijan", "China", "Hong Kong", "India", "Indonesia", - "Japan", "Malaysia", "New Zealand", "Pakistan", "Philippines", "Korea", "Singapore", "Taiwan", "Thailand"] - }, - { - "Name": "South America", - "Countries": [ "Argentina", "Bolivia", "Brazil", "Chile", "Colombia", "Ecuador", "Guyana", "Paraguay", "Peru", "Suriname", "Uruguay", "Venezuela" ] - } -] - -export const DealType: any[] = [ - "Buy", "Sell" -] - -export const Contracts: any[] = [ - "Forwards", "Futures", "Options", "Swap", "CFD" -] - -export const Settlements: any[] = [ - "Credit", "Cash", "Loan" -] - -export const SectorTypes: any[] = [ - "Public", "Private", "Government" -] - -export const CurrencyTypes: any[] = [ - "USD", "EUR", "PLN", "GBP", "YEN" -] - -export const CountryRisks: any[] = [ - "Low", "High", -] - -export const SecurityTypes: any[] = [ - "Poor", "Good", "High", -] - -export const IssuerNames: any[] = [ - "American Airlines", "Delta Airlines", "Southwest", "FedEx", -] - -export const RatingTypes: any[] = [ - "AAA", "BBB", "CCC", -] - -export const DefaultData: any[] = [ -{ - "IndGroup": "Airlines", - "IndSector": "Consumer, Cyclical", - "IndCategory": "Airlines", - // "Sector": "Public", - // "Sector": "Pfd", - // tslint:disable-next-line:object-literal-sort-keys - // "Contract": "Complete", - // "Issuer": "AMERICAN AIRLINES GROUP", - // "Rating": "WR", - "Fitch": "N.A.", - "Collateral": "Assets", - // "Currency": "USD", - // "Security": "001765866 Pfd", - "Transactions": "1765866", - // "Ticker": "AAL", - "CPN": "7.875", - "Maturity": "7/13/2022", - "Spread": 28.302, - "KRD_3YR": 0.00006, - // "RISK_COUNTRY": "", - "KRD_5YR": 0, - "KRD_1YR": -0.00187, -}]; - -export const DataItems: any[] = [ -{ - "Category": "Metal", - "Type": "Gold", - "Spread": 0.01, - "Open Price": 1281.10, - "Price": 1280.7317, - "Buy": 1280.7267, - "Sell": 1280.7367, - "Change": -0.3683, - "Change(%)": -0.0287, - "Volume": 48387, - "High(D)": 1289.50, - "Low(D)": 1279.10, - "High(Y)": 1306, - "Low(Y)": 1047.20, - "Start(Y)": 1176.60, - "Change On Year(%)": 8.8502 -}, -{ - "Category": "Metal", - "Type": "Silver", - "Spread": 0.01, - "Open Price": 17.43, - "Price": 17.42, - "Buy": 17.43, - "Sell": 17.43, - "Change": -0.01, - "Change(%)": -0.0574, - "Volume": 11720, - "High(D)": 17.51, - "Low(D)": 17.37, - "High(Y)": 18.06, - "Low(Y)": 13.73, - "Start(Y)": 15.895, - "Change On Year(%)": 9.5942 -}, -{ - "Category": "Metal", - "Type": "Copper", - "Spread": 0.02, - "Open Price": 2.123, - "Price": 2.113, - "Buy": 2.123, - "Sell": 2.123, - "Change": -0.01, - "Change(%)": -0.471, - "Volume": 28819, - "High(D)": 2.16, - "Low(D)": 2.11, - "High(Y)": 2.94, - "Low(Y)": 1.96, - "Start(Y)": 2.45, - "Change On Year(%)": -13.7551 -}, -{ - "Category": "Metal", - "Type": "Platinum", - "Spread": 0.01, - "Open Price": 1071.60, - "Price": 1071.0993, - "Buy": 1071.0943, - "Sell": 1071.1043, - "Change": -0.5007, - "Change(%)": -0.0467, - "Volume": 3039, - "High(D)": 1081.20, - "Low(D)": 1070.50, - "High(Y)": 1120.60, - "Low(Y)": 812.40, - "Start(Y)": 966.50, - "Change On Year(%)": 10.8225 -}, -{ - "Category": "Metal", - "Type": "Palladium", - "Spread": 0.01, - "Open Price": 600.55, - "Price": 601.0005, - "Buy": 600.9955, - "Sell": 601.0055, - "Change": 0.4505, - "Change(%)": 0.075, - "Volume": 651, - "High(D)": 607.20, - "Low(D)": 598.40, - "High(Y)": 690, - "Low(Y)": 458.6, - "Start(Y)": 574.3, - "Change On Year(%)": 4.6492 -}, -{ - "Category": "Oil", - "Type": "Oil", - "Spread": 0.015, - "Open Price": 45.54, - "Price": 45.7899, - "Buy": 45.7824, - "Sell": 45.7974, - "Change": 0.2499, - "Change(%)": 0.5487, - "Volume": 107196, - "High(D)": 45.94, - "Low(D)": 45.00, - "High(Y)": 65.28, - "Low(Y)": 30.79, - "Start(Y)": 48.035, - "Change On Year(%)": -4.6739 -}, -{ - "Category": "Oil", - "Type": "Brent", - "Spread": 0.01, - "Open Price": 46.06, - "Price": 46.05, - "Buy": 46.06, - "Sell": 46.06, - "Change": -0.01, - "Change(%)": -0.0217, - "Volume": 59818, - "High(D)": 46.48, - "Low(D)": 45.60, - "High(Y)": 71.14, - "Low(Y)": 30.02, - "Start(Y)": 50.58, - "Change On Year(%)": -8.9561 -}, -{ - "Category": "Oil", - "Type": "Natural Gas", - "Spread": 0.02, - "Open Price": 2.094, - "Price": 2.104, - "Buy": 2.094, - "Sell": 2.094, - "Change": 0.01, - "Change(%)": 0.4776, - "Volume": 2783, - "High(D)": 2.11, - "Low(D)": 2.09, - "High(Y)": 3.20, - "Low(Y)": 1.84, - "Start(Y)": 2.52, - "Change On Year(%)": -16.5079 -}, -{ - "Category": "Oil", - "Type": "Gas", - "Spread": 0.015, - "Open Price": 1.5086, - "Price": 1.9532, - "Buy": 1.9457, - "Sell": 1.9607, - "Change": 0.4446, - "Change(%)": 29.4686, - "Volume": 2646, - "High(D)": 1.9532, - "Low(D)": 1.50, - "High(Y)": 2.05, - "Low(Y)": 1.15, - "Start(Y)": 1.60, - "Change On Year(%)": 22.0727 -}, -{ - "Category": "Oil", - "Type": "Diesel", - "Spread": 0.015, - "Open Price": 1.3474, - "Price": 1.3574, - "Buy": 1.3474, - "Sell": 1.3474, - "Change": 0.01, - "Change(%)": 0.7422, - "Volume": 2971, - "High(D)": 1.36, - "Low(D)": 1.34, - "High(Y)": 2.11, - "Low(Y)": 0.92, - "Start(Y)": 1.515, - "Change On Year(%)": -10.4026 -}, -{ - "Category": "Oil", - "Type": "Ethanol", - "Spread": 0.01, - "Open Price": 1.512, - "Price": 2.7538, - "Buy": 2.7488, - "Sell": 2.7588, - "Change": 1.2418, - "Change(%)": 82.1323, - "Volume": 14, - "High(D)": 2.7538, - "Low(D)": 1.1168, - "High(Y)": 2.7538, - "Low(Y)": 1.1168, - "Start(Y)": 1.475, - "Change On Year(%)": 86.7011 -}, -{ - "Category": "Oil", - "Type": "Crude", - "Spread": 0.02, - "Open Price": 27.55, - "Price": 27.58, - "Buy": 27.55, - "Sell": 27.55, - "Change": 0.03, - "Change(%)": 0.1089, - "Volume": 12, - "High(D)": 27.55, - "Low(D)": 27.55, - "High(Y)": 29.32, - "Low(Y)": 21.28, - "Start(Y)": 25.30, - "Change On Year(%)": 9.0119 -}, -{ - "Category": "Oil", - "Type": "Coal", - "Spread": 0.015, - "Open Price": 0.4363, - "Price": 0.4163, - "Buy": 0.4363, - "Sell": 0.4363, - "Change": -0.02, - "Change(%)": -4.584, - "Volume": 3, - "High(D)": 0.4363, - "Low(D)": 0.4363, - "High(Y)": 0.4841, - "Low(Y)": 0.3954, - "Start(Y)": 0.4398, - "Change On Year(%)": -5.3326 -}, -{ - "Category": "Agriculture", - "Type": "Wheat", - "Spread": 0.01, - "Open Price": 465.50, - "Price": 465.52, - "Buy": 465.50, - "Sell": 465.50, - "Change": 0.02, - "Change(%)": 0.0043, - "Volume": 4318, - "High(D)": 467.00, - "Low(D)": 463.25, - "High(Y)": 628.50, - "Low(Y)": 449.50, - "Start(Y)": 539.00, - "Change On Year(%)": -13.6327 -}, -{ - "Category": "Agriculture", - "Type": "Corn", - "Spread": 0.01, - "Open Price": 379.50, - "Price": 379.8026, - "Buy": 379.7976, - "Sell": 379.8076, - "Change": 0.3026, - "Change(%)": 0.0797, - "Volume": 11266, - "High(D)": 381.00, - "Low(D)": 377.75, - "High(Y)": 471.25, - "Low(Y)": 351.25, - "Start(Y)": 411.25, - "Change On Year(%)": -7.6468 -}, -{ - "Category": "Agriculture", - "Type": "Sugar", - "Spread": 0.01, - "Open Price": 15.68, - "Price": 14.6742, - "Buy": 14.6692, - "Sell": 14.6792, - "Change": -1.0058, - "Change(%)": -6.4146, - "Volume": 4949, - "High(D)": 15.70, - "Low(D)": 14.6742, - "High(Y)": 16.87, - "Low(Y)": 11.37, - "Start(Y)": 14.12, - "Change On Year(%)": 3.9249 -}, -{ - "Category": "Agriculture", - "Type": "Soybean", - "Spread": 0.01, - "Open Price": 1038.00, - "Price": 1038.6171, - "Buy": 1038.6121, - "Sell": 1038.6221, - "Change": 0.6171, - "Change(%)": 0.0595, - "Volume": 20356, - "High(D)": 1044.00, - "Low(D)": 1031.75, - "High(Y)": 1057.00, - "Low(Y)": 859.50, - "Start(Y)": 958.25, - "Change On Year(%)": 8.3869 -}, -{ - "Category": "Agriculture", - "Type": "Soy oil", - "Spread": 0.01, - "Open Price": 33.26, - "Price": 33.7712, - "Buy": 33.7662, - "Sell": 33.7762, - "Change": 0.5112, - "Change(%)": 1.5371, - "Volume": 10592, - "High(D)": 33.7712, - "Low(D)": 33.06, - "High(Y)": 35.43, - "Low(Y)": 26.61, - "Start(Y)": 31.02, - "Change On Year(%)": 8.8692 -}, -{ - "Category": "Agriculture", - "Type": "Soy Meat", - "Spread": 0.01, - "Open Price": 342.60, - "Price": 342.62, - "Buy": 342.60, - "Sell": 342.60, - "Change": 0.02, - "Change(%)": 0.0058, - "Volume": 5646, - "High(D)": 345.40, - "Low(D)": 340.30, - "High(Y)": 353.40, - "Low(Y)": 261.70, - "Start(Y)": 307.55, - "Change On Year(%)": 11.403 -}, -{ - "Category": "Agriculture", - "Type": "OJ Future", - "Spread": 0.01, - "Open Price": 140.60, - "Price": 140.1893, - "Buy": 140.1843, - "Sell": 140.1943, - "Change": -0.4107, - "Change(%)": -0.2921, - "Volume": 7, - "High(D)": 140.1893, - "Low(D)": 0.00, - "High(Y)": 155.95, - "Low(Y)": 113.00, - "Start(Y)": 134.475, - "Change On Year(%)": 4.2493 -}, -{ - "Category": "Agriculture", - "Type": "Coffee", - "Spread": 0.01, - "Open Price": 125.70, - "Price": 125.69, - "Buy": 125.70, - "Sell": 125.70, - "Change": -0.01, - "Change(%)": -0.008, - "Volume": 1654, - "High(D)": 125.80, - "Low(D)": 125.00, - "High(Y)": 155.75, - "Low(Y)": 115.35, - "Start(Y)": 135.55, - "Change On Year(%)": -7.2741 -}, -{ - "Category": "Agriculture", - "Type": "Cocoa", - "Spread": 0.01, - "Open Price": 3076.00, - "Price": 3076.03, - "Buy": 3076.00, - "Sell": 3076.00, - "Change": 0.03, - "Change(%)": 0.001, - "Volume": 978, - "High(D)": 3078.00, - "Low(D)": 3066.00, - "High(Y)": 3406.00, - "Low(Y)": 2746.00, - "Start(Y)": 3076.00, - "Change On Year(%)": 0.001 -}, -{ - "Category": "Agriculture", - "Type": "Rice", - "Spread": 0.01, - "Open Price": 11.245, - "Price": 10.4154, - "Buy": 10.4104, - "Sell": 10.4204, - "Change": -0.8296, - "Change(%)": -7.3779, - "Volume": 220, - "High(D)": 11.38, - "Low(D)": 10.4154, - "High(Y)": 14.14, - "Low(Y)": 9.70, - "Start(Y)": 11.92, - "Change On Year(%)": -12.6228 -}, -{ - "Category": "Agriculture", - "Type": "Oats", - "Spread": 0.01, - "Open Price": 194.50, - "Price": 194.2178, - "Buy": 194.2128, - "Sell": 194.2228, - "Change": -0.2822, - "Change(%)": -0.1451, - "Volume": 64, - "High(D)": 195.75, - "Low(D)": 194.00, - "High(Y)": 241.25, - "Low(Y)": 183.75, - "Start(Y)": 212.50, - "Change On Year(%)": -8.6034 -}, -{ - "Category": "Agriculture", - "Type": "Milk", - "Spread": 0.01, - "Open Price": 12.87, - "Price": 12.86, - "Buy": 12.87, - "Sell": 12.87, - "Change": -0.01, - "Change(%)": -0.0777, - "Volume": 7, - "High(D)": 12.89, - "Low(D)": 12.81, - "High(Y)": 16.96, - "Low(Y)": 12.81, - "Start(Y)": 14.885, - "Change On Year(%)": -13.6043 -}, -{ - "Category": "Agriculture", - "Type": "Cotton", - "Spread": 0.01, - "Open Price": 61.77, - "Price": 61.76, - "Buy": 61.77, - "Sell": 61.77, - "Change": -0.01, - "Change(%)": -0.0162, - "Volume": 3612, - "High(D)": 62.06, - "Low(D)": 61.32, - "High(Y)": 67.59, - "Low(Y)": 54.33, - "Start(Y)": 60.96, - "Change On Year(%)": 1.3123 -}, -{ - "Category": "Agriculture", - "Type": "Lumber", - "Spread": 0.01, - "Open Price": 303.90, - "Price": 304.5994, - "Buy": 304.5944, - "Sell": 304.6044, - "Change": 0.6994, - "Change(%)": 0.2302, - "Volume": 2, - "High(D)": 304.5994, - "Low(D)": 303.90, - "High(Y)": 317.10, - "Low(Y)": 236.00, - "Start(Y)": 276.55, - "Change On Year(%)": 10.1426 -}, -{ - "Category": "Livestock", - "Type": "LV Cattle", - "Spread": 0.01, - "Open Price": 120.725, - "Price": 120.705, - "Buy": 120.725, - "Sell": 120.725, - "Change": -0.02, - "Change(%)": -0.0166, - "Volume": 4, - "High(D)": 120.725, - "Low(D)": 120.725, - "High(Y)": 147.98, - "Low(Y)": 113.90, - "Start(Y)": 130.94, - "Change On Year(%)": -7.8166 -}, -{ - "Category": "Livestock", - "Type": "FD Cattle", - "Spread": 0.01, - "Open Price": 147.175, - "Price": 148.6065, - "Buy": 148.6015, - "Sell": 148.6115, - "Change": 1.4315, - "Change(%)": 0.9727, - "Volume": 5, - "High(D)": 148.6065, - "Low(D)": 147.175, - "High(Y)": 190.00, - "Low(Y)": 138.10, - "Start(Y)": 164.05, - "Change On Year(%)": -9.4139 -}, -{ - "Category": "Livestock", - "Type": "Lean Hogs", - "Spread": 0.01, - "Open Price": 81.275, - "Price": 81.8146, - "Buy": 81.8096, - "Sell": 81.8196, - "Change": 0.5396, - "Change(%)": 0.664, - "Volume": 1, - "High(D)": 81.8146, - "Low(D)": 81.275, - "High(Y)": 83.98, - "Low(Y)": 70.25, - "Start(Y)": 77.115, - "Change On Year(%)": 6.0943 -}, -{ - "Category": "Currencies", - "Type": "USD IDX Future", - "Spread": 0.02, - "Open Price": 93.88, - "Price": 93.7719, - "Buy": 93.7619, - "Sell": 93.7819, - "Change": -0.1081, - "Change(%)": -0.1151, - "Volume": 5788, - "High(D)": 94.05, - "Low(D)": 93.7534, - "High(Y)": 100.70, - "Low(Y)": 91.88, - "Start(Y)": 96.29, - "Change On Year(%)": -2.6151 -}, -{ - "Category": "Currencies", - "Type": "USD/JPY Future", - "Spread": 0.02, - "Open Price": 9275.50, - "Price": 9277.3342, - "Buy": 9277.3242, - "Sell": 9277.3442, - "Change": 1.8342, - "Change(%)": 0.0198, - "Volume": 47734, - "High(D)": 9277.3342, - "Low(D)": 0.93, - "High(Y)": 9483.00, - "Low(Y)": 0.93, - "Start(Y)": 4741.965, - "Change On Year(%)": 95.6432 -}, -{ - "Category": "Currencies", - "Type": "GBP/USD Future", - "Spread": 0.02, - "Open Price": 1.4464, - "Price": 1.1941, - "Buy": 1.1841, - "Sell": 1.2041, - "Change": -0.2523, - "Change(%)": -17.4441, - "Volume": 29450, - "High(D)": 1.45, - "Low(D)": 1.1941, - "High(Y)": 1.59, - "Low(Y)": 1.1941, - "Start(Y)": 1.485, - "Change On Year(%)": -19.59 -}, -{ - "Category": "Currencies", - "Type": "AUD/USD Future", - "Spread": 0.02, - "Open Price": 0.7344, - "Price": 0.7444, - "Buy": 0.7344, - "Sell": 0.7344, - "Change": 0.01, - "Change(%)": 1.3617, - "Volume": 36764, - "High(D)": 0.74, - "Low(D)": 0.73, - "High(Y)": 0.79, - "Low(Y)": 0.68, - "Start(Y)": 0.735, - "Change On Year(%)": 1.2789 -}, -{ - "Category": "Currencies", - "Type": "USD/CAD Future", - "Spread": 0.02, - "Open Price": 0.7744, - "Price": 0.9545, - "Buy": 0.9445, - "Sell": 0.9645, - "Change": 0.1801, - "Change(%)": 23.2622, - "Volume": 13669, - "High(D)": 0.9545, - "Low(D)": 0.77, - "High(Y)": 0.9545, - "Low(Y)": 0.68, - "Start(Y)": 0.755, - "Change On Year(%)": 26.4295 -}, -{ - "Category": "Currencies", - "Type": "USD/CHF Future", - "Spread": 0.02, - "Open Price": 1.0337, - "Price": 1.0437, - "Buy": 1.0337, - "Sell": 1.0337, - "Change": 0.01, - "Change(%)": 0.9674, - "Volume": 5550, - "High(D)": 1.03, - "Low(D)": 1.03, - "High(Y)": 1.11, - "Low(Y)": 0.98, - "Start(Y)": 1.045, - "Change On Year(%)": -0.1244 -}, -{ - "Category": "Index", - "Type": "DOW Future", - "Spread": 0.01, - "Open Price": 17711.00, - "Price": 17712.1515, - "Buy": 17712.1465, - "Sell": 17712.1565, - "Change": 1.1515, - "Change(%)": 0.0065, - "Volume": 22236, - "High(D)": 17727.00, - "Low(D)": 17642.00, - "High(Y)": 18083.00, - "Low(Y)": 15299.00, - "Start(Y)": 16691.00, - "Change On Year(%)": 6.118 -}, -{ - "Category": "Index", - "Type": "S&P Future", - "Spread": 0.01, - "Open Price": 2057.50, - "Price": 2056.6018, - "Buy": 2056.5968, - "Sell": 2056.6068, - "Change": -0.8982, - "Change(%)": -0.0437, - "Volume": 142780, - "High(D)": 2059.50, - "Low(D)": 2049.00, - "High(Y)": 2105.50, - "Low(Y)": 1794.50, - "Start(Y)": 1950.00, - "Change On Year(%)": 5.4668 -}, -{ - "Category": "Index", - "Type": "NAS Future", - "Spread": 0.01, - "Open Price": 4341.25, - "Price": 4341.28, - "Buy": 4341.25, - "Sell": 4341.25, - "Change": 0.03, - "Change(%)": 0.0007, - "Volume": 18259, - "High(D)": 4347.00, - "Low(D)": 4318.00, - "High(Y)": 4719.75, - "Low(Y)": 3867.75, - "Start(Y)": 4293.75, - "Change On Year(%)": 1.107 -}, -{ - "Category": "Index", - "Type": "S&P MID MINI", - "Spread": 0.01, - "Open Price": 1454.30, - "Price": 1455.7812, - "Buy": 1455.7762, - "Sell": 1455.7862, - "Change": 1.4812, - "Change(%)": 0.1018, - "Volume": 338, - "High(D)": 1455.7812, - "Low(D)": 1448.00, - "High(Y)": 1527.30, - "Low(Y)": 1236.00, - "Start(Y)": 1381.65, - "Change On Year(%)": 5.3654 -}, -{ - "Category": "Index", - "Type": "S&P 600 MINI", - "Spread": 0.01, - "Open Price": 687.90, - "Price": 687.88, - "Buy": 687.90, - "Sell": 687.90, - "Change": -0.02, - "Change(%)": -0.0029, - "Volume": 0, - "High(D)": 0.00, - "Low(D)": 0.00, - "High(Y)": 620.32, - "Low(Y)": 595.90, - "Start(Y)": 608.11, - "Change On Year(%)": 13.1177 -}, -{ - "Category": "Interest Rate", - "Type": "US 30YR Future", - "Spread": 0.01, - "Open Price": 164.875, - "Price": 164.1582, - "Buy": 164.1532, - "Sell": 164.1632, - "Change": -0.7168, - "Change(%)": -0.4347, - "Volume": 28012, - "High(D)": 165.25, - "Low(D)": 164.0385, - "High(Y)": 169.38, - "Low(Y)": 151.47, - "Start(Y)": 160.425, - "Change On Year(%)": 2.3271 -}, -{ - "Category": "Interest Rate", - "Type": "US 2Y Future", - "Spread": 0.01, - "Open Price": 109.3984, - "Price": 109.3884, - "Buy": 109.3984, - "Sell": 109.3984, - "Change": -0.01, - "Change(%)": -0.0091, - "Volume": 17742, - "High(D)": 109.41, - "Low(D)": 109.38, - "High(Y)": 109.80, - "Low(Y)": 108.62, - "Start(Y)": 109.21, - "Change On Year(%)": 0.1634 -}, -{ - "Category": "Interest Rate", - "Type": "US 10YR Future", - "Spread": 0.01, - "Open Price": 130.5625, - "Price": 130.5825, - "Buy": 130.5625, - "Sell": 130.5625, - "Change": 0.02, - "Change(%)": 0.0153, - "Volume": 189310, - "High(D)": 130.63, - "Low(D)": 130.44, - "High(Y)": 132.64, - "Low(Y)": 125.48, - "Start(Y)": 129.06, - "Change On Year(%)": 1.1797 -}, -{ - "Category": "Interest Rate", - "Type": "Euro$ 3M", - "Spread": 0.01, - "Open Price": 99.18, - "Price": 99.17, - "Buy": 99.18, - "Sell": 99.18, - "Change": -0.01, - "Change(%)": -0.0101, - "Volume": 29509, - "High(D)": 99.18, - "Low(D)": 99.17, - "High(Y)": 99.38, - "Low(Y)": 98.41, - "Start(Y)": 98.895, - "Change On Year(%)": 0.2781 -} -]; - -interface UpdateResponse { - data: any[]; - recordsUpdated: number; -} - -/* tslint:enable */ -export class LiveFinancialData { - - public static generateData(count: number): any[] { - const data: any[] = []; - for (let i = 0; i < count; i++) { - const rand = Math.floor(Math.random() * Math.floor(DataItems.length)); - - const item = Object.assign({}, DataItems[rand]); - item.Settlement = this.getRandomItem(Settlements); - item.Contract = this.getRandomItem(Contracts); - const region = this.getRandomItem(Regions); - item.Region = region.Name; - item.Country = this.getRandomItem(region.Countries); - item.Risk = this.getRandomItem(CountryRisks); - item.Sector = this.getRandomItem(SectorTypes); - item.Currency = this.getRandomItem(CurrencyTypes); - item.Security = this.getRandomItem(SecurityTypes); - item.Issuer = this.getRandomItem(IssuerNames); - item.Maturity = this.getRandomDate(); - item.Rating = this.getRandomItem(RatingTypes); - - for (const mockData of DefaultData) { - for (const prop in mockData) { - if (mockData.hasOwnProperty(prop)) { - item[prop] = mockData[prop]; - } - } - } - item.ID = i; - this.randomizeDataValues(item); - data.push(item); - } - return data; - } - - public static updateAllPrices(data: any[]): any[] { - const currData = []; - for (const dataRow of data) { - const item = Object.assign({}, dataRow); - this.randomizeDataValues(item); - currData.push(item); - } - return currData; - } - - public static updateRandomPrices(data: any[]): any { - const currData = data.slice(0, data.length + 1); - let y = 0; - for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) { - const item = Object.assign({}, data[i]); - this.randomizeDataValues(item); - currData[i] = item; - y++; - } - return currData; - } - - public static updateRandomPrices2(data: any[]): UpdateResponse { - const currData = data.slice(0, data.length + 1); - let y = 0; - for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) { - const item = Object.assign({}, data[i]); - this.randomizeDataValues(item); - currData[i] = item; - y++; - } - return {data: currData, recordsUpdated: y }; - } - - public static randomizeDataValues(item: any): void { - const changeP = "Change(%)"; - const res = this.getRandomPrice(item.Price); - item.Change = res.Price - item.Price; - item.Price = res.Price; - item[changeP] = res.ChangePercent; - } - - public static getRandomPrice(oldPrice: any): any { - const rnd = parseFloat(Math.random().toFixed(2)); - const volatility = 2; - let newPrice = 0; - - let changePercent = 2 * volatility * rnd; - if (changePercent > volatility) { - changePercent -= (2 * volatility); - } - const changeAmount = oldPrice * (changePercent / 100); - newPrice = oldPrice + changeAmount; - const result = { Price: 0, ChangePercent: 0 }; - result.Price = Math.round(newPrice * 100) / 100; - result.ChangePercent = Math.round(changePercent * 100) / 100; - return result; - } - - public static getRandomDate(): Date { - const now: Date = new Date(); - const month = this.getRandomNumber(0, 8); - const day = this.getRandomNumber(10, 27); - return new Date(now.getFullYear(), month, day); - } - - public static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - public static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - public static getRandomCountry(region: any): string { - if (region.Countries === undefined) { - return this.getRandomItem(Regions[2].Countries); - } else { - return this.getRandomItem(region.Countries); - } - } -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { LiveFinancialData } from './LiveFinancialData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { HeaderClickAction } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridCellMerging extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { cellMergeMode: "Always" } - this.data = LiveFinancialData.generateData(200); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - } - - public render(): JSX.Element { - return ( -
-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- ); - } - - public onMergeCellModeChange = (e: any) => { - this.setState({ cellMergeMode: e.target.value }); - this.grid.mergedCellMode = e.target.value; - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Overview - -Cell Merging in the React data grid can be configured by using the [`mergedCellMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#mergedCellMode) option of the entire React grid or individual columns. This property can be set to one of the following options, listed below: - -- [`Never`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.mergedcellmode.html#Never): The grid or column will never merge cells. This is the default behavior. -- [`Always`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.mergedcellmode.html#Always): The grid or column will always attempt to merge cells. -- [`OnlyWhenSorted`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.mergedcellmode.html#OnlyWhenSorted): The grid or column will only attempt to merge cells when a column is sorted. - -Note, regardless of the value of this property, cells can only be merged across sibling records. - -Cell merging can be evaluated based on whether the data is formatted or not using the [`mergedCellEvaluationCriteria`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#mergedCellEvaluationCriteria) property. This is applicable to the entire grid or individual columns and can be set to one of the following options, listed below: - -- [`RawValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.mergedcellevaluationcriteria.html#RawValue): Merge cells from adjacent rows when the raw values from the cells are the same. This is the default value. -- [`FormattedText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.mergedcellevaluationcriteria.html#FormattedText): Merge cells from adjacent rows when the formatted value from the cells is the same. - -
- -## API References - -- [`FormattedText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.mergedcellevaluationcriteria.html#FormattedText) -- [`mergedCellEvaluationCriteria`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#mergedCellEvaluationCriteria) -- [`mergedCellMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#mergedCellMode) -- [`OnlyWhenSorted`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.mergedcellmode.html#OnlyWhenSorted) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-cell-selection.md deleted file mode 100644 index 6958f5c77..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-cell-selection.md +++ /dev/null @@ -1,1262 +0,0 @@ ---- -title: React Data Grid | Cell Selection | Selection | Infragistics -_description: Use cell and row selection of the Infragistics' React data grid to highlight areas of the table. Learn how to configure single or multiple row selection for the Ignite UI for React table. -_keywords: React Table, Data Grid, cell selection, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "DataGridSelectionMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/cell-selection -_tocName: Cell Selection -_premium: true ---- - -# React Grid Selection - -The Ignite UI for React Data Table / Data Grid supports single or multiple row and cell selection. - -## React Grid Selection Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridCellSelection extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { selectionMode: "MultipleRow" } - this.data = DataGridSharedData.getEmployees(); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - } - - public render(): JSX.Element { - return ( -
-
- - - {/* */} -
- - - - - - - - - - - - -
- ); - } - - public onSelectionModeChange = (e: any) => { - this.setState({ selectionMode: e.target.value }); - this.grid.selectionMode = e.target.value; - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Overview - -Selection in the React data grid is enabled on a row and cell level and can be configured by using the [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#selectionMode) option of the React grid. This property takes five different options, listed below: - -- [`None`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#None): Selection is not enabled. -- [`SingleCell`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#SingleCell): Selection of a single cell is enabled. -- [`SingleRow`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#SingleRow): Selection of a single row is enabled. -- [`MultipleCell`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#MultipleCell): Selection of multiple cells is enabled. -- [`MultipleRow`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#MultipleRow): Selection of multiple rows is enabled. -- [`RangeCell`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#RangeCell): Selection of a range of multiple cells by clicking and dragging is enabled. - -[`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#selectionBehavior) defaults to `ModifierBased`, where only one row or cell is selected at a time and modifier keys (CTRL) are required to multi-select items. [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#selectionBehavior) set to `Toggle` will allow multiple rows or cells to be selected on single click only. - -[`MultipleRow`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#MultipleRow) includes the following functionality: - -- Click and drag to select rows -- SHIFT and click to select multiple rows. -- SHIFT and press the ↑ + ↓ arrow keys to select multiple rows. - -Pressing the space bar toggles selection of active row via [`MultipleRow`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#MultipleRow) or [`SingleRow`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#SingleRow). - -## Row Range Selection - -The following example demonstrates how to selected or deselected all rows in the grid. Note, [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#selectionMode) must be set to MultipleRow. - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* {RepositoryWarning} */ -/* {RepositoryUrl}/tree/master/templates/sample/src/index.css */ - -/* Note these styles are shared between all samples */ -@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); -@import url('https://fonts.googleapis.com/css?family=Titillium+Web'); - -#root, html, body, main { - background: transparent; - height: 100%; - width: 100%; - padding: 0px; - margin: 0px; -} - -.igGridColumnChooserContainer { - display: flex; - flex-direction: column; - margin-left: 5px; - margin-top: 2px; - margin-right: 20px; - margin-bottom: 10px; - padding-left: 10px; - padding-right: 5px; - padding-top: 10px; - border: 1px gray; - border-radius: 10px; - box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25); -} - -.igContainer, -.igContainer-horizontal, -.igContainer-vertical, -.igContainer-full-size { - background: white; - display: flex; - flex-flow: column; - flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse; */ - /* justify-content: flex-start; */ - /* justify-items: center; */ - /* align-items: center; */ - position: relative; - overflow-y: hidden; - - min-width: 200px; - width: calc(100% - 5px); - height: calc(100% - 5px); - padding: 2.5px; - margin: 0px; -} - -.igContainer-full-size { - width: 100%; - height: 100%; - padding: 0px; - margin: 0px; -} - -.igContainer-vertical { - flex-flow: column; -} - -.igContainer-horizontal { - flex-flow: row; -} - -/* Used by gauges */ -.igContainer-center { - background: white; - height: calc(100% - 1rem); - width: calc(100% - 1rem); - padding: 0.5rem; - margin: 0px; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; -} - -/* used to overlay multiple components, e.g. RadialGaugeTypeDirection */ -.igContainer-relative { - background: white; - width: calc(100% - 10px); - height: calc(100% - 10px); - padding: 5px; - margin: 0px; - overflow: hidden; - align-items: center; - justify-content: center; - position: relative -} - -.igContainer-relative-overlay { - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; -} - -.igTitle { - text-align: center; - display: block; -} - -.igComponent { - height: 100%; - width: 100%; - margin: 0px; - padding: 0px; -} - -.igOptions, -.igOptions-horizontal, -.igOptions-vertical { - /* background: rgb(112, 112, 111); */ - margin: 0px; - padding-top: 0px; - padding-bottom: 5px; - padding-right: 0rem; - padding-left: 0rem; - width: 100%; - font-size: 1rem; - font-weight: 300; - font-family: 'Titillium Web'; - display: inline-block; - color: #585858; -} - -.igOptions-horizontal { - display: flex; - flex-direction: row; - align-items: center; -} - -.igOptions-vertical { - display: flex; - flex-direction: column; -} - - -.igOptions > label, -.igOptions > div { - font-family: 'Titillium Web'; -} - -.igOptions-item { - margin-left: 0.5rem; - margin-right: 0.5rem; - /* font-family: Arial, Verdana, Helvetica, "Times New Roman", Times, serif; */ - display: inline-block; - vertical-align: center; -} - -.igOptions-label { - margin-top: 0px; - margin-left: 0.5rem; - margin-right: 1rem; - margin-bottom: 5px; - /* font-size: 11pt; */ - /* font-family: Arial, Verdana, Helvetica, "Times New Roman", Times, serif; */ - /* vertical-align: top; */ - vertical-align: center; - padding: 0px; - display: inline-block; - white-space: nowrap; - /* background: orange; */ -} - -.igOptions-value { - margin-top: 0px; - margin-left: 10px; - margin-bottom: 5px; - margin-right: 5px; - /* font-size: 11pt; */ - display: inline-block; - /* vertical-align: top; */ - width: 40px; - padding: 0px; - /* background-color: lime; */ -} - -.igOptions > slider, -.igOptions-slider { - margin-top: 0px; - margin-bottom: 10px; - margin-left: 5px; - margin-right: 20px; - vertical-align: bottom; - padding-top: 0px; - min-width: 60px; - display: inline-block; -} - -.igOptions-button { - vertical-align: center; - margin-top: 0px; - margin-bottom: 0px; -} - -.igOptions > text, -.igOptions-input-text { - margin-left: 10px; - width: 150px; - display: inline-block; - vertical-align: center; -} - -.igOptions > select, -.igOptions-input-select { - font-size: 11pt; - /* font-family: Arial, Verdana, Helvetica, "Times New Roman", Times, serif; */ - margin-top: 0px; - margin-bottom: 5px; - margin-left: 5px; - vertical-align: center; - padding: 4px; - display: inline-block; - /* background: green; */ -} - -.igLegend { - --legend-item-overflow: hidden; - width: calc(100% - 1rem); - font-size: 0.75rem; - /* font-family: Arial, Verdana, Helvetica, "Times New Roman", Times, serif; */ - margin-top: 0.25rem; - /* margin-bottom: 0.25rem; */ - margin-left: 1rem; - padding: 0px; - display: inline-block; - vertical-align: top; -} - -.igLegend-title { - /* margin-top: 0.7rem; */ - margin-left: 1rem; - margin-right: 0.25rem; - /* margin-bottom: 0.25rem; */ - padding-top: 0px; - padding-bottom: 0px; - padding: 0px; - vertical-align: center; - display: inline-block; - white-space: nowrap; - font-size: 15px; -} - -.igFlex { - display: flex; - flex-direction: column; /* row | row-reverse | column | column-reverse*/ - flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse; */ - /* justify-content: flex-start; */ - /* justify-items: center; */ - /* align-items: center; */ - height: calc(100% - 0px); - width: calc(100% - 0px); - margin: 0px; - padding: 0px; - position: relative; - overflow-y: hidden; -} - -/* ==================================================================================== */ -/* igOverlay styles used to overlay elements in front of sample container */ -/* ==================================================================================== */ - -.igOverlay-top-left, -.igOverlay-top-right, -.igOverlay-top-center, -.igOverlay-center, -.igOverlay-bottom-left, -.igOverlay-bottom-center, -.igOverlay-bottom-right { - display: flex; - flex-direction: column; - font-size: 0.8rem; - font-family: 'Titillium Web'; - border-radius: 5px; - border: 1px solid gray; - padding: 0.5rem; - color: black; - /* background: rgba(228, 227, 227, 0.548); */ - background: rgba(148, 148, 148, 0.5); - /* background: white; */ - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Safari */ - -khtml-user-select: none; /* Konqueror HTML */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - -o-user-select: none; - user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ -} - -.igOverlay-top-left { - position: absolute; - top: 0.5rem; - left: 0.5rem; -} - -.igOverlay-top-right { - position: absolute; - top: 0.25rem; - right: 0.25rem; -} - -.igOverlay-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.igOverlay-center-label { - display: block; - font-size: 3rem; -} - -.igOverlay-top-center { - position: absolute; - top: 0.25rem; - left: 50%; - transform: translate(-50%, 0%); -} - -.igOverlay-bottom-center { - position: absolute; - bottom: 0.25rem; - left: 50%; - transform: translate(-50%, 0%); -} - -.igOverlay-bottom-left { - position: absolute; - bottom: 0.25rem; - left: 0.25rem; -} - -.igOverlay-bottom-right { - position: absolute; - bottom: 0.25rem; - right: 0.25rem; -} - - -.igOverlay-row { - /* background: red; */ - font-family: 'Titillium Web'; - /* margin-left: 0px; - display: block; - white-space: pre; */ - - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.igOverlay-label { - display: block; - font-family: 'Titillium Web'; - font-weight: 600; -} - -.igOverlay-field { - /* display: inline-block; */ - /* font-family: Lato, Helvetica, sans-serif; */ - text-align: left; - width: 5rem; -} - -.igOverlay-value { - /* background: yellowgreen; */ - text-align: end; - /* display: inline-block; */ - /* font-family: Lato, Helvetica, sans-serif; */ - /* width: 75px; */ - /* white-space: pre; */ -} - -.igOverlay-title { - color: black; - display: block; - font-family: 'Titillium Web'; - font-weight: 600; - padding-bottom: 0.5rem; -} - -/* ==================================================================================== */ -/* tooltip styles used in custom tooltips of charts and maps components */ -/* ==================================================================================== */ - -.tooltipBox { - font-size: 0.75rem; - font-weight: normal; - color: "Black"; - font-family: 'Titillium Web'; -} - -.tooltipTitle { - display: block; - color: "Black"; - font-weight: bold; - font-size: 0.75rem; - font-family: 'Titillium Web'; - margin-left: 0px; -} - -.tooltipTable { - display: table; - margin: 0px; - width: 100%; - height: 100%; - border-spacing: 5px; - font-size: 0.75rem; -} - -.tooltipHorizontal { - display: flex; - flex-direction: row; -} - -.tooltipVertical { - display: flex; - flex-direction: column; -} - -.tooltipRow { - display: table-row; -} - -.tooltipVal { - display: table-cell; - text-align: "right"; - font-weight: bold; - font-family: 'Titillium Web'; - padding-left: 5px; -} - -.tooltipLbl { - display: table-cell; - text-align: "left"; - font-family: 'Titillium Web'; -} - -.tooltipFlagImage { - display: inline-block; - object-fit: fill; - height: 50px; - width: 70px; - margin-right: 5px; -} - -.tooltipFlagBoarder { - display: inline-block; - padding: 0px; - border-width: 0.5; - border-color: rgb(177, 177, 177); - border-style: solid; - height: 50px; - width: 70px; -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; // styles shared between all samples - -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridRowSelection extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.data = DataGridSharedData.getEmployees(); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - } - - public render(): JSX.Element { - return ( -
-
- - -
- - - - - - - - - - - - -
- ); - } - - public onSelectAllClick = (e: any) => { - this.grid.selectAllRows(); - } - - public onDeselectAllClick = (e: any) => { - this.grid.deselectAllRows(); - } -} - -root.render(); -``` - - -
- -## API References - -- `ModifierBased` -- [`MultipleCell`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#MultipleCell) -- [`MultipleRow`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#MultipleRow) -- [`RangeCell`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#RangeCell) -- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#selectionBehavior) -- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#selectionMode) -- [`SingleCell`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#SingleCell) -- [`SingleRow`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.datagridselectionmode.html#SingleRow) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-animation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-animation.md deleted file mode 100644 index dbcdcddee..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-animation.md +++ /dev/null @@ -1,555 +0,0 @@ ---- -title: React Data Grid | Column Animations | Infragistics -_description: Learn how to display column animations through events when moving or hiding columns with Infragistics' Ignite UI for React data table & grid. Check out Ignite UI for React table tutorials! -_keywords: React Table, Data Grid, column animations, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Animations -_premium: true ---- - -# React Grid Column Animations - -The Ignite UI for React Data Table / Data Grid supports Column Animation during events like Column Hiding or Column Moving. When Column Animation on the React data grid is set, the corresponding animation will fire for all of the cells in that column. - -## React Grid Column Animations Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnAnimation extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { - columnAddOrShowAnimation: "SlideFromLeft", - columnExchangingAnimationMode: "Crossfade", - columnHidingAnimationMode: "FadeOut", - columnMovingAnimationMode: "SlideOver", - columnPropertyUpdatingAnimationMode: "Interpolate" - } - - this.data = DataGridSharedData.getEmployees(); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - } - - public render(): JSX.Element { - return ( -
-
- - - - -
-
- - - - -
-
- - - - - -
- - - - - - - - - - -
- ); - } - - public onHideClick = (e: any) => { - for (const col of this.grid.combinedColumns) { - if (!col.isHidden) { - col.isHidden = true; - break; - } - } - } - - public onReloadClick = (e: any) => { - // this.grid.dataSource = null; - - // this.grid.dataSource = this.data; - - const newData = DataGridSharedData.getEmployees(); - for (let i = 0; i < this.data.length; i++) { - const oldItem = this.data[i]; - this.data[i].Salary = newData[i].Salary; - this.grid.notifySetItem(i, oldItem, newData[i]); - } - } - - public onShowClick = (e: any) => { - - const columns = this.grid.combinedColumns.reverse(); - - for (const col of columns) { - if (col.isHidden) { - col.isHidden = false; - break; - } - } - - this.grid.combinedColumns.reverse(); - } - - public onAddShowChange = (e: any) => { - this.setState({ columnAddOrShowAnimation: e.target.value }); - this.grid.columnAddingAnimationMode = e.target.value; - this.grid.columnShowingAnimationMode = e.target.value; - } - - public onExchangeChange = (e: any) => { - this.setState({ columnExchangingAnimationMode: e.target.value }); - this.grid.columnExchangingAnimationMode = e.target.value; - } - - public onHideChange = (e: any) => { - this.setState({ columnHidingAnimationMode: e.target.value }); - this.grid.columnHidingAnimationMode = e.target.value; - } - - public onMoveChange = (e: any) => { - this.setState({ columnMovingAnimationMode: e.target.value }); - this.grid.columnMovingAnimationMode = e.target.value; - } - - public onPropUpdateChange = (e: any) => { - this.setState({ columnPropertyUpdatingAnimationMode: e.target.value }); - this.grid.columnPropertyUpdatingAnimationMode = e.target.value; - } - - public getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Animation Properties - -Each column animation property is listed and described below: - -- [`columnAddingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnAddingAnimationMode): When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in. -- [`columnExchangingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnExchangingAnimationMode): When a column is exchanged, you have the option to have the exchanged column header and its cells slide to the left, right, top, or bottom. There are also options to have it fade as well as slide and fade. -- [`columnHidingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnHidingAnimationMode): When a column is hidden, you have the option to have the column header and its cells slide out to the left, right, top, or bottom. There are also options to have it fade out as well as slide and fade out. -- [`columnMovingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnMovingAnimationMode): When a column is moved, you have the option to have the column header and its cells slide over. -- [`columnPropertyUpdatingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnPropertyUpdatingAnimationMode): When a column's property changes, you have the option to have that property change animate by interpolating or deeply interpolating its change. -- [`columnShowingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnShowingAnimationMode): When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in. - -## Code Snippet - -The following demonstrates the implementation of each of the column animations described in this topic: - -```tsx - -``` - -## API References - -- [`columnAddingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnAddingAnimationMode) -- [`columnExchangingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnExchangingAnimationMode) -- [`columnHidingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnHidingAnimationMode) -- [`columnMovingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnMovingAnimationMode) -- [`columnPropertyUpdatingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnPropertyUpdatingAnimationMode) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-chooser.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-chooser.md deleted file mode 100644 index f890f628d..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-chooser.md +++ /dev/null @@ -1,1014 +0,0 @@ ---- -title: React Data Grid | Column Chooser | Infragistics -_description: Learn how Infragistics' Ignite UI for React grid component supports the ability to show and hide columns directly through the UI or by using the React control. View Ignite UI for React table demos for more information! -_keywords: React Table, Data Grid, column chooser, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "DataGridColumn", "DataGridToolbar", "Button", "ColumnChooser", "ColumnHidingAnimationMode", "ColumnShowingAnimationMode", "ColumnChooserTitle"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Chooser -_premium: true ---- - -# React Grid Column Chooser Overview - -The Ignite UI for React Data Grid supports the ability show and hide columns with the UI through the [`IgrDataGridToolbar`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html) component or by the [`columnChooser`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#columnChooser) component that provides flexibility to place it anywhere on the page. The [`isHidden`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridcolumn.html#isHidden) property on the columns can also be used to quickly hide or show a single column programmatically for manual column generation, and the value of [`isHidden`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridcolumn.html#isHidden) will reflect in the [`columnChooser`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#columnChooser) component. Each approach can be used interchangeably to change the visible state of the columns. - -## React Grid Column Chooser Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from "./DataGridSharedData"; -import { IgrImageColumn } from "igniteui-react-data-grids"; -import { IgrTextColumn } from "igniteui-react-data-grids"; -import { IgrNumericColumn } from "igniteui-react-data-grids"; -import { IgrDateTimeColumn } from "igniteui-react-data-grids"; -import { IgrDataGridModule } from "igniteui-react-data-grids"; -import { IgrDataGrid } from "igniteui-react-data-grids"; -import { IgrDataGridToolbarModule } from "igniteui-react-data-grids"; -import { IgrDataGridToolbar } from "igniteui-react-data-grids"; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrDataGridToolbarModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnChooserToolbar extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - public toolbar: IgrDataGridToolbar; - - constructor(props: any) { - super(props); - - this.state = { componentVisible: true }; - this.data = DataGridSharedData.getSales(); - } - - public onGridRef = (grid: IgrDataGrid) => { - this.grid = grid; - if (this.toolbar) { - this.toolbar.targetGrid = this.grid; - } - } - - public onToolbarRef = (toolbar: IgrDataGridToolbar) => { - this.toolbar = toolbar; - if (this.toolbar) { - this.toolbar.targetGrid = this.grid; - } - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - - - - - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Toolbar's Column Chooser UI - -The Column Chooser UI is accessible within the [`IgrDataGridToolbar`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html) component separate from the grid. For this purpose all we have to do is set the toolbar's [`columnChooser`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#columnChooser) property to true. The toolbar will then display a [`IgrButton`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbutton.html), when clicked, will display the column chooser UI. This button also displays the total of hidden columns. If the toolbar is not created, enabling the [`columnChooser`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#columnChooser) property will have no effect and hide the button. - -The [`IgrDataGridToolbar`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html) provides additional properties such as adding a title to the toolbar by using the [`toolbarTitle`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#toolbarTitle) property, placing text in the [`IgrButton`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbutton.html) by setting the [`columnChooserText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#columnChooserText) property, and adding a title header to the column chooser UI by setting [`columnChooserTitle`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#columnChooserTitle). - -The Column Chooser can be configured with animations by setting the grid's [`columnHidingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnHidingAnimationMode) and [`columnShowingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnShowingAnimationMode) properties. - -## Code Snippet - -The following demonstrates how to implement the Column Chooser Toolbar UI for the React Data Grid: - -```tsx - - - - -``` - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbar } from 'igniteui-react-data-grids'; - -public grid : IgrDataGrid; -public toolbar: IgrDataGridToolbar; - -this.onGridRef = this.onGridRef.bind(this); -this.onToolbarRef = this.onToolbarRef.bind(this); - - -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - if (this.toolbar != null) { - this.toolbar.targetGrid = this.grid; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; - - let productNameColumn = document.getElementById("productname") as IgrTextColumnComponent; - productNameColumn.isHidden = true; - } -} - -public onToolbarRef(toolbar: IgrDataGridToolbar) { - this.toolbar = toolbar; - if (this.grid != null) { - this.toolbar.targetGrid = this.grid; - this.toolbar.columnChooser = "true"; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnChooserText = "Column Chooser"; - this.toolbar.columnChooserTitle = "Column Chooser"; - } -} -``` - -## Simple Column Chooser - -Let's say we want to manually display the [`columnChooser`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#columnChooser) UI without the toolbar and put it anywhere we want on our page. This can be easily done by simply creating an instance of the component in our markup. - -## Demo - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from "./DataGridSharedData"; -import { IgrImageColumn } from "igniteui-react-data-grids"; -import { IgrTextColumn } from "igniteui-react-data-grids"; -import { IgrNumericColumn } from "igniteui-react-data-grids"; -import { IgrDateTimeColumn } from "igniteui-react-data-grids"; -import { IgrDataGridModule } from "igniteui-react-data-grids"; -import { IgrDataGrid } from "igniteui-react-data-grids"; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; -import { IgrColumnChooserModule } from 'igniteui-react-data-grids'; -import { IgrColumnChooser } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrColumnChooserModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnChooserPicker extends React.Component { - public data: any[]; - public grid: IgrDataGrid; - public columnChooser: IgrColumnChooser; - - constructor(props: any) { - super(props); - - this.state = { componentVisible: true }; - this.data = DataGridSharedData.getSales(); - } - - public onGridRef = (grid: IgrDataGrid) => { - this.grid = grid; - if (this.columnChooser) { - this.columnChooser.targetGrid = this.grid; - } - } - - public onColumnChoosingRef = (columnChooser: IgrColumnChooser) => { - this.columnChooser = columnChooser; - if (this.columnChooser) { - this.columnChooser.targetGrid = this.grid; - } - } - - public render(): JSX.Element { - return ( -
-
- - -
-
- - - - - - - - - - - - -
-
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Code Snippet - -The following demonstrates how to implement the Column Chooser UI for the Data Grid: - -```tsx - - - - - -``` - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrColumnChooser } from 'igniteui-react-data-grids'; -import { ColumnMovingAnimationMode } from 'igniteui-react-data-grids'; - -public grid : IgrDataGrid; -public columnChooser: IgrColumnChooser; - -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - if (this.columnChooser) { - this.columnChooser.targetGrid = this.grid; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; - } -} - -public onColumnChooserRef(columnChooser: IgrColumnChooser) { - this.columnChooser = columnChooser; - if (this.grid) { - this.columnChooser.targetGrid = this.grid; - this.columnChooser.showAllText = "Show All"; - this.columnChooser.hideAllText = "Hide All"; - } -} -``` - -## API References - -- [`IgrButton`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbutton.html) -- [`columnChooserText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#columnChooserText) -- [`columnChooserTitle`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#columnChooserTitle) -- [`columnChooser`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#columnChooser) -- [`columnHidingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnHidingAnimationMode) -- [`columnShowingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnShowingAnimationMode) -- [`IgrDataGridToolbar`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-filtering.md deleted file mode 100644 index 241896619..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-filtering.md +++ /dev/null @@ -1,1225 +0,0 @@ ---- -title: React Data Grid | Filtering | Infragistics -_description: Use Infragistics' Ignite UI for React grid component to perform expressive sort conditions and return data easily. View Ignite UI for React table's demo for more information! -_keywords: React Table, Data Grid, column, filtering, filter expressions, filter operands, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "FilterExpressions", "FilterLogicalOperator", "FilterOperand"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/filtering -_tocName: Column Filtering -_premium: true ---- - -# React Grid Filtering Overview - -The Ignite UI for React Data Table / Data Grid includes column filtering with both a filter row and API that gives you the ability to perform expressive sort conditions based on the data type of the column being filtered. - -## React Grid Filtering Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnFiltering extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.data = DataGridSharedData.getEmployees(4000); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - } - - public render(): JSX.Element { - return ( -
- - - - - - - - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -As seen above, setting the [`filterUIType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#filterUIType) property to FilterRow will enables the record filtering record to the user interface where the user can specify filter criteria to filter records. Records that do not match the specified filter criteria will be hidden. - -Filtering is also exposed in the column options UI by hovering a field and clicking the vertical ellipsis. This is achieved when setting the [`filterUIType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#filterUIType) to ColumnOptions. Please refer to the sample below. - -## Filter Expressions - -In the example below, the data grid's FilterExpressions collection is updated to incorporate custom [`filterExpressions`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#filterExpressions). - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { FilterExpression } from 'igniteui-react-core'; -import { FilterFactory } from 'igniteui-react-core'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnFilterExpressions extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - public filterColumn: string = "Street"; - public filterMode: string = "Contains"; - public filterText: string = "Market"; - public filterFactory: FilterFactory; - - constructor(props: any) { - super(props); - - this.state = { filterText: this.filterText, filterMode: this.filterMode, filterColumn: this.filterColumn } - this.data = DataGridSharedData.getEmployees(4000); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - this.applyFilter(); - } - - public onFilterTextChanged = (e: any) => { - this.filterText = e.target.value; - this.setState({filterText: e.target.value}); - this.applyFilter(); - } - - public onFilterModeChanged = (e: any) => { - this.filterMode = e.target.value; - this.setState({filterMode: e.target.value}); - this.applyFilter(); - } - - public onFilterColumnChanged = (e: any) => { - this.filterColumn = e.target.value; - this.setState({filterColumn: e.target.value}); - this.applyFilter(); - } - - public applyFilter() - { - this.grid.filterExpressions.clear(); - if (this.filterText === "") { - return; - } - - this.filterFactory = new FilterFactory(); - const expression = this.filterText.toUpperCase(); - const column = this.filterFactory.property(this.filterColumn).toUpper(); - - let filter: FilterExpression; - if (this.filterMode === "Contains") - { - filter = column.contains(expression) - } - else if (this.filterMode === "StartsWith") - { - filter = column.startsWith(expression); - } - else - { - filter = column.endsWith(expression); - } - - this.grid.filterExpressions.add(filter); - } - - public render(): JSX.Element { - return ( -
-
- - - - - -
- - - - - - - - - - - -
- ); - } - -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Filter Operators - -Columns can be given a custom [`IgrFilterOperand`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrfilteroperand.html) that will appear in the filter-row operand dropdown. The key requirements is to ensure the operand is given a [`displayName`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrfilteroperand.html#displayName) and to utilize the `FilterRequested` event on the operand so you can apply a [`filterFactory`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrfilteroperand.html#filterFactory), which is responsible for assigning the operator and value you wish to the filter the column by, e.g. StartsWith with value of "A". - -In addition, the grid's [`filterLogicalOperator`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#filterLogicalOperator) property is responsible for indicating how filters across fields are combined: - -- [`And`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.filterlogicaloperator.html#And) logical operator. In order for a successful match, all conditions have to pass. -- [`Or`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.filterlogicaloperator.html#Or) logical operator. In order for a successful match, at least one of the conditions have to pass. - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrFilterOperand } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; -import { EditorType } from 'igniteui-react-data-grids'; -import { IgrGridCustomFilterRequestedEventArgs } from'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnFilterOperands extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.data = DataGridSharedData.getEmployees(4000); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - - const filterOperand = new IgrFilterOperand(); - filterOperand.editorType = EditorType.Text; - filterOperand.displayName = "Show Only France"; - filterOperand.filterRequested = this.onFilter; - let column = this.grid.actualColumns.item(0); - column.filterOperands.add(filterOperand); - - const filterOperand2 = new IgrFilterOperand(); - filterOperand2.editorType = EditorType.Numeric; - filterOperand2.displayName = "Less Than Age 30"; - filterOperand2.filterRequested = this.onFilter2; - let column2 = this.grid.actualColumns.item(1); - column2.filterOperands.add(filterOperand2); - - const filterOperand3 = new IgrFilterOperand(); - filterOperand3.editorType = EditorType.Numeric; - filterOperand3.displayName = "Greater Than $500k"; - filterOperand3.filterRequested = this.onFilter3; - let column3 = this.grid.actualColumns.item(2); - column3.filterOperands.add(filterOperand3); - } - - public onFilter = (s: IgrFilterOperand, args: IgrGridCustomFilterRequestedEventArgs) => - { - let prop = args.filterFactory.property(args.column.field); - //Filter-in only records with France - args.expression = prop.isEqualTo("France"); - } - - public onFilter2 = (s: IgrFilterOperand, args: IgrGridCustomFilterRequestedEventArgs) => - { - let prop = args.filterFactory.property(args.column.field); - //Filter-in only records with LessThan or Equal to 30 - args.expression = prop.isLessThanOrEqualTo(30); - } - - public onFilter3 = (s: IgrFilterOperand, args: IgrGridCustomFilterRequestedEventArgs) => - { - let prop = args.filterFactory.property(args.column.field); - //Filter-in only records with GreaterThan $500,000.00 - args.expression = prop.isGreaterThan(500000); - } - - public render(): JSX.Element { - return ( -
- - - - - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## API References - -- [`displayName`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrfilteroperand.html#displayName) -- [`filterExpressions`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#filterExpressions) -- [`filterFactory`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrfilteroperand.html#filterFactory) -- [`filterLogicalOperator`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#filterLogicalOperator) -- [`IgrFilterOperand`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrfilteroperand.html) -- `FilterRequested` -- [`filterUIType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#filterUIType) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-moving.md deleted file mode 100644 index 8f7057c62..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-moving.md +++ /dev/null @@ -1,445 +0,0 @@ ---- -title: React Data Grid | Column Moving | Infragistics -_description: See how Infragistics' Ignite UI for React Data Grid supports the ability to move columns and gives you the flexibility over how you wish to display your columns. View Ignite UI for React table demos for more information! -_keywords: React Table, Data Grid, column moving, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "ColumnMovingMode", "ColumnMovingAnimationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-moving -_tocName: Column Moving -_premium: true ---- - -# React Grid Column Moving Overview - -The Ignite UI for React Data Grid supports the ability to move columns, giving you the flexibility over how you wish to display your columns with respect to the order of the columns shown. - -## React Grid Column Moving Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnMoving extends React.Component { - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { - columnSeparatorWidth: 1, - columnMovingMode: "Deferred", - columnMovingAnimation: "SlideOver" - }; - this.data = DataGridSharedData.getEmployees(); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - this.grid.columnMovingSeparatorBackground = "Black"; - } - - public render(): JSX.Element { - return ( -
-
- - - - -
-
- - -
- - - - - - - - - - -
- ); - } - - public onColumnMovingModeChange = (e: any) => { - this.grid.columnMovingMode = e.target.value; - } - - public onColumnMovingAnimationModeChange = (e: any) => { - this.grid.columnMovingAnimationMode = e.target.value; - } - - public onSeparatorWidthChanged = (e: any) => { - this.grid.columnMovingSeparatorWidth = e.target.value; - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -Column moving in the Ignite UI for React Data Grid is on by default, and can be controlled by setting the [`columnMovingMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnMovingMode) property of the grid. This property has two options, [`Deferred`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnmovingmode.html#Deferred) or [`None`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnmovingmode.html#None). [`Deferred`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnmovingmode.html#Deferred) will allow column moving, while [`None`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnmovingmode.html#None) will disable column moving for the entire grid. - -When column moving is set to [`Deferred`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnmovingmode.html#Deferred), a separator will show up while moving a column. While moving a column, once the mouse pointer is released, the moved column will take the place of the column placed to the right of the separator. This separator can also be customized in width and color by using the [`columnMovingSeparatorWidth`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnMovingSeparatorWidth) and [`columnMovingSeparatorBackground`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnMovingSeparatorBackground) properties, respectively. - -You can also animate the column movements, if you wish. This can be done by setting the [`columnMovingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnMovingAnimationMode) property of the grid. Animations are not on by default. - -## Code Snippet - -The following demonstrates how to implement column moving in the Ignite UI for React Data Grid with deferred column moving, animations enabled, and a 5px wide separator: - - - -```ts -import { ColumnMovingAnimationMode } from 'igniteui-react-data-grids'; -import { ColumnMovingMode } from 'igniteui-react-data-grids'; -``` - -```tsx - -``` - -## API References - -- [`columnMovingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnMovingAnimationMode) -- [`columnMovingMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnMovingMode) -- [`columnMovingSeparatorBackground`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnMovingSeparatorBackground) -- [`columnMovingSeparatorWidth`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnMovingSeparatorWidth) -- [`Deferred`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnmovingmode.html#Deferred) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-options.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-options.md deleted file mode 100644 index 07e92fe13..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-options.md +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: React Data Grid | Column Options | Infragistics -_description: See how Infragistics' Ignite UI for React Data Grid supports the ability to pin, move, filter, and sort columns individually through a drop down UI from each column header. Check out Ignite UI for React table's column option! -_keywords: React Table, Data Grid, column options, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "HeaderClickAction", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Options -_premium: true ---- - -# React Grid Column Options Overview - -The Ignite UI for React Data Grid supports the ability to group, hide, sort, move, pin, filter, and sort columns directly from a UI exposed on each column header. - -To enable the column options ui you can set the grid's [`isColumnOptionsEnabled`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#isColumnOptionsEnabled) property to true. - -## React Grid Column Options Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from "./DataGridSharedData"; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnOptions extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { componentVisible: true } - this.data = DataGridSharedData.getSales(); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - const state = new IgrColumnGroupDescription(); - state.field = "Status"; - state.displayName = "Status"; - this.grid = grid; - this.grid.groupDescriptions.add(state); - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - - - - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Column Options Configurations - -Filtering can be toggled per column by setting the column's [`isFilteringEnabled`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridcolumn.html#isFilteringEnabled) property. Setting true or false will show or hide the filtering section in the column's options ui. - -Sorting can be toggled for the entire grid if the [`headerClickAction`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#headerClickAction) property is applied. Setting this to [`None`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.headerclickaction.html#None) for example will completely remove sorting from grid and reflect in the options ui for each column. And setting [`SortByOneColumnOnly`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.headerclickaction.html#SortByOneColumnOnly) for example will continue to allow one column to be sorted at a time. - -## Code Snippet - -The following code demonstrates how to programmatically enable the column options ui adjust filtering and sorting in the column options ui by adjusting the grid and column. - -```tsx - - - -``` - - - -```ts -import { HeaderClickAction } from 'igniteui-react-data-grids'; - -//enable column options -this.grid.isColumnOptionsEnabled="true"; - -//adjust filtering for column -let idColumn = this.grid.actualColumns.item(0); -idColumn.isFilteringEnabled="false"; - -//adjust sorting -this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly; -``` - -## API References - -- [`headerClickAction`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#headerClickAction) -- [`isColumnOptionsEnabled`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#isColumnOptionsEnabled) -- [`isFilteringEnabled`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridcolumn.html#isFilteringEnabled) -- [`SortByOneColumnOnly`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.headerclickaction.html#SortByOneColumnOnly) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-pinning.md deleted file mode 100644 index bf3a7e0ec..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-pinning.md +++ /dev/null @@ -1,998 +0,0 @@ ---- -title: React Data Grid | Column Pinning | Infragistics -_description: See how Infragistics' Ignite UI for React grid component supports the ability to pin columns and gives you the flexibility over how you wish to position your columns. View Ignite UI for React table demos for more information! -_keywords: React Table, Data Grid, column pinning, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "PinnedPositions", "PinColumn", "ColumnPinning", "DataGridToolbar", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-pinning -_tocName: Column Pinning -_premium: true ---- - -# React Grid Column Pinning Overview - -The Ignite UI for React Data Grid supports the ability to pin columns, allowing the end users to lock a column in a particular column order. - -A column or multiple columns can be pinned to the left-hand or right-hand side of the Data Grid. In addition, you can change the pin state of the columns by utilizing the [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#pinColumn) function. - -## React Grid Column Pinning Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { DataGridSharedData } from './DataGridSharedData'; -import { PinnedPositions } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnPinningPicker extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { - componentVisible: true, - isPinningToLeftDisabled: true, - isPinningToRightDisabled: true - } - this.data = DataGridSharedData.getEmployees(); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - } - - public render(): JSX.Element { - return ( -
-
- - - -
- - - - - - - - - - - - - - - - -
- ); - } - - public onPinLeft = (e: any) => { - this.setState({ isPinningToLeftDisabled: true, isPinningToRightDisabled: true }); - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - this.grid.pinColumn(idColumn, PinnedPositions.Left); - this.grid.pinColumn(firstNameColumn, PinnedPositions.Left); - this.grid.pinColumn(lastNameColumn, PinnedPositions.Left); - } - - public onPinRight = (e: any) => { - this.setState({ isPinningToLeftDisabled: true, isPinningToRightDisabled: true}); - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - this.grid.pinColumn(streetColumn, PinnedPositions.Right); - this.grid.pinColumn(cityColumn, PinnedPositions.Right); - this.grid.pinColumn(countryColumn, PinnedPositions.Right); - } - - public onUnPin = (e: any) => { - this.setState({ isPinningToLeftDisabled: false, isPinningToRightDisabled: false }); - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - this.grid.pinColumn(idColumn, PinnedPositions.None); - this.grid.pinColumn(firstNameColumn, PinnedPositions.None); - this.grid.pinColumn(lastNameColumn, PinnedPositions.None); - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - this.grid.pinColumn(streetColumn, PinnedPositions.None); - this.grid.pinColumn(cityColumn, PinnedPositions.None); - this.grid.pinColumn(countryColumn, PinnedPositions.None); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -The Column Pinning API in the Data Grid can be enabled by setting either a column's [`pinned`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridcolumn.html#pinned) property, or when setting it by utilizing the [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#pinColumn) function of the grid. - -The [`pinned`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridcolumn.html#pinned) property has three options: - -- Left - enabling [`Left`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.pinnedpositions.html#Left) will position pinned columns to the left-hand side of the grid. -- Right - enabling [`Right`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.pinnedpositions.html#Right) will position pinned columns to the right side of the grid. -- None - enabling [`None`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.pinnedpositions.html#None) will unpin a column and reposition its default placement within the grid. - -Unpinned columns that are adjacent to pinned columns will still maintain horizontal scrolling. - -The [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#pinColumn) function contains two required parameters. The first parameter is the column to be pinned, and the second is with the [`PinnedPositions`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.pinnedpositions.html) enumeration setting. - -## Code Snippet - -The following code demonstrates how to implement column pinning in the React Data Grid with column pinning by using the [`pinned`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridcolumn.html#pinned) property and [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#pinColumn) function: - - - -```tsx - - - {/*Columns pinned left*/} - - - - - {/*Columns unpinned*/} - - - - - {/*Columns pinned right*/} - - - - -``` - - - -```ts -import { PinnedPositions } from 'igniteui-react-data-grids'; - -public onButtonPinLeft = (e: any) => { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - // pinColumn Function - this.grid.pinColumn(idColumn, PinnedPositions.Left); - this.grid.pinColumn(firstNameColumn, PinnedPositions.Left); - this.grid.pinColumn(lastNameColumn, PinnedPositions.Left); -} - -public onButtonPinRight = (e: any) => { - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.Right; - cityColumn.pinned = PinnedPositions.Right; - countryColumn.pinned = PinnedPositions.Right; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.Right); - this.grid.pinColumn(cityColumn, PinnedPositions.Right); - this.grid.pinColumn(countryColumn, PinnedPositions.Right); -} - -public onButtonUnPin = (e: any) => { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - //pinColumn function - this.grid.pinColumn(idColumn, PinnedPositions.None); - this.grid.pinColumn(firstNameColumn, PinnedPositions.None); - this.grid.pinColumn(lastNameColumn, PinnedPositions.None); - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.None; - cityColumn.pinned = PinnedPositions.None; - countryColumn.pinned = PinnedPositions.None; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.None); - this.grid.pinColumn(cityColumn, PinnedPositions.None); - this.grid.pinColumn(countryColumn, PinnedPositions.None); -} -``` - -## Toolbar's Column Pinning UI - -The Column Pinning UI is accessible within the [`IgrDataGridToolbar`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html) component separate from the grid. For this purpose all we have to do is set the toolbar's `columnPinning` property to true. The toolbar will then display a [`IgrButton`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbutton.html), when clicked, will display the column pinning UI. This button also displays the total of pinned-left columns. If the toolbar is not created, enabling the `columnPinning` property will have no effect and hide the button. - -The [`IgrDataGridToolbar`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html) provides additional properties such as adding a title to the toolbar by using the [`toolbarTitle`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html#toolbarTitle) property, placing text in the [`IgrButton`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbutton.html) by setting the `columnPinningText` property, and adding a title header to the column hiding UI by setting `columnPinningTitle`. - -## Demo - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrImageColumn } from "igniteui-react-data-grids"; -import { IgrTextColumn } from "igniteui-react-data-grids"; -import { IgrNumericColumn } from "igniteui-react-data-grids"; -import { IgrDateTimeColumn } from "igniteui-react-data-grids"; -import { IgrDataGridModule } from "igniteui-react-data-grids"; -import { IgrDataGrid } from "igniteui-react-data-grids"; -import { IgrDataGridToolbarModule } from "igniteui-react-data-grids"; -import { IgrDataGridToolbar } from "igniteui-react-data-grids"; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrDataGridToolbarModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnPinningToolbar extends React.Component { - public data: any[]; - public grid: IgrDataGrid; - public toolbar: IgrDataGridToolbar; - - constructor(props: any) { - super(props); - - this.state = { componentVisible: true }; - this.data = DataGridSharedData.getEmployees(); - } - - public onGridRef = (grid: IgrDataGrid) => { - this.grid = grid; - if (this.toolbar) { - this.toolbar.targetGrid = this.grid; - } - } - - public onToolbarRef = (toolbar: IgrDataGridToolbar) => { - this.toolbar = toolbar; - if (this.toolbar) { - this.toolbar.targetGrid = this.grid; - } - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - - - - - - - - - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -## Code Snippet - - - -```tsx - - - - -``` - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbar } from 'igniteui-react-data-grids'; - -public grid : IgrDataGrid; -public toolbar: IgrDataGridToolbar; - -this.onGridRef = this.onGridRef.bind(this); -this.onToolbarRef = this.onToolbarRef.bind(this); - - -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - if (this.toolbar != null) { - this.toolbar.targetGrid = this.grid; - - let productNameColumn = this.grid.actualColumns.item(0); - productNameColumn.pinned = PinnedPositions.Left; - } -} - -public onToolbarRef(toolbar: IgrDataGridToolbar) { - this.toolbar = toolbar; - if (this.grid != null) { - this.toolbar.targetGrid = this.grid; - this.toolbar.columnPinning = "true"; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnPinningText = "Pinning"; - this.toolbar.columnPinningTitle = "Pinning Title"; - } -} -``` - -## API References - -- [`IgrButton`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbutton.html) -- [`IgrDataGridToolbar`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridtoolbar.html) -- [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#pinColumn) -- [`PinnedPositions`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.pinnedpositions.html) -- [`pinned`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridcolumn.html#pinned) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-resizing.md deleted file mode 100644 index 8e3496f85..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-resizing.md +++ /dev/null @@ -1,461 +0,0 @@ ---- -title: React Data Grid | Column Resizing | Infragistics -_description: Start using Infragistics' React grid component to resize columns, giving you flexibility over how you wish to display your columns with respect to the width of each. View Ignite UI for React table demos for more information! -_keywords: React Table, Data Grid, column resizing, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "ColumnResizingMode", "ColumnResizingAnimationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-resizing -_tocName: Column Resizing -_premium: true ---- - -# React Grid Column Resizing - -The Ignite UI for React Data Grid supports the ability to resize columns, giving you flexibility over how you wish to display your columns with respect to the width of each. - -## React Grid Column Resizing Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class GridColumnResizing extends React.Component { - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { - columnSeparatorWidth: 1, - columnResizingMode: "Deferred", - columnResizingAnimation: "Interpolate" - }; - this.data = DataGridSharedData.getEmployees(); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - this.grid.columnResizingSeparatorBackground = "Black"; - } - - public render(): JSX.Element { - return ( -
-
- - - - {/* commented out the slider for now. - - -
-
*/} - - -
- - - - - - - - - - -
- ); - } - - public onColumnResizingModeChange = (e: any) => { - this.grid.columnResizingMode = e.target.value; - } - - public onColumnResizingAnimationModeChange = (e: any) => { - this.grid.columnResizingAnimationMode = e.target.value; - } - - public onSeparatorWidthChanged = (e: any) => { - this.grid.columnResizingSeparatorWidth = e.target.value; - // this.setState({ columnSeparatorWidth: e.target.value }); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -Column resizing in the Ignite UI for React DataGrid is on by default, and can be controlled by using the [`columnResizingMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnResizingMode) property of the grid. This property has three options. Each option is explained below: - -- [`Deferred`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnresizingmode.html#Deferred): The default option. When resizing, a separator will appear showing how large or small the column will become when resized. -- [`Immediate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnresizingmode.html#Immediate): When resizing, there will be no separator. The column's width will follow the pointer as you drag the edge of the column and resize accordingly. -- [`None`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnresizingmode.html#None): Columns cannot be resized. - -When column resizing is set to [`Deferred`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnresizingmode.html#Deferred), the separator that shows up can be modified in color and width by using the [`columnResizingSeparatorBackground`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnResizingSeparatorBackground) and [`columnResizingSeparatorWidth`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnResizingSeparatorWidth) properties of the grid, respectively. - -You can also animate the columns as they resize when the resizing mode is set to [`Deferred`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnresizingmode.html#Deferred) only. This is done by setting the [`columnResizingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnResizingAnimationMode) property to [`Interpolate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnresizinganimationmode.html#Interpolate). - -Each column in the grid can be determined whether or not it can resize individually. If you want to enable or disable resizing on a particular column, you can set the IsResizingEnabled property of that column. - -When resizing a star-width column, it will change that column to a fixed column. - -## Code Snippet - -The following code snippet demonstrates how to implement column resizing in the React data grid, where the Street column in this case will not be resizable. In this case, the column resizing separator will be 5 pixels wide and the columns that are resizable would animate when resized as well: - - - -```ts -import { ColumnResizingMode } from 'igniteui-react-data-grids'; -import { ColumnResizingAnimationMode } from 'igniteui-react-data-grids'; -``` - -```tsx - - - - - - -``` - -## API References - -- [`columnResizingAnimationMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnResizingAnimationMode) -- [`columnResizingMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnResizingMode) -- [`columnResizingSeparatorBackground`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnResizingSeparatorBackground) -- [`columnResizingSeparatorWidth`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#columnResizingSeparatorWidth) -- [`Deferred`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnresizingmode.html#Deferred) -- [`Interpolate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.columnresizinganimationmode.html#Interpolate) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-sorting.md deleted file mode 100644 index b83a346a3..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-sorting.md +++ /dev/null @@ -1,442 +0,0 @@ ---- -title: React Data Grid | Column Sorting | Infragistics -_description: Use Infragistics' React grid component's sorting feature to configure a mix of sortable and non-sortable columns, with rich API and data sorting. View Ignite UI for React tutorials! -_keywords: React Table, Data Grid, column, sorting, row, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "HeaderClickAction"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/sorting -_tocName: Column Sorting -_premium: true ---- - -# React Grid Sorting Overview - -The Ignite UI for React Data Table / Data Grid supports ascending and descending column sorting with a Single Column, Multi-Column and Tri-State Column Sorting configuration. - -## React Grid Sorting Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { HeaderClickAction } from 'igniteui-react-data-grids'; -import { IgrColumnSortDescription } from 'igniteui-react-data-grids'; -import { ListSortDirection } from 'igniteui-react-core'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnSorting extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { sortType: "SortByMultipleColumnsTriState" } - this.data = DataGridSharedData.getHouses(); - } - - public render(): JSX.Element { - return ( -
-
- - -
- - - - - - - - -
- ); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - let csd = new IgrColumnSortDescription(); - csd.field = "Property"; - csd.sortDirection = ListSortDirection.Descending; - this.grid.sortDescriptions.add(csd); - } - - public onChartTypeChanged = (e: any) => { - this.setState({sortType: e.target.value}); - this.grid.headerClickAction = e.target.value; - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Code Snippet - -You can sort by a single or multiple column ascending or descending in the React data grid by using the [`headerClickAction`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#headerClickAction) property. If TriState is enabled you can remove the sort applied to a column. - -- [`SortByMultipleColumns`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.headerclickaction.html#SortByMultipleColumns) -- [`SortByMultipleColumnsTriState`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.headerclickaction.html#SortByMultipleColumnsTriState) -- [`SortByOneColumnOnly`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.headerclickaction.html#SortByOneColumnOnly) -- [`SortByOneColumnOnlyTriState`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.headerclickaction.html#SortByOneColumnOnlyTriState) - - - -```ts -import { HeaderClickAction } from 'igniteui-react-data-grids'; -``` - -```tsx - -``` - -## Sorting through API - -```ts -import { IgrColumnSortDescription } from 'igniteui-react-data-grids'; -import { ListSortDirection } from 'igniteui-react-core'; -``` - -```ts -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; -} -// ... -let colSortDesc = new IgrColumnSortDescription(); -colSortDesc.field = "UnitsInStock"; -colSortDesc.sortDirection = ListSortDirection.Descending; -this.grid.sortDescriptions.add(colSortDesc); -``` - -## API References - -- [`headerClickAction`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#headerClickAction) -- [`SortByMultipleColumnsTriState`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.headerclickaction.html#SortByMultipleColumnsTriState) -- [`SortByMultipleColumns`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.headerclickaction.html#SortByMultipleColumns) -- [`SortByOneColumnOnlyTriState`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.headerclickaction.html#SortByOneColumnOnlyTriState) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-summaries.md deleted file mode 100644 index 81f10c9ca..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-summaries.md +++ /dev/null @@ -1,647 +0,0 @@ ---- -title: React Data Grid | Column Summaries | Infragistics -_description: Use Infragistics' React grid component's column summaries feature to display summarized data such as count, max, min and many more. Check out Ignite UI for React table demos! -_keywords: React Table, Data Grid, column, summaries, Ignite UI for React, Infragistics -mentionedTypes: ["Implementation.Grid", "SummaryScope", "GroupSummaryDisplayMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/summaries -_tocName: Column Summaries -_premium: true ---- - -# React Column Summaries - -The Ignite UI for React Data Table / Data Grid supports column summaries. In some cases, your end users may be overwhelmed by the amount of data displayed in the grid, and often may be looking for a summary of the data. Your end users may also want to derive additional information from the data of a specific column. Summaries help your end users achieve this, and you can enable them by setting the [`SummaryScope`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.summaryscope.html) property. - -## React Column Summaries Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrColumnSummaryDescription } from 'igniteui-react-data-grids' -import { IgrProvideCalculatorEventArgs } from 'igniteui-react-core'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { DataSourceSummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-react-core'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnSummaries extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { componentVisible: true, isGroupCollapsible: true, summaryScope: "Root", groupSummaryDisplayMode: "RowBottom" } - this.data = DataGridSharedData.getSales(50); - } - - public render(): JSX.Element { - return ( -
-
- - - - -
- - - - - - - - - - - -
- ); - } - - public onSummaryScopeChanging = (e: any) => { - this.grid.summaryScope = e.target.value; - this.setState( {summaryScope: e.target.value} ); - } - public onGroupSummaryDisplayModeChanging = (e: any) => { - this.grid.groupSummaryDisplayMode = e.target.value; - this.setState( {groupSummaryDisplayMode: e.target.value} ); - } - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - this.grid.actualDataSource.isSectionExpandedDefault = true; - } - - public componentDidMount() { - window.addEventListener('load', this.onLoad); - } - - public onLoad = () => { - const productGroup = new IgrColumnGroupDescription(); - productGroup.field = "ProductName"; - productGroup.displayName = "ProductName"; - this.grid.groupDescriptions.add(productGroup); - - const productCount = new IgrColumnSummaryDescription(); - productCount.field = "ProductName"; - productCount.operand = DataSourceSummaryOperand.Count; - this.grid.summaryDescriptions.add(productCount); - - const priceMin = new IgrColumnSummaryDescription(); - priceMin.field = "BundlePrice"; - priceMin.operand = DataSourceSummaryOperand.Min; - priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMin); - - const priceMax = new IgrColumnSummaryDescription(); - priceMax.field = "BundlePrice"; - priceMax.operand = DataSourceSummaryOperand.Max; - priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMax); - - const orderSum = new IgrColumnSummaryDescription(); - orderSum.field = "OrderItems"; - orderSum.operand = DataSourceSummaryOperand.Sum; - this.grid.summaryDescriptions.add(orderSum); - - const orderValueSum = new IgrColumnSummaryDescription(); - orderValueSum.field = "OrderValue"; - orderValueSum.operand = DataSourceSummaryOperand.Sum; - orderValueSum.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0}); - this.grid.summaryDescriptions.add(orderValueSum); - - const orderValueAvg = new IgrColumnSummaryDescription(); - orderValueAvg.field = "OrderValue"; - orderValueAvg.operand = DataSourceSummaryOperand.Average; - orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(orderValueAvg); - - const orderDateMin = new IgrColumnSummaryDescription(); - orderDateMin.field = "OrderDate"; - orderDateMin.operand = DataSourceSummaryOperand.Min; - orderDateMin.calculatorDisplayName = "First" - orderDateMin.formatOverride = new Intl.DateTimeFormat('en-EN'); - this.grid.summaryDescriptions.add(orderDateMin); - - const orderDateMax = new IgrColumnSummaryDescription(); - orderDateMax.field = "OrderDate"; - orderDateMax.operand = DataSourceSummaryOperand.Max; - orderDateMax.calculatorDisplayName = "Last" - orderDateMax.formatOverride = new Intl.DateTimeFormat('en-EN'); - this.grid.summaryDescriptions.add(orderDateMax); - - const sum1 = new IgrColumnSummaryDescription(); - sum1.field = "Profit"; - sum1.operand = DataSourceSummaryOperand.Sum; - sum1.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(sum1); - - const avg2 = new IgrColumnSummaryDescription(); - avg2.field = "Profit"; - avg2.operand = DataSourceSummaryOperand.Average; - avg2.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(avg2); - - const countries = new IgrColumnSummaryDescription(); - countries.field = "Countries"; - countries.operand = DataSourceSummaryOperand.Custom; - countries.provideCalculator = this.onProvideCalculator; - // countries.calculator = new CustomDomestic(); - this.grid.summaryDescriptions.add(countries); - } - - public onProvideCalculator = (s: IgrColumnSummaryDescription, e: IgrProvideCalculatorEventArgs) => { - e.calculator = new CustomDomestic(); - } -} - -// Custom Calculator - calculates the count for all USA. -class CustomDomestic extends SummaryCalculator -{ - get displayName(): string { - return "USA"; - } - public usCountries: number; - - public beginCalculation(a: IDataSource, b: string): void { - super.beginCalculation(a,b); - this.usCountries = 0; - } - public endCalculation(): ISummaryResult { - return new DefaultSummaryResult(this.propertyName, DataSourceSummaryOperand.Custom, this.usCountries) - } - public aggregate(a: any): void { - if(a.Countries === "USA") - { - this.usCountries++; - } - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Summary Scope Property - -The React data grid supports 4 summary settings that you can configure using the [`SummaryScope`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.summaryscope.html) property. These are listed and described below: - -- [`Root`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.summaryscope.html#Root): This will display a grand total for all rows in the grid for the column the summary is applied to. -- [`Groups`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.summaryscope.html#Groups): This is specific to grouped rows and shows the grand total for all rows in a particular group. -- [`Both`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.summaryscope.html#Both): This will use the [`Groups`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.summaryscope.html#Groups) and [`Root`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.summaryscope.html#Root) options simultaneously. -- [`None`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.summaryscope.html#None): This will disable summaries for the grid. - -## Group Summary Display Mode Property - -The React data grid supports configuration of the locations that summaries are displayed. You can configure this by using the [`GroupSummaryDisplayMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.groupsummarydisplaymode.html) property. The different options for this property are listed and described below: - -- **List**: This will render the group summaries in a flat list in the spanning group header. -- **Cells**: This will render the group header as cells, and the summary values will be rendered inside the cells, aligned with their corresponding column. The grid will only display a single summary per column using this option. -- **RowTop**: This will render the group summaries as summary rows at the top of the group. -- **RowBottom**: This will render the group summaries as summary rows at the bottom of the group. -- **None**: This will disable group summary rendering. - -## Code Snippets - -```tsx - - - - - - - -``` - -```ts -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrColumnSummaryDescription } from 'igniteui-react-data-grids' -import { SummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-react-core'; - -public componentDidMount() { - window.addEventListener('load', this.onLoad); -} - -public onLoad() { - // Count Operand - const productCount = new IgrColumnSummaryDescription(); - productCount.field = "ProductName"; - productCount.operand = SummaryOperand.Count; - this.grid.summaryDescriptions.add(productCount); - // Min Operand with formatting - const priceMin = new IgrColumnSummaryDescription(); - priceMin.field = "BundlePrice"; - priceMin.operand = SummaryOperand.Min; - priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMin); - // Max Operand and formatting - const priceMax = new IgrColumnSummaryDescription(); - priceMax.field = "BundlePrice"; - priceMax.operand = SummaryOperand.Max; - priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMax); - // Sum Operand - const orderSum = new IgrColumnSummaryDescription(); - orderSum.field = "OrderItems"; - orderSum.operand = SummaryOperand.Sum; - this.grid.summaryDescriptions.add(orderSum); - // Average Operand and formatting - const orderValueAvg = new IgrColumnSummaryDescription(); - orderValueAvg.field = "OrderValue"; - orderValueAvg.operand = SummaryOperand.Average; - orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(orderValueAvg); -} -``` - -## Custom Summaries - -In some situations, you may want to expand the default set of summaries. For example, if you were looking to show the number of times a particular value in a column appears, a custom summary would be required for this. - -The snippets below demonstrate how to display a Count for number of "USA" values appear in the column. - -```ts -import { IgrProvideCalculatorEventArgs } from 'igniteui-react-core'; - -public onLoad() -{ - // ... - // Custom Operand with calculator - const countries = new IgrColumnSummaryDescription(); - countries.field = "Countries"; - countries.operand = SummaryOperand.Custom; - countries.provideCalculator = this.onProvideCalculator; //refer to class below - this.grid.summaryDescriptions.add(countries); - -} - -onProvideCalculator(s: IgrColumnSummaryDescription, e: IgrProvideCalculatorEventArgs) { - e.calculator = new CustomDomestic(); -} - -// Custom Calculator - calculates the count for all USA. -class CustomDomestic extends SummaryCalculator -{ - get displayName(): string { - return "USA"; - } - public usCountries: number; - - public beginCalculation(a: IDataSource, b: string): void { - super.beginCalculation(a,b); - this.usCountries = 0; - } - public endCalculation(): ISummaryResult { - return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries) - } - public aggregate(a: any): void { - if (a.Countries === "USA") - { - this.usCountries++; - } - } -} -``` - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) -- [`groupSummaryDisplayMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#groupSummaryDisplayMode) -- [`summaryScope`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#summaryScope) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-types.md deleted file mode 100644 index e38397fdb..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-column-types.md +++ /dev/null @@ -1,852 +0,0 @@ ---- -title: React Data Grid | Column Types | Infragistics -_description: Learn how Infragistics' Ignite UI for React data table & grid supports four column types to display your content such as Image, Text, Numeric, DataTime or a Template Column. View Ignite UI for React tutorials! -_keywords: React Table, Data Grid, column types, Ignite UI for React, Infragistics -mentionedTypes: [ "Grid","CellInfo", "TemplateCellInfo", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-types -_tocName: Column Types -_premium: true ---- - -# React Column Types - -The Ignite UI for React Data Table / Data Grid supports 5 column types, plus a Template Column type, giving you complete flexibility over the way your data is displayed in the React data grid. Column types supported are Text column, Numeric column, DateTime column, Image column, ComboBox and Template. - -Each column binds to data by setting the [`field`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridcolumn.html#field) property to the name of the corresponding property on the items of your underlying data source bound to the React data grid. - -## React Column Types Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -.gridSparklineContainer { - background: White; - height: 100%; - width: 100%; - margin-top: 10px; - margin-bottom: 0px; - padding: 0px; - vertical-align: middle; -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import "./DataGridStyles.css"; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn } from 'igniteui-react-data-grids'; -import { IgrComboBoxColumn } from 'igniteui-react-data-grids'; -import { IgrTemplateCellUpdatingEventArgs, - - IgrGridCellValueChangingEventArgs } from 'igniteui-react-data-grids'; -import { IgrTemplateCellInfo } from 'igniteui-react-data-grids'; -import { IIgrCellTemplateProps } from 'igniteui-react-data-grids'; - -import { IgrSparkline } from 'igniteui-react-charts'; -import { IgrSparklineModule } from 'igniteui-react-charts'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); -IgrSparklineModule.register(); - -export default class DataGridColumnTypes extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - public cityList: any[]; - public cityLookup = new Map(); - - constructor(props: any) { - super(props); - - this.data = DataGridSharedData.getEmployees(100); - this.cityList = []; - - // iterate all employees and generate a list of cities - this.data.forEach(employee => { - if(!this.cityLookup.has(employee.City)) { - this.cityLookup.set(employee.City, employee); - this.cityList.push(employee); - } - }); - } - - public render(): JSX.Element { - return ( -
- - - - - - - {/* TODO un-comment this column and getProductivityChart function when editing templated columns is corrected - */} - - - - - - - - - - - - - - - - -
- ); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - } - - // TODO un-comment when editing templated columns is corrected - - // public getProductivityChart(props: IIgrCellTemplateProps) { - // const info = props.dataContext as IgrTemplateCellInfo; - // return ( - //
- // - //
- // ); - // } - - public onAddressCellUpdating = (s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - let span1: HTMLSpanElement | null = null; - let span2: HTMLSpanElement | null = null; - const info = e.cellInfo as IgrTemplateCellInfo; - const item = info.rowItem; - - if (content.childElementCount === 0) { - - span1 = document.createElement("span"); - span2 = document.createElement("span"); - - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - content.style.verticalAlign = "center"; - content.style.lineHeight = "normal"; - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.justifyContent = "center"; - content.style.height = "100%"; - content.style.width = "100%"; - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0] as HTMLSpanElement; - span2 = content.children[1] as HTMLSpanElement; - } - - if (span1 && span2) { - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } - } - - public onSalesCellUpdating = (s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - const info = e.cellInfo as IgrTemplateCellInfo; - const sales = info.rowItem.Sales; - let gaugeValue: HTMLSpanElement | null = null; - let gaugeBar: HTMLDivElement | null = null; - let gaugeWidth = (sales / 950000) * 100; - gaugeWidth = Math.min(100, gaugeWidth); - - if (content.childElementCount === 0) { - gaugeValue = document.createElement("span"); - gaugeValue.style.margin = "0px"; - gaugeValue.style.marginTop = "2px"; - gaugeValue.style.padding = "0px"; - gaugeValue.style.fontFamily = "Verdana"; - gaugeValue.style.fontSize = "13px"; - gaugeValue.style.textAlign = "center"; - - gaugeBar = document.createElement("div"); - gaugeBar.style.background = "#7f7f7f"; - gaugeBar.style.padding = "0px"; - gaugeBar.style.margin = "0px"; - gaugeBar.style.height = "6px"; - gaugeBar.style.left = "0px"; - gaugeBar.style.top = "0px"; - gaugeBar.style.position = "relative"; - - const gauge = document.createElement("div"); - gauge.style.background = "#dddddd"; - gauge.style.padding = "0px"; - gauge.style.margin = "0px"; - gauge.style.height = "6px"; - gauge.style.marginTop = "8px"; - gauge.style.width = "100%"; - gauge.appendChild(gaugeBar); - - content.style.verticalAlign = "center"; - content.style.lineHeight = "normal"; - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.justifyContent = "center"; - content.style.height = "100%"; - content.style.width = "calc(100% - 2rem)"; - content.style.marginRight = "1rem"; - content.style.marginLeft = "1rem"; - - content.appendChild(gauge); - content.appendChild(gaugeValue); - } else { - const gauge = content.children[0]; - gaugeBar = gauge.children[0] as HTMLDivElement; - gaugeValue = content.children[1] as HTMLSpanElement; - } - - // conditional formatting: - if (sales < 400000) { - gaugeValue.style.color = "rgb(211, 17, 3)"; - gaugeBar.style.background = "rgb(211, 17, 3)"; - } - else if (sales < 650000) { - gaugeValue.style.color = "Orange"; - gaugeBar.style.background = "Orange"; - } - else { - gaugeValue.style.color = "rgb(21, 190, 6)"; - gaugeBar.style.background = "rgb(21, 190, 6)"; - } - gaugeValue.textContent = "$" + sales / 1000 + ",000"; - gaugeBar.id = sales + "_" + gaugeWidth.toFixed(1); - gaugeBar.style.width = gaugeWidth + "%"; - } - - public onEmailCellUpdating = (s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - const info = e.cellInfo as IgrTemplateCellInfo; - const item = info.rowItem; - let link: HTMLAnchorElement; - - if (content.childElementCount === 0) { - link = document.createElement("a"); - - content.style.verticalAlign = "center"; - content.style.marginTop = "15px"; - content.style.lineHeight = "normal"; - content.style.display = "inline-grid"; - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - content.style.color = "#4286f4"; - content.style.width = "100%"; - - content.appendChild(link); - } else { - link = content.children[0] as HTMLAnchorElement; - } - - link.href = "mailto:" + item.Email + "?Subject=Hello%20Friend"; - link.textContent = item.Email; - } - - public onPhoneCellUpdating = (s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - - const info = e.cellInfo as IgrTemplateCellInfo; - const item = info.rowItem; - let link: HTMLAnchorElement; - - if (content.childElementCount === 0) { - - link = document.createElement("a"); - - content.style.verticalAlign = "center"; - content.style.marginTop = "15px"; - content.style.lineHeight = "normal"; - content.style.display = "inline-block"; - // content.style.display = "inline-grid"; - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - content.style.color = "#4286f4"; - content.style.width = "100%"; - - content.appendChild(link); - } else { - link = content.children[0] as HTMLAnchorElement; - } - - link.href = "tel:" + item.Phone; - link.textContent = item.Phone; - } - - public onCellValueChanging = (s: IgrDataGrid, e: IgrGridCellValueChangingEventArgs) => { - - let row = e.cellInfo.rowItem; - if (e.column.field === "City") - { - let employee = this.cityLookup.get(e.newValue); - - if(employee !== undefined) { - row.City = employee.City; - row.Country = employee.Country; - row.Street = employee.Street; - row.CountryFlag = employee.CountryFlag; - row.Address = employee.Address; - - //required for pushing changes to the grid - s.notifySetItem(e.cellInfo.dataRow, row, row); - } - - } - } - -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Text Column - -The React data grid is used for displaying formatted text in its associated cells. This is the default column type used to display data of the string type. - -## Numeric Column - -The [`IgrNumericColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrnumericcolumn.html) is used for displaying a formatted numeric value in its associated cells and enables control of decimal place placement within cells and displaying fractional digits. - -## DateTime Column - -The [`IgrDateTimeColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatetimecolumn.html) is used for displaying Date objects in its associated cells and enables control to format the Date objects how you see fit. - -## Image Column - -The [`IgrImageColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrimagecolumn.html) is used for displaying an image within a cell and exposes options for image stretch customization for cells by using its [`imageStretchOption`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrimagecolumn.html#imageStretchOption) option. - -You can also choose what type of resource your image is by setting the [`ImageResourceType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.imageresourcetype.html) option. - -## ComboBox Column - -The [`IgrComboBoxColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrcomboboxcolumn.html) is used for displaying a drop-down list from which your end users can select a single item. - -Data binding can be achieved using an array of complex objects via the column's `DataSource` property. - -The [`textField`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrcomboboxcolumn.html#textField) property determines which value is shown when users make a selection. - -The [`valueField`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrcomboboxcolumn.html#valueField) property determines the bound value of the underlying data item selected. This is necessary if your list of objects have several properties. - -## Template Column - -The [`IgrTemplateColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrtemplatecolumn.html) is used in conjunction with a cell template. It enables you to apply a custom template to the column's cell. This is done by handling the `CellUpdating` event of the template column. - -The `CellUpdating` event's arguments expose the [`IgrTemplateColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrtemplatecolumn.html) that fires the event as well as a [`IgrTemplateCellUpdatingEventArgs`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrtemplatecellupdatingeventargs.html) parameter. This event arguments parameter exposes a `Content` property that returns the HTMLDivElement that will be placed within the associated cells of the column. You can then append new elements to this div. - -The [`IgrTemplateCellUpdatingEventArgs`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrtemplatecellupdatingeventargs.html) also exposes a `CellInfo` property that you can use to get a `TemplateCellInfo` object. This object exposes information about the cell and the row, such as the index, underlying data item, and appearance of the cell. - -## Sparkline Column - -You can embed Sparkline components in [`IgrTemplateColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrtemplatecolumn.html) to show more complex data structures. -Refer to the [Column Sparkline](type-sparkline-table.md) topic for information on how to do this. - -## Code Snippet - -The following demonstrates the implementation of each of the columns described in this topic: - -```tsx - - - - - - - - - -``` - -```ts -import { IgrTemplateCellUpdatingEventArgs } from 'igniteui-react-data-grids'; -import { IgrTemplateCellInfo } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn } from 'igniteui-react-data-grids'; -import { IgrComboBoxColumn } from 'igniteui-react-data-grids'; - -public onAddressCellUpdating(s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) { - const content = e.content as HTMLDivElement; - let span1: HTMLSpanElement | null = null; - let span2: HTMLSpanElement | null = null; - const info = e.cellInfo as IgrTemplateCellInfo; - const item = info.rowItem; - - if (content.childElementCount === 0) { - - span1 = document.createElement("span"); - span2 = document.createElement("span"); - - content.style.verticalAlign = "top"; - content.style.marginTop = "15px"; - content.style.lineHeight = "normal"; - content.style.display = "inline-grid"; - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0] as HTMLSpanElement; - span2 = content.children[1] as HTMLSpanElement; - } - - if (span1 && span2) { - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } -} -``` - -The following is a sample data source to use with the above columns. - -```ts -const maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Torrey", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; -const femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; -const lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "Betts", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Newberry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adama", "Power", "Tesla"]; -const genders: string[] = ["male", "female"]; -const cities: string[] = ["New York, New York", "Columbus, Ohio", "Los Angeles, California", "Orlando, Florida", "New Orleans, Louisiana", "Las Vegas, Nevada", "Atlanta, Georgia"]; -const roadSuffixes: string[] = ["Road", "Street", "Court", "Way"]; -const roadNames: string[] = ["Alpha", "Beta", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Julia", "Kilo", "Lima", "Mike", "November"]; - -const people: any[] = []; - -let maleCount: number = 0; -let femaleCount: number = 0; -for (let i = 0; i < 250; i++) { - - const age: number = Math.round(this.getRandomNumber(20, 40)); - const today: Date = new Date(); - const gender: string = this.getRandomItem(genders); - - let firstName: string; - const lastName: string = this.getRandomItem(lastNames); - - const propertyNum: string = Math.round(this.getRandomNumber(1, 300)).toString(); - const cityState: string = this.getRandomItem(cities); - const road: string = this.getRandomItem(roadNames) + " " + this.getRandomItem(roadSuffixes); - - let photoPath: string; - - if (gender === "male") { - firstName = this.getRandomItem(maleNames); - maleCount++; - - if (maleCount > 26) { - maleCount = 0; - } - - if (maleCount < 10) { - photoPath = '/assets/GUY0' + maleCount.toString() + '.png'; - } - else { - photoPath = '/assets/GUY' + maleCount.toString() + '.png'; - } - } - else { - firstName = this.getRandomItem(femaleNames); - femaleCount++; - - if (femaleCount > 24) { - femaleCount = 0; - } - - if (femaleCount < 10) { - photoPath = '/assets/GIRL0' + femaleCount.toString() + '.png'; - } - else { - photoPath = '/assets/GIRL' + femaleCount.toString() + '.png'; - } - } - - const path: string = './assets/GIRL01.png'; - - const birthday: Date = new Date(today.getFullYear() - age, Math.round(this.getRandomNumber(1, 12)), Math.round(this.getRandomNumber(1, 28))); - - people.push({ - Address: propertyNum + " " + road + ", " + cityState, - Age: age, - Birthday: birthday, - City: cityState, - FirstName: firstName, - LastName: lastName, - Photo: path, - Street: propertyNum + " " + road + "," - }); -} - -this.data = people; - -public getRandomNumber(min: number, max: number): number { - return min + Math.random() * (max - min); -} - -public getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; -} -``` - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) -- `CellInfo` -- `CellUpdating` -- [`IgrComboBoxColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrcomboboxcolumn.html) -- `Content` -- `DataSource` -- [`IgrDateTimeColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatetimecolumn.html) -- [`field`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagridcolumn.html#field) -- [`IgrImageColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrimagecolumn.html) -- [`ImageResourceType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_grids.imageresourcetype.html) -- `ImageStretchOption` -- [`IgrNumericColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrnumericcolumn.html) -- `TemplateCellInfo` -- [`IgrTemplateCellUpdatingEventArgs`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrtemplatecellupdatingeventargs.html) -- [`IgrTemplateColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrtemplatecolumn.html) -- `TextField` -- `ValueField` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-horizontal-scrolling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-horizontal-scrolling.md deleted file mode 100644 index 7bc5ee34e..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-horizontal-scrolling.md +++ /dev/null @@ -1,404 +0,0 @@ ---- -title: React Data Grid | Horizontal Scrolling | Infragistics -_description: Use Infragistics' React grid component's horizontal scrolling feature to scroll seamlessly through the columns. Check out Ignite UI for React table demos! -_keywords: React Table, Data Grid, column, horizontal, scrolling, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Horizontal Scrolling -_premium: true ---- - -# React Horizontal Scrolling - -The Ignite UI for React Data Table / Data Grid supports Horizontal Scrolling is enabled by setting the total width of the columns greater than the width of the React data grid. - -## React Horizontal Scrolling Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridColumnScrolling extends React.Component { - - public data: any[]; - - constructor(props: any) { - super(props); - - this.state = { componentVisible: true } - this.data = DataGridSharedData.getEmployees(); - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - - - - - - - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Setting Default Column Width - -```tsx - -``` - -## Setting Individual Column Widths - -```tsx - - - - - - - - - - -``` - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-live-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-live-data.md deleted file mode 100644 index ba9a6670d..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-live-data.md +++ /dev/null @@ -1,2300 +0,0 @@ ---- -title: React Data Grid | Data Animation | Data Binding | Infragistics -_description: Use Infragistics' React table to handle thousands of updates per seconds while remaining responsive. View Ignite UI for React table demos! -_keywords: React Table, Data Grid, live data updates, Ignite UI for React, Infragistics, data binding -mentionedTypes: ["Implementation.Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Live Data -_premium: true ---- - -# React Binding Live Data - -The Ignite UI for React Data Table / Data Grid is able to handle thousands of updates per seconds, while keeping the grid responsive for any interaction that the user may undertake. You can use the following sample to check performance of the Grid handling under various live data scenarios by adjusting interval between data updates as well as volume of data updates. - -## React Binding Live Data Example - -```css -@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); - -.flex { - flex: 1; -} - -.toolArea { - height: 120px; - display: flex; - flex-direction: column; -} - -.toolAreaColumn { - /* line-height: 55px; */ - /* height: 120px; */ - display: flex; - flex-direction: column; - margin-right: 1rem; -} - -.toolAreaRow { - /* height: 55px; */ - /* line-height: 45px; */ - display: flex; - flex-direction: row; -} - -.toolAreaRow1 { - height: 55px; - line-height: 45px; - display: flex; - flex-direction: row; -} - -.toolAreaRow2 { - line-height: 55px; - display: flex; - flex-direction: row; -} - -.frequencySlider { - display: inline-block; - width: 120px; - padding-right: 20px; -} - -.volumeSlider { - display: inline-block; - width: 120px; - padding-right: 20px; -} - -.gridSwitch { - display: inline-grid; - padding-right: 10px; -} - -.toolAreaLabel { - font-size: 1rem; - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - font-weight: 400; - line-height: 1.5; - letter-spacing: 0.00938em; - white-space: nowrap; -} - -.hiddenIcon { - font-family: Material Icons; - font-size: 20px; - font-feature-settings: "liga"; - padding-right: 10px; - padding-left: 10px; - padding-top: 16px; - - - display: inline-block; - vertical-align: bottom; -} - -#dialogContainer { - visibility: hidden; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - text-align: center; - z-index: 1000; -} - -#dialogContent { - width: 90%; - height: 380px; - margin: 2rem auto; - background-color: white; - border-radius: 0.25rem; - -webkit-border-radius: 0.25rem; - -moz-border-radius: 0.25rem; - border: 0.1rem solid rgb(10 124 238); - padding: 0.5rem; - text-align: center; - font-weight: bold; - font-size: 15px; - position: absolute; - left: 50%; - top: calc(50% + 1rem); - transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - -webkit-transform: translate(-50%, -50%); -} - -.searchField { - display: inline-block; - margin-left: 5px; - margin-right: 5px; - width: 120px; - vertical-align: bottom; -} - -.hiddenDrop { - vertical-align: bottom; - width: 120px; - margin-bottom: 6px; - margin-right: 10px; - margin-left: 10px; -} -``` -```typescript -/* tslint:disable */ -export const Regions: any[] = [ - { - "Name": "North America", - "Countries": [ "Canada", "United States", "Mexico" ] - }, - { - "Name": "Middle East", - "Countries": [ "Turkey", "Iraq", "Saudi Arabia", "Syria", "UAE", "Israel", "Jordan", "Lebanon", "Oman", "Kuwait", "Qatar", "Bahrain", "Iran" ] - }, - { - "Name": "Europe", - "Countries": [ "Russia", "Germany", "France", "United Kingdom", "Italy", "Spain", "Poland", "Romania", "Netherlands", "Belgium", "Greece", - "Portugal", "Czechia", "Hungary", "Sweden", "Austria", "Switzerland", "Bulgaria", "Denmark", "Finland", "Slovakia", "Norway", - "Ireland", "Croatia", "Slovenia", "Estonia", "Iceland",] - }, - { - "Name": "Africa", - "Countries": [ "Nigeria", "Ethiopia", "Egypt", "South Africa", "Algeria", "Morocco", "Cameroon", "Niger", "Senegal", "Tunisia", "Libya"] - }, - { - "Name": "Asia Pacific", - "Countries": [ "Afghanistan", "Australia", "Azerbaijan", "China", "Hong Kong", "India", "Indonesia", - "Japan", "Malaysia", "New Zealand", "Pakistan", "Philippines", "Korea", "Singapore", "Taiwan", "Thailand"] - }, - { - "Name": "South America", - "Countries": [ "Argentina", "Bolivia", "Brazil", "Chile", "Colombia", "Ecuador", "Guyana", "Paraguay", "Peru", "Suriname", "Uruguay", "Venezuela" ] - } -] - -export const DealType: any[] = [ - "Buy", "Sell" -] - -export const Contracts: any[] = [ - "Forwards", "Futures", "Options", "Swap", "CFD" -] - -export const Settlements: any[] = [ - "Credit", "Cash", "Loan" -] - -export const SectorTypes: any[] = [ - "Public", "Private", "Government" -] - -export const CurrencyTypes: any[] = [ - "USD", "EUR", "PLN", "GBP", "YEN" -] - -export const CountryRisks: any[] = [ - "Low", "High", -] - -export const SecurityTypes: any[] = [ - "Poor", "Good", "High", -] - -export const IssuerNames: any[] = [ - "American Airlines", "Delta Airlines", "Southwest", "FedEx", -] - -export const RatingTypes: any[] = [ - "AAA", "BBB", "CCC", -] - -export const DefaultData: any[] = [ -{ - "IndGroup": "Airlines", - "IndSector": "Consumer, Cyclical", - "IndCategory": "Airlines", - // "Sector": "Public", - // "Sector": "Pfd", - // tslint:disable-next-line:object-literal-sort-keys - // "Contract": "Complete", - // "Issuer": "AMERICAN AIRLINES GROUP", - // "Rating": "WR", - "Fitch": "N.A.", - "Collateral": "Assets", - // "Currency": "USD", - // "Security": "001765866 Pfd", - "Transactions": "1765866", - // "Ticker": "AAL", - "CPN": "7.875", - "Maturity": "7/13/2022", - "Spread": 28.302, - "KRD_3YR": 0.00006, - // "RISK_COUNTRY": "", - "KRD_5YR": 0, - "KRD_1YR": -0.00187, -}]; - -export const DataItems: any[] = [ -{ - "Category": "Metal", - "Type": "Gold", - "Spread": 0.01, - "Open Price": 1281.10, - "Price": 1280.7317, - "Buy": 1280.7267, - "Sell": 1280.7367, - "Change": -0.3683, - "Change(%)": -0.0287, - "Volume": 48387, - "High(D)": 1289.50, - "Low(D)": 1279.10, - "High(Y)": 1306, - "Low(Y)": 1047.20, - "Start(Y)": 1176.60, - "Change On Year(%)": 8.8502 -}, -{ - "Category": "Metal", - "Type": "Silver", - "Spread": 0.01, - "Open Price": 17.43, - "Price": 17.42, - "Buy": 17.43, - "Sell": 17.43, - "Change": -0.01, - "Change(%)": -0.0574, - "Volume": 11720, - "High(D)": 17.51, - "Low(D)": 17.37, - "High(Y)": 18.06, - "Low(Y)": 13.73, - "Start(Y)": 15.895, - "Change On Year(%)": 9.5942 -}, -{ - "Category": "Metal", - "Type": "Copper", - "Spread": 0.02, - "Open Price": 2.123, - "Price": 2.113, - "Buy": 2.123, - "Sell": 2.123, - "Change": -0.01, - "Change(%)": -0.471, - "Volume": 28819, - "High(D)": 2.16, - "Low(D)": 2.11, - "High(Y)": 2.94, - "Low(Y)": 1.96, - "Start(Y)": 2.45, - "Change On Year(%)": -13.7551 -}, -{ - "Category": "Metal", - "Type": "Platinum", - "Spread": 0.01, - "Open Price": 1071.60, - "Price": 1071.0993, - "Buy": 1071.0943, - "Sell": 1071.1043, - "Change": -0.5007, - "Change(%)": -0.0467, - "Volume": 3039, - "High(D)": 1081.20, - "Low(D)": 1070.50, - "High(Y)": 1120.60, - "Low(Y)": 812.40, - "Start(Y)": 966.50, - "Change On Year(%)": 10.8225 -}, -{ - "Category": "Metal", - "Type": "Palladium", - "Spread": 0.01, - "Open Price": 600.55, - "Price": 601.0005, - "Buy": 600.9955, - "Sell": 601.0055, - "Change": 0.4505, - "Change(%)": 0.075, - "Volume": 651, - "High(D)": 607.20, - "Low(D)": 598.40, - "High(Y)": 690, - "Low(Y)": 458.6, - "Start(Y)": 574.3, - "Change On Year(%)": 4.6492 -}, -{ - "Category": "Oil", - "Type": "Oil", - "Spread": 0.015, - "Open Price": 45.54, - "Price": 45.7899, - "Buy": 45.7824, - "Sell": 45.7974, - "Change": 0.2499, - "Change(%)": 0.5487, - "Volume": 107196, - "High(D)": 45.94, - "Low(D)": 45.00, - "High(Y)": 65.28, - "Low(Y)": 30.79, - "Start(Y)": 48.035, - "Change On Year(%)": -4.6739 -}, -{ - "Category": "Oil", - "Type": "Brent", - "Spread": 0.01, - "Open Price": 46.06, - "Price": 46.05, - "Buy": 46.06, - "Sell": 46.06, - "Change": -0.01, - "Change(%)": -0.0217, - "Volume": 59818, - "High(D)": 46.48, - "Low(D)": 45.60, - "High(Y)": 71.14, - "Low(Y)": 30.02, - "Start(Y)": 50.58, - "Change On Year(%)": -8.9561 -}, -{ - "Category": "Oil", - "Type": "Natural Gas", - "Spread": 0.02, - "Open Price": 2.094, - "Price": 2.104, - "Buy": 2.094, - "Sell": 2.094, - "Change": 0.01, - "Change(%)": 0.4776, - "Volume": 2783, - "High(D)": 2.11, - "Low(D)": 2.09, - "High(Y)": 3.20, - "Low(Y)": 1.84, - "Start(Y)": 2.52, - "Change On Year(%)": -16.5079 -}, -{ - "Category": "Oil", - "Type": "Gas", - "Spread": 0.015, - "Open Price": 1.5086, - "Price": 1.9532, - "Buy": 1.9457, - "Sell": 1.9607, - "Change": 0.4446, - "Change(%)": 29.4686, - "Volume": 2646, - "High(D)": 1.9532, - "Low(D)": 1.50, - "High(Y)": 2.05, - "Low(Y)": 1.15, - "Start(Y)": 1.60, - "Change On Year(%)": 22.0727 -}, -{ - "Category": "Oil", - "Type": "Diesel", - "Spread": 0.015, - "Open Price": 1.3474, - "Price": 1.3574, - "Buy": 1.3474, - "Sell": 1.3474, - "Change": 0.01, - "Change(%)": 0.7422, - "Volume": 2971, - "High(D)": 1.36, - "Low(D)": 1.34, - "High(Y)": 2.11, - "Low(Y)": 0.92, - "Start(Y)": 1.515, - "Change On Year(%)": -10.4026 -}, -{ - "Category": "Oil", - "Type": "Ethanol", - "Spread": 0.01, - "Open Price": 1.512, - "Price": 2.7538, - "Buy": 2.7488, - "Sell": 2.7588, - "Change": 1.2418, - "Change(%)": 82.1323, - "Volume": 14, - "High(D)": 2.7538, - "Low(D)": 1.1168, - "High(Y)": 2.7538, - "Low(Y)": 1.1168, - "Start(Y)": 1.475, - "Change On Year(%)": 86.7011 -}, -{ - "Category": "Oil", - "Type": "Crude", - "Spread": 0.02, - "Open Price": 27.55, - "Price": 27.58, - "Buy": 27.55, - "Sell": 27.55, - "Change": 0.03, - "Change(%)": 0.1089, - "Volume": 12, - "High(D)": 27.55, - "Low(D)": 27.55, - "High(Y)": 29.32, - "Low(Y)": 21.28, - "Start(Y)": 25.30, - "Change On Year(%)": 9.0119 -}, -{ - "Category": "Oil", - "Type": "Coal", - "Spread": 0.015, - "Open Price": 0.4363, - "Price": 0.4163, - "Buy": 0.4363, - "Sell": 0.4363, - "Change": -0.02, - "Change(%)": -4.584, - "Volume": 3, - "High(D)": 0.4363, - "Low(D)": 0.4363, - "High(Y)": 0.4841, - "Low(Y)": 0.3954, - "Start(Y)": 0.4398, - "Change On Year(%)": -5.3326 -}, -{ - "Category": "Agriculture", - "Type": "Wheat", - "Spread": 0.01, - "Open Price": 465.50, - "Price": 465.52, - "Buy": 465.50, - "Sell": 465.50, - "Change": 0.02, - "Change(%)": 0.0043, - "Volume": 4318, - "High(D)": 467.00, - "Low(D)": 463.25, - "High(Y)": 628.50, - "Low(Y)": 449.50, - "Start(Y)": 539.00, - "Change On Year(%)": -13.6327 -}, -{ - "Category": "Agriculture", - "Type": "Corn", - "Spread": 0.01, - "Open Price": 379.50, - "Price": 379.8026, - "Buy": 379.7976, - "Sell": 379.8076, - "Change": 0.3026, - "Change(%)": 0.0797, - "Volume": 11266, - "High(D)": 381.00, - "Low(D)": 377.75, - "High(Y)": 471.25, - "Low(Y)": 351.25, - "Start(Y)": 411.25, - "Change On Year(%)": -7.6468 -}, -{ - "Category": "Agriculture", - "Type": "Sugar", - "Spread": 0.01, - "Open Price": 15.68, - "Price": 14.6742, - "Buy": 14.6692, - "Sell": 14.6792, - "Change": -1.0058, - "Change(%)": -6.4146, - "Volume": 4949, - "High(D)": 15.70, - "Low(D)": 14.6742, - "High(Y)": 16.87, - "Low(Y)": 11.37, - "Start(Y)": 14.12, - "Change On Year(%)": 3.9249 -}, -{ - "Category": "Agriculture", - "Type": "Soybean", - "Spread": 0.01, - "Open Price": 1038.00, - "Price": 1038.6171, - "Buy": 1038.6121, - "Sell": 1038.6221, - "Change": 0.6171, - "Change(%)": 0.0595, - "Volume": 20356, - "High(D)": 1044.00, - "Low(D)": 1031.75, - "High(Y)": 1057.00, - "Low(Y)": 859.50, - "Start(Y)": 958.25, - "Change On Year(%)": 8.3869 -}, -{ - "Category": "Agriculture", - "Type": "Soy oil", - "Spread": 0.01, - "Open Price": 33.26, - "Price": 33.7712, - "Buy": 33.7662, - "Sell": 33.7762, - "Change": 0.5112, - "Change(%)": 1.5371, - "Volume": 10592, - "High(D)": 33.7712, - "Low(D)": 33.06, - "High(Y)": 35.43, - "Low(Y)": 26.61, - "Start(Y)": 31.02, - "Change On Year(%)": 8.8692 -}, -{ - "Category": "Agriculture", - "Type": "Soy Meat", - "Spread": 0.01, - "Open Price": 342.60, - "Price": 342.62, - "Buy": 342.60, - "Sell": 342.60, - "Change": 0.02, - "Change(%)": 0.0058, - "Volume": 5646, - "High(D)": 345.40, - "Low(D)": 340.30, - "High(Y)": 353.40, - "Low(Y)": 261.70, - "Start(Y)": 307.55, - "Change On Year(%)": 11.403 -}, -{ - "Category": "Agriculture", - "Type": "OJ Future", - "Spread": 0.01, - "Open Price": 140.60, - "Price": 140.1893, - "Buy": 140.1843, - "Sell": 140.1943, - "Change": -0.4107, - "Change(%)": -0.2921, - "Volume": 7, - "High(D)": 140.1893, - "Low(D)": 0.00, - "High(Y)": 155.95, - "Low(Y)": 113.00, - "Start(Y)": 134.475, - "Change On Year(%)": 4.2493 -}, -{ - "Category": "Agriculture", - "Type": "Coffee", - "Spread": 0.01, - "Open Price": 125.70, - "Price": 125.69, - "Buy": 125.70, - "Sell": 125.70, - "Change": -0.01, - "Change(%)": -0.008, - "Volume": 1654, - "High(D)": 125.80, - "Low(D)": 125.00, - "High(Y)": 155.75, - "Low(Y)": 115.35, - "Start(Y)": 135.55, - "Change On Year(%)": -7.2741 -}, -{ - "Category": "Agriculture", - "Type": "Cocoa", - "Spread": 0.01, - "Open Price": 3076.00, - "Price": 3076.03, - "Buy": 3076.00, - "Sell": 3076.00, - "Change": 0.03, - "Change(%)": 0.001, - "Volume": 978, - "High(D)": 3078.00, - "Low(D)": 3066.00, - "High(Y)": 3406.00, - "Low(Y)": 2746.00, - "Start(Y)": 3076.00, - "Change On Year(%)": 0.001 -}, -{ - "Category": "Agriculture", - "Type": "Rice", - "Spread": 0.01, - "Open Price": 11.245, - "Price": 10.4154, - "Buy": 10.4104, - "Sell": 10.4204, - "Change": -0.8296, - "Change(%)": -7.3779, - "Volume": 220, - "High(D)": 11.38, - "Low(D)": 10.4154, - "High(Y)": 14.14, - "Low(Y)": 9.70, - "Start(Y)": 11.92, - "Change On Year(%)": -12.6228 -}, -{ - "Category": "Agriculture", - "Type": "Oats", - "Spread": 0.01, - "Open Price": 194.50, - "Price": 194.2178, - "Buy": 194.2128, - "Sell": 194.2228, - "Change": -0.2822, - "Change(%)": -0.1451, - "Volume": 64, - "High(D)": 195.75, - "Low(D)": 194.00, - "High(Y)": 241.25, - "Low(Y)": 183.75, - "Start(Y)": 212.50, - "Change On Year(%)": -8.6034 -}, -{ - "Category": "Agriculture", - "Type": "Milk", - "Spread": 0.01, - "Open Price": 12.87, - "Price": 12.86, - "Buy": 12.87, - "Sell": 12.87, - "Change": -0.01, - "Change(%)": -0.0777, - "Volume": 7, - "High(D)": 12.89, - "Low(D)": 12.81, - "High(Y)": 16.96, - "Low(Y)": 12.81, - "Start(Y)": 14.885, - "Change On Year(%)": -13.6043 -}, -{ - "Category": "Agriculture", - "Type": "Cotton", - "Spread": 0.01, - "Open Price": 61.77, - "Price": 61.76, - "Buy": 61.77, - "Sell": 61.77, - "Change": -0.01, - "Change(%)": -0.0162, - "Volume": 3612, - "High(D)": 62.06, - "Low(D)": 61.32, - "High(Y)": 67.59, - "Low(Y)": 54.33, - "Start(Y)": 60.96, - "Change On Year(%)": 1.3123 -}, -{ - "Category": "Agriculture", - "Type": "Lumber", - "Spread": 0.01, - "Open Price": 303.90, - "Price": 304.5994, - "Buy": 304.5944, - "Sell": 304.6044, - "Change": 0.6994, - "Change(%)": 0.2302, - "Volume": 2, - "High(D)": 304.5994, - "Low(D)": 303.90, - "High(Y)": 317.10, - "Low(Y)": 236.00, - "Start(Y)": 276.55, - "Change On Year(%)": 10.1426 -}, -{ - "Category": "Livestock", - "Type": "LV Cattle", - "Spread": 0.01, - "Open Price": 120.725, - "Price": 120.705, - "Buy": 120.725, - "Sell": 120.725, - "Change": -0.02, - "Change(%)": -0.0166, - "Volume": 4, - "High(D)": 120.725, - "Low(D)": 120.725, - "High(Y)": 147.98, - "Low(Y)": 113.90, - "Start(Y)": 130.94, - "Change On Year(%)": -7.8166 -}, -{ - "Category": "Livestock", - "Type": "FD Cattle", - "Spread": 0.01, - "Open Price": 147.175, - "Price": 148.6065, - "Buy": 148.6015, - "Sell": 148.6115, - "Change": 1.4315, - "Change(%)": 0.9727, - "Volume": 5, - "High(D)": 148.6065, - "Low(D)": 147.175, - "High(Y)": 190.00, - "Low(Y)": 138.10, - "Start(Y)": 164.05, - "Change On Year(%)": -9.4139 -}, -{ - "Category": "Livestock", - "Type": "Lean Hogs", - "Spread": 0.01, - "Open Price": 81.275, - "Price": 81.8146, - "Buy": 81.8096, - "Sell": 81.8196, - "Change": 0.5396, - "Change(%)": 0.664, - "Volume": 1, - "High(D)": 81.8146, - "Low(D)": 81.275, - "High(Y)": 83.98, - "Low(Y)": 70.25, - "Start(Y)": 77.115, - "Change On Year(%)": 6.0943 -}, -{ - "Category": "Currencies", - "Type": "USD IDX Future", - "Spread": 0.02, - "Open Price": 93.88, - "Price": 93.7719, - "Buy": 93.7619, - "Sell": 93.7819, - "Change": -0.1081, - "Change(%)": -0.1151, - "Volume": 5788, - "High(D)": 94.05, - "Low(D)": 93.7534, - "High(Y)": 100.70, - "Low(Y)": 91.88, - "Start(Y)": 96.29, - "Change On Year(%)": -2.6151 -}, -{ - "Category": "Currencies", - "Type": "USD/JPY Future", - "Spread": 0.02, - "Open Price": 9275.50, - "Price": 9277.3342, - "Buy": 9277.3242, - "Sell": 9277.3442, - "Change": 1.8342, - "Change(%)": 0.0198, - "Volume": 47734, - "High(D)": 9277.3342, - "Low(D)": 0.93, - "High(Y)": 9483.00, - "Low(Y)": 0.93, - "Start(Y)": 4741.965, - "Change On Year(%)": 95.6432 -}, -{ - "Category": "Currencies", - "Type": "GBP/USD Future", - "Spread": 0.02, - "Open Price": 1.4464, - "Price": 1.1941, - "Buy": 1.1841, - "Sell": 1.2041, - "Change": -0.2523, - "Change(%)": -17.4441, - "Volume": 29450, - "High(D)": 1.45, - "Low(D)": 1.1941, - "High(Y)": 1.59, - "Low(Y)": 1.1941, - "Start(Y)": 1.485, - "Change On Year(%)": -19.59 -}, -{ - "Category": "Currencies", - "Type": "AUD/USD Future", - "Spread": 0.02, - "Open Price": 0.7344, - "Price": 0.7444, - "Buy": 0.7344, - "Sell": 0.7344, - "Change": 0.01, - "Change(%)": 1.3617, - "Volume": 36764, - "High(D)": 0.74, - "Low(D)": 0.73, - "High(Y)": 0.79, - "Low(Y)": 0.68, - "Start(Y)": 0.735, - "Change On Year(%)": 1.2789 -}, -{ - "Category": "Currencies", - "Type": "USD/CAD Future", - "Spread": 0.02, - "Open Price": 0.7744, - "Price": 0.9545, - "Buy": 0.9445, - "Sell": 0.9645, - "Change": 0.1801, - "Change(%)": 23.2622, - "Volume": 13669, - "High(D)": 0.9545, - "Low(D)": 0.77, - "High(Y)": 0.9545, - "Low(Y)": 0.68, - "Start(Y)": 0.755, - "Change On Year(%)": 26.4295 -}, -{ - "Category": "Currencies", - "Type": "USD/CHF Future", - "Spread": 0.02, - "Open Price": 1.0337, - "Price": 1.0437, - "Buy": 1.0337, - "Sell": 1.0337, - "Change": 0.01, - "Change(%)": 0.9674, - "Volume": 5550, - "High(D)": 1.03, - "Low(D)": 1.03, - "High(Y)": 1.11, - "Low(Y)": 0.98, - "Start(Y)": 1.045, - "Change On Year(%)": -0.1244 -}, -{ - "Category": "Index", - "Type": "DOW Future", - "Spread": 0.01, - "Open Price": 17711.00, - "Price": 17712.1515, - "Buy": 17712.1465, - "Sell": 17712.1565, - "Change": 1.1515, - "Change(%)": 0.0065, - "Volume": 22236, - "High(D)": 17727.00, - "Low(D)": 17642.00, - "High(Y)": 18083.00, - "Low(Y)": 15299.00, - "Start(Y)": 16691.00, - "Change On Year(%)": 6.118 -}, -{ - "Category": "Index", - "Type": "S&P Future", - "Spread": 0.01, - "Open Price": 2057.50, - "Price": 2056.6018, - "Buy": 2056.5968, - "Sell": 2056.6068, - "Change": -0.8982, - "Change(%)": -0.0437, - "Volume": 142780, - "High(D)": 2059.50, - "Low(D)": 2049.00, - "High(Y)": 2105.50, - "Low(Y)": 1794.50, - "Start(Y)": 1950.00, - "Change On Year(%)": 5.4668 -}, -{ - "Category": "Index", - "Type": "NAS Future", - "Spread": 0.01, - "Open Price": 4341.25, - "Price": 4341.28, - "Buy": 4341.25, - "Sell": 4341.25, - "Change": 0.03, - "Change(%)": 0.0007, - "Volume": 18259, - "High(D)": 4347.00, - "Low(D)": 4318.00, - "High(Y)": 4719.75, - "Low(Y)": 3867.75, - "Start(Y)": 4293.75, - "Change On Year(%)": 1.107 -}, -{ - "Category": "Index", - "Type": "S&P MID MINI", - "Spread": 0.01, - "Open Price": 1454.30, - "Price": 1455.7812, - "Buy": 1455.7762, - "Sell": 1455.7862, - "Change": 1.4812, - "Change(%)": 0.1018, - "Volume": 338, - "High(D)": 1455.7812, - "Low(D)": 1448.00, - "High(Y)": 1527.30, - "Low(Y)": 1236.00, - "Start(Y)": 1381.65, - "Change On Year(%)": 5.3654 -}, -{ - "Category": "Index", - "Type": "S&P 600 MINI", - "Spread": 0.01, - "Open Price": 687.90, - "Price": 687.88, - "Buy": 687.90, - "Sell": 687.90, - "Change": -0.02, - "Change(%)": -0.0029, - "Volume": 0, - "High(D)": 0.00, - "Low(D)": 0.00, - "High(Y)": 620.32, - "Low(Y)": 595.90, - "Start(Y)": 608.11, - "Change On Year(%)": 13.1177 -}, -{ - "Category": "Interest Rate", - "Type": "US 30YR Future", - "Spread": 0.01, - "Open Price": 164.875, - "Price": 164.1582, - "Buy": 164.1532, - "Sell": 164.1632, - "Change": -0.7168, - "Change(%)": -0.4347, - "Volume": 28012, - "High(D)": 165.25, - "Low(D)": 164.0385, - "High(Y)": 169.38, - "Low(Y)": 151.47, - "Start(Y)": 160.425, - "Change On Year(%)": 2.3271 -}, -{ - "Category": "Interest Rate", - "Type": "US 2Y Future", - "Spread": 0.01, - "Open Price": 109.3984, - "Price": 109.3884, - "Buy": 109.3984, - "Sell": 109.3984, - "Change": -0.01, - "Change(%)": -0.0091, - "Volume": 17742, - "High(D)": 109.41, - "Low(D)": 109.38, - "High(Y)": 109.80, - "Low(Y)": 108.62, - "Start(Y)": 109.21, - "Change On Year(%)": 0.1634 -}, -{ - "Category": "Interest Rate", - "Type": "US 10YR Future", - "Spread": 0.01, - "Open Price": 130.5625, - "Price": 130.5825, - "Buy": 130.5625, - "Sell": 130.5625, - "Change": 0.02, - "Change(%)": 0.0153, - "Volume": 189310, - "High(D)": 130.63, - "Low(D)": 130.44, - "High(Y)": 132.64, - "Low(Y)": 125.48, - "Start(Y)": 129.06, - "Change On Year(%)": 1.1797 -}, -{ - "Category": "Interest Rate", - "Type": "Euro$ 3M", - "Spread": 0.01, - "Open Price": 99.18, - "Price": 99.17, - "Buy": 99.18, - "Sell": 99.18, - "Change": -0.01, - "Change(%)": -0.0101, - "Volume": 29509, - "High(D)": 99.18, - "Low(D)": 99.17, - "High(Y)": 99.38, - "Low(Y)": 98.41, - "Start(Y)": 98.895, - "Change On Year(%)": 0.2781 -} -]; - -interface UpdateResponse { - data: any[]; - recordsUpdated: number; -} - -/* tslint:enable */ -export class LiveFinancialData { - - public static generateData(count: number): any[] { - const data: any[] = []; - for (let i = 0; i < count; i++) { - const rand = Math.floor(Math.random() * Math.floor(DataItems.length)); - - const item = Object.assign({}, DataItems[rand]); - item.Settlement = this.getRandomItem(Settlements); - item.Contract = this.getRandomItem(Contracts); - const region = this.getRandomItem(Regions); - item.Region = region.Name; - item.Country = this.getRandomItem(region.Countries); - item.Risk = this.getRandomItem(CountryRisks); - item.Sector = this.getRandomItem(SectorTypes); - item.Currency = this.getRandomItem(CurrencyTypes); - item.Security = this.getRandomItem(SecurityTypes); - item.Issuer = this.getRandomItem(IssuerNames); - item.Maturity = this.getRandomDate(); - item.Rating = this.getRandomItem(RatingTypes); - - for (const mockData of DefaultData) { - for (const prop in mockData) { - if (mockData.hasOwnProperty(prop)) { - item[prop] = mockData[prop]; - } - } - } - item.ID = i; - this.randomizeDataValues(item); - data.push(item); - } - return data; - } - - public static updateAllPrices(data: any[]): any[] { - const currData = []; - for (const dataRow of data) { - const item = Object.assign({}, dataRow); - this.randomizeDataValues(item); - currData.push(item); - } - return currData; - } - - public static updateRandomPrices(data: any[]): any { - const currData = data.slice(0, data.length + 1); - let y = 0; - for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) { - const item = Object.assign({}, data[i]); - this.randomizeDataValues(item); - currData[i] = item; - y++; - } - return currData; - } - - public static updateRandomPrices2(data: any[]): UpdateResponse { - const currData = data.slice(0, data.length + 1); - let y = 0; - for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) { - const item = Object.assign({}, data[i]); - this.randomizeDataValues(item); - currData[i] = item; - y++; - } - return {data: currData, recordsUpdated: y }; - } - - public static randomizeDataValues(item: any): void { - const changeP = "Change(%)"; - const res = this.getRandomPrice(item.Price); - item.Change = res.Price - item.Price; - item.Price = res.Price; - item[changeP] = res.ChangePercent; - } - - public static getRandomPrice(oldPrice: any): any { - const rnd = parseFloat(Math.random().toFixed(2)); - const volatility = 2; - let newPrice = 0; - - let changePercent = 2 * volatility * rnd; - if (changePercent > volatility) { - changePercent -= (2 * volatility); - } - const changeAmount = oldPrice * (changePercent / 100); - newPrice = oldPrice + changeAmount; - const result = { Price: 0, ChangePercent: 0 }; - result.Price = Math.round(newPrice * 100) / 100; - result.ChangePercent = Math.round(changePercent * 100) / 100; - return result; - } - - public static getRandomDate(): Date { - const now: Date = new Date(); - const month = this.getRandomNumber(0, 8); - const day = this.getRandomNumber(10, 27); - return new Date(now.getFullYear(), month, day); - } - - public static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - public static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - public static getRandomCountry(region: any): string { - if (region.Countries === undefined) { - return this.getRandomItem(Regions[2].Countries); - } else { - return this.getRandomItem(region.Countries); - } - } -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import './DataGridBindingLiveData.css'; -import { LiveFinancialData } from './LiveFinancialData'; -// IgrDataGrid modules -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbar } from 'igniteui-react-data-grids'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbarModule } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn } from 'igniteui-react-data-grids'; -import { IgrDataChartInteractivityModule } from 'igniteui-react-charts'; -import { IgrDataChartAnnotationModule } from 'igniteui-react-charts'; -import { IgrItemToolTipLayer } from 'igniteui-react-charts'; -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrDataBindingEventArgs } from 'igniteui-react-data-grids'; -import { IgrCellStyleRequestedEventArgs } from 'igniteui-react-data-grids'; -import { IgrTemplateCellUpdatingEventArgs } from 'igniteui-react-data-grids'; -import { IgrTemplateCellInfo } from 'igniteui-react-data-grids'; -import { FilterFactory } from 'igniteui-react-core'; -import { ListSortDirection } from 'igniteui-react-core'; -import { HeaderClickAction } from 'igniteui-react-data-grids'; -// IgrDataChart modules -import { IgrDataChart } from 'igniteui-react-charts'; -import { IgrDataChartCategoryModule } from 'igniteui-react-charts'; -import { IgrNumberAbbreviatorModule } from 'igniteui-react-charts'; -import { IgrColumnSeries } from 'igniteui-react-charts'; -import { IgrCategoryXAxis } from 'igniteui-react-charts'; -import { IgrNumericYAxis } from 'igniteui-react-charts'; -// other modules -import { IgrButton } from 'igniteui-react'; -import { IgrInput } from 'igniteui-react'; -import { IgrSwitch } from 'igniteui-react'; -import { IgrSlider } from 'igniteui-react'; - -import { IgrButtonModule } from 'igniteui-react'; -import { IgrInputModule } from 'igniteui-react'; -import { IgrSwitchModule } from 'igniteui-react'; -import { IgrSliderModule } from 'igniteui-react'; - -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -IgrDataGridModule.register(); -IgrDataGridToolbarModule.register(); -IgrDataChartAnnotationModule.register(); -IgrDataChartCategoryModule.register(); -IgrDataChartInteractivityModule.register(); -IgrNumberAbbreviatorModule.register(); -IgrButtonModule.register(); -IgrInputModule.register(); -IgrSwitchModule.register(); -IgrSliderModule.register(); - -interface AppState { - name: string; - data: any[]; - liveSomePricesDisabled: boolean; - liveSomePricesText: string; - liveAllPricesDisabled: boolean; - liveAllPricesText: string; - frequency: number; - volume: number; - canvasChecked: boolean; - groupingChecked: boolean; - heatChecked: boolean; - chartOpen: boolean; - pricesByCountry: any[]; - hiddenColumns: string[]; - allColumns: string[]; -} - -export default class DataGridBindingLiveData extends React.Component { - - public chart: IgrDataChart; - public grid: IgrDataGrid; - public toolbar: IgrDataGridToolbar; - public recordsUpdatedLastSecond: number[]; - public lastUpdateTime: Date = new Date(); - public isTimerTicking: boolean = false; - public isUpdatingAllPrices = false; - public isUpdatingSomePrices = false; - public valuesIncreasedColor = "#4EB862"; - public valuesDecreasedColor = "#FF134A"; - public valuesDecreasedBorder = "4px solid #FF134A"; - public valuesIncreasedBorder = "4px solid #4EB862"; - - constructor(props: any) { - super(props); - - this.state = { - name: 'React', - data: LiveFinancialData.generateData(1000), - liveSomePricesDisabled: false, - liveSomePricesText: "Live Prices", - liveAllPricesDisabled: false, - liveAllPricesText: "Live All Prices", - frequency: 100, - volume: 1000, - canvasChecked: false, - groupingChecked: true, - heatChecked: true, - chartOpen: false, - pricesByCountry: [], - hiddenColumns: ["ID"], - allColumns: [] - }; - } - - public render(): JSX.Element { - let buttonStyle: any = { height: "2rem", marginLeft: "10px", marginBottom: "-10px", width: "160px", whiteSpace: "nowrap" }; - let labelStyle: any = { fontSize: "0.8rem", marginTop: "0px", marginLeft: "0px" }; - let iconStyle: any = { paddingLeft: "20px", paddingTop: "5px" }; - - return ( -
- -
-
- - {this.state.liveSomePricesText} - - - - {this.state.liveAllPricesText} - - - - Chart - -
- -
-
- - -
-
- - -
-
- -
-
-
- - -
-
- - -
-
- - -
-
-
- -
-
-
- - - - - - - - - - - - - - - - - - - {/* TODO open chart on clicking a cell in the Chart column */} - {/* - */} - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - Close - - -
-
-
- ); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - let oldRef = this.grid; - if (oldRef) { - oldRef.flush(); - } - this.grid = grid; - if (!this.grid) { - return; - } - - if (this.state.groupingChecked) { - this.onGridGroupingAdd(); - } - - let columns = []; - for (let i = 0; i < this.grid.actualColumns.count; i++) { - let col = this.grid.actualColumns.item(i); - - let name = col.name || col.field; - columns.push(name); - } - this.setState({ allColumns: columns }); - } - - public onToolbarRef = (toolbar: IgrDataGridToolbar) => { - this.toolbar = toolbar; - if (this.toolbar) { - this.toolbar.targetGrid = this.grid; - } - } - - public onTimerTick = () => - { - if (!this.isTimerTicking) { - return; - } - if (!this.grid) { - window.setTimeout(() => this.onTimerTick(), 16); - return; - } - - let toChangeIndexes: Record = {}; - let toChange = Math.round(this.state.volume / 10); - let stillAnimating = false; - - for (const item of this.state.data) { - if (item.PriceHeat !== 0) - { - stillAnimating = true; - } - } - - let now = new Date(); - let intervalElapsed = false; - if ((+now - +this.lastUpdateTime) > this.state.frequency) { - intervalElapsed = true; - } - - let useClear = this.isUpdatingAllPrices; - let updateAll = this.isUpdatingAllPrices; - - if (updateAll) { - toChange = this.state.data.length; - } - - let sortingByPrice = false; - for (let i = 0; i < this.grid.sortDescriptions.count; i++) { - if (this.grid.sortDescriptions.item(i).field === "Price" || - this.grid.sortDescriptions.item(i).field.indexOf("Change") >= 0) { - sortingByPrice = true; - } - } - - let changing = false; - if (intervalElapsed) - { - this.lastUpdateTime = new Date(); - for (let i = 0; i < toChange; i++) - { - let index = Math.round(Math.random() * this.state.data.length - 1); - while (toChangeIndexes[index.toString()] !== undefined) - { - index = Math.round(Math.random() * this.state.data.length - 1); - } - toChangeIndexes[index.toString()] = true; - changing = true; - } - } - - for (let i = 0; i < this.state.data.length; i++) - { - let item = this.state.data[i]; - if (toChangeIndexes[i.toString()] !== undefined) - { - if (sortingByPrice && !useClear) { - - this.grid.notifyRemoveItem(i, item); - LiveFinancialData.randomizeDataValues(item); - this.grid.notifyInsertItem(i, item); - } else { - LiveFinancialData.randomizeDataValues(item); - } - - if (item.Change > 0) { - // item.YearToDateSales += Math.round(Math.random() * 4.0); - item.PriceHeat = 1; - } else { - item.PriceHeat = -1; - } - } - else - { - if (item.PriceHeat > 0) - { - item.PriceHeat -= .06; - if (item.PriceHeat < 0) - { - item.PriceHeat = 0; - } - } - if (item.PriceHeat < 0) { - item.PriceHeat += .06; - if (item.PriceHeat > 0) { - item.PriceHeat = 0; - } - } - } - } - - if (sortingByPrice && useClear && intervalElapsed) { - this.grid.actualDataSource.queueAutoRefresh(); - } - - // if (!useClear) { - if (!sortingByPrice || !intervalElapsed) { - this.grid.invalidateVisibleRows(); - } - // } - // this.grid.invalidateVisibleRows(); - - if (intervalElapsed && this.state.chartOpen) { - this.updatePricesByCountry(); - this.chart.notifyClearItems(this.state.pricesByCountry); - } - - window.setTimeout(() => this.onTimerTick(), 16); - } - - public updatePricesByCountry = () => { - let shouldPopulate = false; - if (this.state.pricesByCountry.length === 0) { - shouldPopulate = true; - } - - let pricesByCountry = new Map(); - let countryNames = []; - - for (const item of this.state.data) { - const country = item.Country; - if (!country) { - continue; - } - if (!pricesByCountry.has(country)) { - pricesByCountry.set(country, 0); - if (shouldPopulate) { - - countryNames.push(country); - } - } - let currVal = pricesByCountry.get(country); - // if (currVal !== 0) { - currVal += item.Price; - currVal = Math.round(currVal * 100.0) / 100.0; - pricesByCountry.set(country, currVal); - // } - } - - if (shouldPopulate) { - - countryNames = countryNames.sort(); - let dataByCountry = this.state.pricesByCountry; - for (const name of countryNames) { - dataByCountry.push({ - Country: name, - Price: pricesByCountry.get(name) - }) - } - this.setState({ pricesByCountry: dataByCountry}); - } else { - let dataByCountry = this.state.pricesByCountry; - for (let i = 0; i < dataByCountry.length; i++) { - const country = dataByCountry[i].Country - dataByCountry[i].Price = pricesByCountry.get(country); - } - this.setState({ pricesByCountry: dataByCountry}); - } - } - - // cellStyleKeyRequested?: (s: IgrDefinitionBase, e: IgrCellStyleRequestedEventArgs) => void; - public onPriceStyleKey = (grid: any, args: IgrCellStyleRequestedEventArgs) => { - let row: any | null = null; - if (this.grid) { - row = this.grid.actualDataSource.getItemAtIndex(args.rowNumber); - } else { - row = this.state.data[args.rowNumber]; - } - if (row.Change >= 0) { - args.styleKey = "priceShiftUp"; - } else { - args.styleKey = "priceShiftDown"; - } - } - - public onPriceCellUpdating = (grid: any, args: IgrTemplateCellUpdatingEventArgs) => { - let item = args.cellInfo.rowItem; - let priceShiftUp = item.Change >= 0; - let templ = args.cellInfo as IgrTemplateCellInfo; - - if (args.isCanvasBased) { - let resized = args.ensureCorrectSize(); - if (resized || args.cellInfo.isContentDirty) { - args.renderStandardBackground(); - - let context: CanvasRenderingContext2D = args.context; - - let iconText = "trending_up"; - let iconColor = this.valuesIncreasedColor; - - let scale = window.devicePixelRatio; - if (scale !== 1.0) { - context.save(); - context.scale(scale, scale); - } - - if (priceShiftUp) { - iconText = "trending_up"; - iconColor = this.valuesIncreasedColor; - } else { - iconText = "trending_down"; - iconColor = this.valuesDecreasedColor; - } - - // context.fillStyle = "blue"; - // context.fillRect(0,0,args.cellInfo.width,args.cellInfo.height); - let txt = "$" + (+templ.value).toFixed(2); - context.font = "13px Verdana"; - let width = context.measureText(txt).width; - - context.font = "13px 'Material Icons'"; - let iconWidth = context.measureText(iconText).width; - - let totalWidth = width + iconWidth; - context.font = "13px Verdana"; - context.fillStyle = iconColor; - context.textBaseline = "top"; - context.fillText(txt, templ.width - (totalWidth + 5), (templ.height / 2.0) - 7); - - context.font = "13px 'Material Icons'"; - context.fillStyle = iconColor; - context.textBaseline = "top"; - context.fillText(iconText, templ.width - (iconWidth + 5), (templ.height / 2.0) - 7); - - if (scale !== 1.0) { - context.restore(); - } - } - - return; - } - - let content = args.content as HTMLDivElement; - let sp: HTMLSpanElement; - let icon: HTMLSpanElement; - - if (content.childElementCount > 0) { - sp = content.children[0] as HTMLSpanElement; - icon = content.children[1] as HTMLSpanElement; - } else { - content.style.textAlign = "right"; - sp = document.createElement("span"); - icon = document.createElement("span"); - sp.style.font = "13px Verdana"; - sp.style.verticalAlign = "center"; - content.appendChild(sp); - content.appendChild(icon); - icon.style.fontFamily = "Material Icons"; - icon.style.fontSize = "13px"; - icon.style.fontFeatureSettings = "liga"; - icon.style.verticalAlign = "center"; - } - - sp.textContent = "$" + (+templ.value).toFixed(2); - - if ((sp as any).__isUp === undefined || - (sp as any).__isUp !== priceShiftUp) { - (sp as any).__isUp = priceShiftUp; - if (priceShiftUp) { - icon.textContent = "trending_up"; - icon.style.color = this.valuesIncreasedColor; - sp.style.color = this.valuesIncreasedColor; - } else { - icon.textContent = "trending_down"; - icon.style.color = this.valuesDecreasedColor; - sp.style.color = this.valuesDecreasedColor; - } - } - } - - public onPricePercentStyleKey = (grid: any, args: IgrCellStyleRequestedEventArgs) => { - if (args.resolvedValue >= 0) { - args.styleKey = "pricePercentUp"; - } else { - args.styleKey = "pricePercentDown"; - } - } - - public onPricePercentCellUpdating = (grid: any, args: IgrTemplateCellUpdatingEventArgs) => { - let templ = args.cellInfo as IgrTemplateCellInfo; - let priceShiftUp = templ.value >= 0; - - if (args.isCanvasBased) { - let resized = args.ensureCorrectSize(); - if (resized || args.cellInfo.isContentDirty) { - args.renderStandardBackground(); - - let context: CanvasRenderingContext2D = args.context; - - let iconColor = this.valuesIncreasedColor; - - let scale = window.devicePixelRatio; - if (scale !== 1.0) { - context.save(); - context.scale(scale, scale); - } - - if (priceShiftUp) { - iconColor = this.valuesIncreasedColor; - } else { - iconColor = this.valuesDecreasedColor; - } - - // context.fillStyle = "blue"; - // context.fillRect(0,0,args.cellInfo.width,args.cellInfo.height); - let txt = (+templ.value).toFixed(2) + "%"; - context.font = "13px Verdana"; - let width = context.measureText(txt).width; - - let totalWidth = width + 4; - - context.font = "13px Verdana"; - context.fillStyle = templ.textColor; - context.textBaseline = "top"; - context.fillText(txt, templ.width - (totalWidth + 10), (templ.height / 2.0) - 7); - - context.font = "13px 'Material Icons'"; - context.fillStyle = iconColor; - context.fillRect(templ.width - (5 + 4), (templ.height / 2.0) - 8, 4, 16); - - if (scale !== 1.0) { - context.restore(); - } - } - - return; - } - - let content = args.content as HTMLDivElement; - let sp: HTMLSpanElement; - - if (content.childElementCount > 0) { - sp = content.children[0] as HTMLSpanElement; - } else { - content.style.textAlign = "right"; - sp = document.createElement("span"); - sp.style.font = "13px Verdana"; - sp.style.verticalAlign = "center"; - content.appendChild(sp); - } - - sp.textContent = (+templ.value).toFixed(2) + "%"; - if ((sp as any).__isUp === undefined || - (sp as any).__isUp !== priceShiftUp) { - (sp as any).__isUp = priceShiftUp; - if (priceShiftUp) { - sp.style.paddingRight = "5px"; - sp.style.borderRight = this.valuesIncreasedBorder; - // sp.style.color = this.valuesIncreasedColor; - } else { - sp.style.paddingRight = "5px"; - sp.style.borderRight = this.valuesDecreasedBorder; - // sp.style.color = this.valuesDecreasedColor; - } - } - } - - public onPriceAmountStyleKey = (grid: any, args: IgrCellStyleRequestedEventArgs) => { - if (args.resolvedValue >= 0) { - args.styleKey = "priceAmountUp"; - } else { - args.styleKey = "priceAmountDown"; - } - } - - public onPriceAmountCellUpdating = (grid: any, args: IgrTemplateCellUpdatingEventArgs) => { - let templ = args.cellInfo as IgrTemplateCellInfo; - let priceShiftUp = templ.value >= 0; - - if (args.isCanvasBased) { - let resized = args.ensureCorrectSize(); - if (resized || args.cellInfo.isContentDirty) { - args.renderStandardBackground(); - - let context: CanvasRenderingContext2D = args.context; - let iconColor = this.valuesIncreasedColor; - let scale = window.devicePixelRatio; - if (scale !== 1.0) { - context.save(); - context.scale(scale, scale); - } - - if (priceShiftUp) { - iconColor = this.valuesIncreasedColor; - } else { - iconColor = this.valuesDecreasedColor; - } - - // context.fillStyle = "blue"; - // context.fillRect(0,0,args.cellInfo.width,args.cellInfo.height); - let txt = (+templ.value).toFixed(2); - context.font = "13px Verdana"; - let width = context.measureText(txt).width; - - let totalWidth = width + 4; - context.font = "13px Verdana"; - context.fillStyle = templ.textColor; - context.textBaseline = "top"; - context.fillText(txt, templ.width - (totalWidth + 10), (templ.height / 2.0) - 7); - - context.font = "13px 'Material Icons'"; - context.fillStyle = iconColor; - context.fillRect(templ.width - (5 + 4), (templ.height / 2.0) - 8, 4, 16); - - if (scale !== 1.0) { - context.restore(); - } - } - - return; - } - - let content = args.content as HTMLDivElement; - let sp: HTMLSpanElement; - - if (content.childElementCount > 0) { - sp = content.children[0] as HTMLSpanElement; - } else { - content.style.textAlign = "right"; - sp = document.createElement("span"); - sp.style.font = "13px Verdana"; - sp.style.verticalAlign = "center"; - content.appendChild(sp); - } - - sp.textContent = (+templ.value).toFixed(2); - - if ((sp as any).__isUp === undefined || - (sp as any).__isUp !== priceShiftUp) { - (sp as any).__isUp = priceShiftUp; - if (priceShiftUp) { - sp.style.paddingRight = "5px"; - sp.style.borderRight = this.valuesIncreasedBorder; - // sp.style.color = this.valuesIncreasedColor; - } else { - sp.style.paddingRight = "5px"; - sp.style.borderRight = this.valuesDecreasedBorder; - // sp.style.color = this.valuesDecreasedColor; - } - } - } - - public onChartStyleKey = (grid: any, args: IgrCellStyleRequestedEventArgs) => { - args.styleKey = "container"; - } - - public onChartCellUpdating = (grid: any, args: IgrTemplateCellUpdatingEventArgs) => { - if (args.isCanvasBased) { - return; - } - let templ = args.cellInfo as IgrTemplateCellInfo; - - let content = args.content as HTMLDivElement; - let icon: HTMLSpanElement; - - if (content.childElementCount > 0) { - icon = content.children[0] as HTMLSpanElement; - icon.onclick = (e) => { - // console.log("chart clicked!!") - e.stopPropagation(); - } - } else { - icon = document.createElement("span"); - content.appendChild(icon); - icon.style.fontFamily = "Material Icons"; - icon.style.fontSize = "13px"; - icon.style.fontFeatureSettings = "liga"; - icon.style.verticalAlign = "center"; - icon.textContent = "insertchart_outlined"; - } - - } - - public onGridStyleKey = (grid: any, args: IgrCellStyleRequestedEventArgs) => { - args.styleKey = "grid"; - } - - public onGridCellUpdating = (grid: any, args: IgrTemplateCellUpdatingEventArgs) => { - if (args.isCanvasBased) { - return; - } - - let content = args.content as HTMLDivElement; - let icon: HTMLSpanElement; - - if (content.childElementCount > 0) { - icon = content.children[0] as HTMLSpanElement; - icon.onclick = (e) => { - // console.log("grid clicked!!") - e.stopPropagation(); - } - } else { - icon = document.createElement("span"); - content.appendChild(icon); - icon.style.fontFamily = "Material Icons"; - icon.style.fontSize = "13px"; - icon.style.fontFeatureSettings = "liga"; - icon.style.verticalAlign = "center"; - icon.textContent = "tablechart"; - } - } - - public startTicking = () => { - if (!this.isTimerTicking) { - this.isTimerTicking = true; - window.setTimeout(() => this.onTimerTick(), 16); - } - } - - public stopTicking = () => { - if (this.isTimerTicking) { - this.isTimerTicking = false; - } - } - - public onLiveSomePricesClicked = () => { - this.isUpdatingAllPrices = false; - this.isUpdatingSomePrices = !this.isUpdatingSomePrices; - if (this.isTimerTicking) { - this.isTimerTicking = false; - this.setState({ - liveSomePricesText: "Live Prices", - liveSomePricesDisabled: false, - liveAllPricesDisabled: false, - }); - } else { - this.startTicking(); - this.setState({ - liveSomePricesText: "Stop Prices", - liveSomePricesDisabled: false, - liveAllPricesDisabled: true, - }); - } - } - - public onLiveAllPricesClicked = () => { - this.isUpdatingAllPrices = !this.isUpdatingAllPrices; - this.isUpdatingSomePrices = false; - if (this.isTimerTicking) { - this.isTimerTicking = false; - this.setState({ - liveAllPricesText: "Live All Prices", - liveAllPricesDisabled: false, - liveSomePricesDisabled: false, - }); - } else { - this.startTicking(); - this.setState({ - liveAllPricesText: "Stop All Prices", - liveAllPricesDisabled: false, - liveSomePricesDisabled: true, - }); - } - } - - public onChartClicked = () => { - this.updatePricesByCountry(); - - let element = document.getElementById("dialogContainer"); - element.style.visibility = (element.style.visibility == "visible") ? "hidden" : "visible"; - - this.setState({ - chartOpen: true - }); - } - - // onChange?: (event: React.ChangeEvent<{}>, value: number | number[]) => void; - // public onPriceFrequencyChanged(event: any, value: number) { - // public onPriceFrequencyChanged(event: any, value: number | number[]) { - public onPriceFrequencyChanged = (event: CustomEvent) => { - let value = event.detail; - this.setState({ - frequency: value, - }); - } - - public onPriceVolumeChanged = (event: CustomEvent) => { - let value = event.detail; - this.setState({ - volume: value, - data: LiveFinancialData.generateData(value) - }); - this.grid.dataSource = this.state.data; - } - - public onGridCanvasModeChanged = (event: any) => { - this.setState({ canvasChecked: event.checked }); - } - - public onGridHeatModeChanged = (event: any) => { - this.setState({ heatChecked: event.checked }); - } - - public onGridGroupingChanged = (event: any) => { - - this.setState({ groupingChecked: event.checked }); - - if (event.checked) { - this.onGridGroupingAdd(); - } else { - this.onGridGroupingRemove(); - } - } - - public onGridGroupingRemove = () => { - this.grid.groupDescriptions.clear(); - this.grid.flush(); - } - - public onGridGroupingAdd = () => { - let g = new IgrColumnGroupDescription(); - g.field = "Category"; - g.sortDirection = ListSortDirection.Descending; - this.grid.groupDescriptions.add(g); - - g = new IgrColumnGroupDescription(); - g.field = "Type"; - g.sortDirection = ListSortDirection.Descending; - this.grid.groupDescriptions.add(g); - - g = new IgrColumnGroupDescription(); - g.field = "Contract"; - g.sortDirection = ListSortDirection.Descending; - this.grid.groupDescriptions.add(g); - } - - public onPriceDataBound = (sender: any, args: IgrDataBindingEventArgs) => { - let item: any = args.cellInfo.rowItem; - if (item === null) { return; } - - if (item.PriceHeat > 0 && this.state.heatChecked) - { - let p = +item.PriceHeat; - let minA = 1.0; - let maxA = 0.25; - - let maxR = 0.0; - let minR = 1.0; - let minG = 1.0; - let maxG = 1.0; - let minB = 1.0; - let maxB = 0.0; - - let a = minA + (maxA - minA) * p; - let r = minR + (maxR - minR) * p; - let g = minG + (maxG - minG) * p; - let b = minB + (maxB - minB) * p; - r = Math.round(r * 255.0); - g = Math.round(g * 255.0); - b = Math.round(b * 255.0); - - let colorString = "rgba(" + r + "," + g + "," + b + "," + a + ")"; - args.cellInfo.background = colorString; - } - else if (item.PriceHeat < 0 && this.state.heatChecked) { - let p = +item.PriceHeat * -1.0; - let minA = 1.0; - let maxA = 0.25; - - let minR = 1.0; - let maxR = 1.0; - let minG = 1.0; - let maxG = 0.0; - let minB = 1.0; - let maxB = 0.0; - - let a = minA + (maxA - minA) * p; - let r = minR + (maxR - minR) * p; - let g = minG + (maxG - minG) * p; - let b = minB + (maxB - minB) * p; - r = Math.round(r * 255.0); - g = Math.round(g * 255.0); - b = Math.round(b * 255.0); - - let colorString = "rgba(" + r + "," + g + "," + b + "," + a + ")"; - args.cellInfo.background = colorString; - } - else - { - args.cellInfo.background = "white"; - } - } - - public onChartClose = () => { - - let element = document.getElementById("dialogContainer"); - element.style.visibility = (element.style.visibility == "visible") ? "hidden" : "visible"; - - this.setState({ chartOpen: false }); - } - - public onChartRef = (chart: IgrDataChart) => { - if (!chart) { return; } - - this.chart = chart; - // console.log(this.chart); - - if (this.chart) { - this.updatePricesByCountry(); - // this.chart.animateSeriesWhenAxisRangeChanges = true; - this.chart.isHorizontalZoomEnabled = true; - this.chart.isVerticalZoomEnabled = false; - let xAxis = new IgrCategoryXAxis({ name: "xAxis" }); - xAxis.dataSource = this.state.pricesByCountry; - xAxis.label = "Country"; - xAxis.labelAngle = 90; - xAxis.interval = 2; - let yAxis = new IgrNumericYAxis({ name: "yAxis", abbreviateLargeNumbers: false }); - - let columnSeries = new IgrColumnSeries({ name: "columnSeries" }); - columnSeries.transitionDuration = this.state.frequency; - columnSeries.xAxisName = "xAxis"; - columnSeries.yAxisName = "yAxis"; - columnSeries.xAxis = xAxis; - columnSeries.yAxis = yAxis; - columnSeries.showDefaultTooltip = true; - columnSeries.isHighlightingEnabled = true; - columnSeries.title = "Price"; - - columnSeries.dataSource = this.state.pricesByCountry; - columnSeries.valueMemberPath = "Price"; - - let itemTooltip = new IgrItemToolTipLayer({ name: "tooltips" }); - - this.chart.series.add(columnSeries); - this.chart.axes.add(xAxis); - this.chart.axes.add(yAxis); - // this.chart.series.add(itemTooltip); - yAxis.abbreviateLargeNumbers = true; - } - } - - // public transition = (props: any) => { - // return ; - // } - - public onGridSearchChanged = (event: any) => { - - let term = event.value; - - if (!this.grid) { - return; - } - - if (!term || term.length === 0) { - this.grid.filterExpressions.clear(); - } else { - let ff = FilterFactory.instance; - let filter = ff.property("Category").toLower().contains(ff.literal(term).toLower()) - .or(ff.property("Type").toLower().contains(ff.literal(term).toLower())) - .or(ff.property("Contract").toLower().contains(ff.literal(term).toLower())) - .or(ff.property("Settlement").toLower().contains(ff.literal(term).toLower())) - .or(ff.property("Region").toLower().contains(ff.literal(term).toLower())) - .or(ff.property("Country").toLower().contains(ff.literal(term).toLower())); - - this.grid.filterExpressions.clear(); - this.grid.filterExpressions.add(filter); - } - } - - public onGridColumnHidden = (event: any) => { - let options = event.target.value; - // console.log(event.target); - let hidden = []; - let hiddenSet = new Set(); - for (let i = 0, l = options.length; i < l; i += 1) { - hidden.push(options[i]); - hiddenSet.add(options[i]); - } - this.setState({ - hiddenColumns: hidden, - }); - - if (!this.grid) { - return; - } - for (let i = 0; i < this.grid.actualColumns.count; i++) { - let col = this.grid.actualColumns.item(i); - if (hiddenSet.has(col.name || col.field)) { - if (!col.isHidden) { - col.isHidden = true; - } - } else { - if (col.isHidden) { - col.isHidden = false; - } - } - } - } - -} -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-load-save-layout.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-load-save-layout.md deleted file mode 100644 index 02e6f6a5b..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-load-save-layout.md +++ /dev/null @@ -1,517 +0,0 @@ ---- -title: React Data Grid | Real-Time Data Grid and Tables | Load & Save | Infragistics -_description: Use Infragistics' Ignite UI for React Data Table & Grid which supports loading and saving the layout the user makes. -_keywords: React Table, Data Grid, cell activation, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Load & Save Grid Layout -_premium: true ---- - -# React Grid Load & Save Layout - -The Ignite UI for React Data Table / Data Grid supports loading and saving the grid layout. This is performed by calling the [`loadLayout`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#loadLayout) and [`saveLayout`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#saveLayout) methods of the grid. These features are useful when an end user can move, sort, and group columns, and wants to preserve the state of the grid and be able to recover the layout and resume work at a later time. - -## React Grid Load & Save Layout Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -.gridSparklineContainer { - background: transparent; - height: 100%; - width: 100%; - margin-top: 10px; - margin-bottom: 0px; - padding: 0px; - vertical-align: middle; -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import "./DataGridStyles.css"; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbarModule } from "igniteui-react-data-grids"; -import { IgrDataGridToolbar } from "igniteui-react-data-grids"; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrColumnSummaryDescription } from 'igniteui-react-data-grids' -import { DataSourceSummaryOperand } from 'igniteui-react-core'; -import { IgrButton } from 'igniteui-react'; -import { IgrButtonModule } from 'igniteui-react'; - -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -IgrDataGridModule.register(); -IgrDataGridToolbarModule.register(); -IgrGridColumnOptionsModule.register(); -IgrButtonModule.register(); - -export default class DataGridLoadSaveLayout extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - public toolbar: IgrDataGridToolbar; - public savedLayout: string; - - constructor(props: any) { - super(props); - - this.data = DataGridSharedData.getEmployees(100); - } - - public onLoadLayoutClicked = () => { - this.grid.loadLayout(this.savedLayout); - } - - public onSaveLayoutClicked = () => { - - this.grid.saveLayout(); - this.savedLayout = this.grid.saveLayout(); - } - - public render(): JSX.Element { - let buttonStyle: any = { height: "2rem", marginLeft: "10px", width: "160px", whiteSpace: "nowrap" }; - - return ( -
- -
- - Load - - - Save - -
- - - - - - - - - - - - - - - - - - - - - -
- ); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - this.grid.actualDataSource.isSectionExpandedDefault = true; - - if (this.toolbar !== null) { - this.toolbar.targetGrid = this.grid; - } - } - - public onToolbarRef = (toolbar: IgrDataGridToolbar) => { - this.toolbar = toolbar; - if (this.toolbar !== null) { - this.toolbar.targetGrid = this.grid; - } - } - - public componentDidMount() { - - const peopleGroup = new IgrColumnGroupDescription(); - peopleGroup.field = "Country"; - peopleGroup.displayName = "Country"; - this.grid.groupDescriptions.add(peopleGroup); - - const incomeGroup = new IgrColumnGroupDescription(); - incomeGroup.field = "Income"; - incomeGroup.displayName = "Income"; - this.grid.groupDescriptions.add(incomeGroup); - - const peopleCount = new IgrColumnSummaryDescription(); - peopleCount.field = "Photo"; - peopleCount.operand = DataSourceSummaryOperand.Count; - this.grid.summaryDescriptions.add(peopleCount); - - const sales = new IgrColumnSummaryDescription(); - sales.field = "Sales"; - sales.operand = DataSourceSummaryOperand.Max; - sales.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(sales); - - const salary = new IgrColumnSummaryDescription(); - salary.field = "Salary"; - salary.operand = DataSourceSummaryOperand.Average; - salary.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(salary); - } - - - -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Supported Features - -The grid supports saving the following features: - -- [Column Visibility](column-chooser.md) -- [Column Pinning](column-pinning.md) -- [Column Moving](column-moving.md) -- [Column Resizing](column-resizing.md) -- [Column Sorting](column-sorting.md) -- [Column Filtering](column-filtering.md) -- [Row Grouping](row-grouping.md) - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) -- [`loadLayout`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#loadLayout) -- [`saveLayout`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#saveLayout) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-local-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-local-data.md deleted file mode 100644 index 12ddd570b..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-local-data.md +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: React Data Grid | Binding Local Data | Infragistics -_description: Use Infragistics' React grid control to bind to an array of data. Learn how Ignite UI for React table can help you better display your data! -_keywords: React Table, Data Grid, binding to data, Ignite UI for React, Infragistics, data binding -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Local Data -_premium: true ---- - -# React Binding Local Data - -The following sample demonstrates the Ignite UI for React Data Table / Data Grid data binding to an array of data. - -## React Binding Local Data Example - -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridBindingLocalData extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { componentVisible: true } - this.initData(); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - this.grid = grid; - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - - - - -
- ); - } - - public getRandomDate(): Date { - const today: Date = new Date(); - const year: number = today.getFullYear(); - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - public getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - public getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - public getCountryFlag(country: string): string { - - const flag = 'https://dl.infragistics.com/x/img/flags/' + country + '.png' - return flag; - } - - public initData() { - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain",]; - const status: string[] = [ "Packing", "Shipped", "Delivered"] - const sales: any[] = []; - - for (let i = 0; i < 200; i++) { - const price = this.getRandomNumber(10000, 90000) / 100; - const items = this.getRandomNumber(4, 30); - const value = Math.round(price * items); - const margin = this.getRandomNumber(2, 5); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - Country: country, - CountryFlag: this.getCountryFlag(country), - Margin: margin, - OrderDate: this.getRandomDate(), - OrderItems: items, - OrderValue: value, - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - ProductPrice: price, - Profit: Math.round(profit), - Status: this.getRandomItem(status), - }); - } - - this.data = sales; - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -## Code Snippet - -```tsx - - - - - - - - - - - - -``` - -```ts -public data: any[]; -public initData() { - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - - const countries: string[] = ["USA", "UK", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain",]; - const status: string[] = [ "Packing", "Shipped", "Delivered"] - const sales: any[] = []; - - for (let i = 0; i < 200; i++) { - const price = this.getRandomNumber(10000, 90000) / 100; - const items = this.getRandomNumber(4, 30); - const value = Math.round(price * items); - const margin = this.getRandomNumber(2, 5); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - Country: country, - CountryFlag: this.getCountryFlag(country), - Margin: margin, - OrderDate: this.getRandomDate(), - OrderItems: items, - OrderValue: value, - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - ProductPrice: price, - Profit: Math.round(profit), - Status: this.getRandomItem(status), - }); - } - - this.data = sales; - } -``` - - - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-localization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-localization.md deleted file mode 100644 index 11a8671ee..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-localization.md +++ /dev/null @@ -1,805 +0,0 @@ ---- -title: React Data Grid | Real-Time Data Grid and Tables | Localization | Infragistics -_description: Use Infragistics' Ignite UI for React Data Table & Grid which supports localization. View Ignite UI for React table tutorials! -_keywords: React Table, Data Grid, cell accessibility, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Localization -_premium: true ---- - -# React Grid Localization - -The Ignite UI for React Data Table / Data Grid supports localizing the resource strings specific to the column options pop-up and summaries. Note, this is not intended to be used nor capable of translating the data. - -## React Grid Localization Example - -```typescript -export class DataGridLocalizationJa { - [key: string]: string; - "Apply": string = "適用"; - "Cancel": string = "キャンセル"; - "Clear_Column_Filter": string = "列フィルターをクリア"; - "Column_Move": string = "移動"; - "Column_Move_Left": string = "左"; - "Column_Move_Right": string = "右"; - "Column_Pin": string = "ピン固定"; - "Column_Pin_Left": string = "左"; - "Column_Pin_Right": string = "右"; - "Column_Sort": string = "ソート"; - "Column_Sort_Ascending": string = "昇順"; - "Column_Sort_Descending": string = "降順"; - "Filter_Columns_List": string = "列リストのフィルター"; - "Search": string = "検索"; - "Select_All": string = "すべて選択"; - "ComparisonOperator_Bottom": string = "下"; - "ComparisonOperator_BottomPercentile": string = "下位の百分位数"; - "ComparisonOperator_Contains": string = "～を含む"; - "ComparisonOperator_DoesNotContain": string = "～を含まない"; - "ComparisonOperator_DoesNotEndWith": string = "～で終わらない"; - "ComparisonOperator_DoesNotMatch": string = "～と一致しない"; - "ComparisonOperator_DoesNotStartWith": string = "～で始まらない"; - "ComparisonOperator_Empty": string = "空"; - "ComparisonOperator_EndsWith": string = "次の値で終わる"; - "ComparisonOperator_Equals": string = "等しい"; - "ComparisonOperator_False": string = "False"; - "ComparisonOperator_GreaterThan": string = "次の値より大きい"; - "ComparisonOperator_GreaterThanOrEqualTo": string = "次の値より大きいまたは等しい"; - "ComparisonOperator_LastMonth": string = "先月"; - "ComparisonOperator_LastQuater": string = "前四半期"; - "ComparisonOperator_LastWeek": string = "先週"; - "ComparisonOperator_LastYear": string = "昨年"; - "ComparisonOperator_LessThan": string = "次の値より小さい"; - "ComparisonOperator_LessThanOrEqualTo": string = "次の値より小さいまたは等しい"; - "ComparisonOperator_NextMonth": string = "翌月"; - "ComparisonOperator_NextQuater": string = "翌四半期"; - "ComparisonOperator_NextWeek": string = "来週"; - "ComparisonOperator_NextYear": string = "翌年"; - "ComparisonOperator_NotEmpty": string = "空ではない"; - "ComparisonOperator_NotEquals": string = "次の値に等しくない"; - "ComparisonOperator_StartsWith": string = "～で始まる"; - "ComparisonOperator_ThisMonth": string = "今月"; - "ComparisonOperator_ThisQuarter": string = "本四半期"; - "ComparisonOperator_ThisWeek": string = "今週"; - "ComparisonOperator_ThisYear": string = "今年"; - "ComparisonOperator_Today": string = "今日"; - "ComparisonOperator_Tomorrow": string = "明日"; - "ComparisonOperator_Top": string = "上"; - "ComparisonOperator_TopPercentile": string = "上位の百分位数"; - "ComparisonOperator_True": string = "True"; - "ComparisonOperator_Yesterday": string = "昨日"; - "Column_Options_Summary_Average": string = "平均"; - "Column_Options_Summary_Count": string = "カウント"; - "Column_Options_Summary_Maximum": string = "最大値"; - "Column_Options_Summary_Minimum": string = "最小値"; - "Column_Options_Summary_Sum": string = "合計値"; - "Column_Options_Summaries": string = "集計"; -} - -export class DataGridSummariesLocalizationJa { - [key: string]: string; - "DataSource_Summary_Avg": string = "平均"; - "DataSource_Summary_Count": string = "カウント"; - "DataSource_Summary_Max": string = "最大値"; - "DataSource_Summary_Min": string = "最小値"; - "DataSource_Summary_Sum": string = "合計値"; -} - -export class DataGridDateTimeColumnLocalizationJa { - [key: string]: string; - "April_Full" = "4月"; - "April_Short" = "4月"; - "August_Full" = "August"; - "August_Short" = "8月"; - "December_Full" = "December"; - "December_Short" = "12月"; - "February_Full" = "February"; - "February_Short" = "2月"; - "Friday_Full" = "Friday"; - "Friday_Short" = "Fri"; - "Friday_Single" = "金"; - "January_Full" = "January"; - "January_Short" = "1月"; - "July_Full" = "July"; - "July_Short" = "7月"; - "June_Full" = "June"; - "June_Short" = "6月"; - "March_Full" = "March"; - "March_Short" = "3月"; - "May_Full" = "May"; - "May_Short" = "5月"; - "Monday_Full" = "Monday"; - "Monday_Short" = "Mon"; - "Monday_Single" = "月"; - "November_Full" = "November"; - "November_Short" = "11月"; - "October_Full" = "October"; - "October_Short" = "10月"; - "Saturday_Full" = "Saturday"; - "Saturday_Short" = "Sat"; - "Saturday_Single" = "土"; - "September_Full" = "September"; - "September_Short" = "9月"; - "Sunday_Full" = "Sunday"; - "Sunday_Short" = "Sun"; - "Sunday_Single" = "日"; - "Thursday_Full" = "Thursday"; - "Thursday_Short" = "Thu"; - "Thursday_Single" = "木"; - "Today" = "Today"; - "Tuesday_Full" = "Tuesday"; - "Tuesday_Short" = "Tue"; - "Tuesday_Single" = "火"; - "Wednesday_Full" = "Wednesday"; - "Wednesday_Short" = "Wed"; - "Wednesday_Single" = "水"; -} - -export class DataGridMultiColumnComboBoxLocalizationJa { - [key: string]: string; - "NoMatches" = "一致なし"; -} -``` -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "男") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "低い"; - } else if (person.Salary < 100000) { - person.Income = "平均"; - } else { - person.Income = "高い"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド", "日本", "ドイツ"]; - const status: string[] = ["梱包中", "出荷完了", "配達完了"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "タウンハウス", "戸建て", "マンション", "別荘"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド", "日本", "ドイツ"]; - - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["男", "女"]; - private static maleNames: string[] = ["カイル", "オスカー", "ラルフ", "マイク", "ビル", "フランク", "ハワード", "ジャック", "ラリー", "ピート", "スティーブ", "ヴィンス", "マーク", "アレックス", "マックス", "ブライアン", "クリス", "アンドリュー", "マーティン", "マイク", "スティーブ", "グレン", "ブルース"]; - private static femaleNames: string[] = ["ジーナ", "アイリーン", "ケイティ", "ブレンダ", "ケーシー", "フィオナ", "ホリー", "ケイト", "リズ", "パメラ", "ネリー", "マリサ", "モニカ", "アンナ", "ジェシカ", "ソフィア", "イザベラ", "マーゴ", "ジェーン", "オードリー", "サリー", "メラニー", "グレタ", "オーロラ", "サリー"]; - private static lastNames: string[] = ["アダムス", "クローリー", "エリス", "マルチネス", "アーバイン", "マクスウェル", "クラーク", "オーエンス", "ルーニー", "リンカーン", "トーマス", "スペーシー", "モーガン", "キング", "ニュートン", "フィッツジェラルド", "ホームズ", "ジェファーソン", "ランドリー", "ベリー", "ペレス", "スペンサー", "スター", "カーター", "エドワーズ", "スターク", "ジョンソン", "フィッツ", "チーフ", "ブランク", "ペリー", "ストーン", "ウィリアムズ", "レーン", "ジョブズ", "アダムス", "パワー", "テスラ"]; - private static countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド"]; - private static citiesUS: string[] = ["ニューヨーク", "ロサンゼルス", "マイアミ", "サンフランシスコ", "サンディエゴ", "ラスベガス"]; - private static citiesUK: string[] = ["ロンドン", "リバプール", "マンチェスター"]; - private static citiesFR: string[] = ["パリ", "マルセイユ", "リヨン"]; - private static citiesCA: string[] = ["トロント", "バンクーバー", "モントリオール"]; - private static citiesPL: string[] = ["クラクフ", "ワルシャワ", "ヴロツワフ", "グダニスク"]; - private static citiesJP: string[] = ["東京", "大阪", "京都", "横浜"]; - private static citiesGR: string[] = ["ベルリン", "ボン", "ケルン", "ミュンヘン", "ハンブルク"]; - private static roadSuffixes: string[] = ["通り", "筋", "小路"]; - private static roadNames: string[] = ["メイン", "ガーデン", "ブロード", "オーク", "シダー", "パーク", "パイン", "エルム", "マーケット", "ヒル"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "男") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "カナダ") { - return this.getRandomItem(this.citiesCA); - } else if (country === "フランス") { - return this.getRandomItem(this.citiesFR); - } else if (country === "ポーランド") { - return this.getRandomItem(this.citiesPL); - } else if (country === "アメリカ合衆国") { - return this.getRandomItem(this.citiesUS); - } else if (country === "日本") { - return this.getRandomItem(this.citiesJP); - } else if (country === "ドイツ") { - return this.getRandomItem(this.citiesGR); - } else { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - // Note: Mapping between En and Ja. - // This comment is for the sake of coding and debugging. - // private static genders: string[] = ["male", "female"]; - // private static genders: string[] = ["男", "女"]; - - const genderEn = (gender == "男" ? "male" : "female"); - return 'https://dl.infragistics.com/x/img/genders/' + genderEn + '.png'; - } - - private static getCountryFlag(country: string): string { - // Note: Mapping between En and Ja. - // This comment is for the sake of coding and debugging. - // const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - // const countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド", "日本", "ドイツ"]; - - let countryEn = ""; - if (country == "カナダ") - { - countryEn = "Canada"; - } - else if (country == "フランス") - { - countryEn = "France"; - } - else if (country == "ポーランド") - { - countryEn = "Poland"; - } - else if (country == "アメリカ合衆国") - { - countryEn = "USA"; - } - else if (country == "日本") - { - countryEn = "Japan"; - } - else if (country == "ドイツ") - { - countryEn = "Germany"; - } - else - { // if (country === "United-Kingdom") { - countryEn = "UK"; - } - - return 'https://dl.infragistics.com/x/img/flags/' + countryEn + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrColumnSummaryDescription } from 'igniteui-react-data-grids' -import { IgrComboBoxColumn } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { DataSourceSummaryOperand } from 'igniteui-react-core'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; -import { Localization } from 'igniteui-react-core'; -import { DataGridSharedData } from './DataGridSharedData'; - -// importing localization data: -import { DataGridLocalizationJa } from './DataGridLocaleJa'; -import { DataGridSummariesLocalizationJa } from './DataGridLocaleJa'; -import { DataGridDateTimeColumnLocalizationJa } from './DataGridLocaleJa'; -import { DataGridMultiColumnComboBoxLocalizationJa } from './DataGridLocaleJa'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridLocalization extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - public comboColumn: IgrComboBoxColumn; - public countryList: any[] = []; - public countryLookup = new Map(); - - constructor(props: any) { - super(props); - - this.data = DataGridSharedData.getSales(); - - // If your browser language is JA then you should use "ja" after eg."DataGrid-ja" etc. The grid will automatically look for the correct - // suffix based on what the browser language is. This means you could force the grid to use the Japanese resources for whatever - // the browser culture is by registering it for each language. - - //Localization.register("DataGrid-ja", new CustomDataGridLocaleJa()); - - //Register custom strings for column options in the DataGrid - Localization.register("DataGrid-en", new DataGridLocalizationJa()); - - //Register custom strings for summary cells in the DataGrid - Localization.register("DataVisualization-en", new DataGridSummariesLocalizationJa()); - - //Register custom strings for date-time column in the DataGrid - Localization.register("Calendar-en", new DataGridDateTimeColumnLocalizationJa()); - - //Register custom strings for combo-column in the DataGrid - Localization.register("MultiColumnComboBox-en", new DataGridMultiColumnComboBoxLocalizationJa()); - - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - - -
- ); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - this.grid.actualDataSource.isSectionExpandedDefault = true; - } - - public onCountryColumnRef = (column: IgrComboBoxColumn) => { - if (!column) { return; } - - this.comboColumn = column; - } - - public componentDidMount() { - window.addEventListener('load', this.onLoad); - } - - public onLoad = () => { - - this.data.forEach(sales => { - if (!this.countryLookup.has(sales.Countries)) { - this.countryLookup.set(sales.Countries, sales); - this.countryList.push(sales); - } - }); - - const productGroup = new IgrColumnGroupDescription(); - productGroup.field = "ProductName"; - productGroup.displayName = "商品名"; - this.grid.groupDescriptions.add(productGroup); - - const productCount = new IgrColumnSummaryDescription(); - productCount.field = "ProductName"; - productCount.displayName = "商品名" - productCount.operand = DataSourceSummaryOperand.Count; - this.grid.summaryDescriptions.add(productCount); - - const priceMin = new IgrColumnSummaryDescription(); - priceMin.field = "BundlePrice"; - priceMin.displayName = "価格" - priceMin.operand = DataSourceSummaryOperand.Min; - priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMin); - - const priceMax = new IgrColumnSummaryDescription(); - priceMax.field = "BundlePrice"; - priceMax.displayName = "価格"; - priceMax.operand = DataSourceSummaryOperand.Max; - priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMax); - - const orderSum = new IgrColumnSummaryDescription(); - orderSum.field = "OrderItems"; - orderSum.displayName = "アイテムを注文する"; - orderSum.operand = DataSourceSummaryOperand.Sum; - this.grid.summaryDescriptions.add(orderSum); - - const orderValueSum = new IgrColumnSummaryDescription(); - orderValueSum.field = "OrderValue"; - orderValueSum.displayName = "オーダー値"; - orderValueSum.operand = DataSourceSummaryOperand.Sum; - orderValueSum.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0}); - this.grid.summaryDescriptions.add(orderValueSum); - - const orderValueAvg = new IgrColumnSummaryDescription(); - orderValueAvg.field = "OrderValue"; - orderValueAvg.displayName = "オーダー値"; - orderValueAvg.operand = DataSourceSummaryOperand.Average; - orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(orderValueAvg); - - const orderDateMin = new IgrColumnSummaryDescription(); - orderDateMin.field = "OrderDate"; - orderDateMin.displayName = "注文日"; - orderDateMin.operand = DataSourceSummaryOperand.Min; - orderDateMin.calculatorDisplayName = "First" - orderDateMin.formatOverride = new Intl.DateTimeFormat('en-EN'); - this.grid.summaryDescriptions.add(orderDateMin); - - const orderDateMax = new IgrColumnSummaryDescription(); - orderDateMax.field = "OrderDate"; - orderDateMax.displayName = "注文日"; - orderDateMax.operand = DataSourceSummaryOperand.Max; - orderDateMax.calculatorDisplayName = "Last" - orderDateMax.formatOverride = new Intl.DateTimeFormat('en-EN'); - this.grid.summaryDescriptions.add(orderDateMax); - - const sum1 = new IgrColumnSummaryDescription(); - sum1.field = "Profit"; - sum1.displayName = "利益"; - sum1.operand = DataSourceSummaryOperand.Sum; - sum1.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(sum1); - - const avg2 = new IgrColumnSummaryDescription(); - avg2.field = "Profit"; - avg2.displayName = "利益"; - avg2.operand = DataSourceSummaryOperand.Average; - avg2.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(avg2); - - } - -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Resource Strings - -This is the full list of strings to localize the grid. - -### Column Option Strings - -- Apply -- Cancel -- Clear_Column_Filter -- Column_Move -- Column_Move_Left -- Column_Move_Right -- Column_Pin -- Column_Pin_Left -- Column_Pin_Right -- Column_Sort -- Column_Sort_Ascending -- Column_Sort_Descending -- Filter_Columns_List -- Search -- Select_All -- ComparisonOperator_Bottom -- ComparisonOperator_BottomPercentile -- ComparisonOperator_Contains -- ComparisonOperator_DoesNotContain -- ComparisonOperator_DoesNotEndWith -- ComparisonOperator_DoesNotMatch -- ComparisonOperator_DoesNotStartWith -- ComparisonOperator_Empty -- ComparisonOperator_EndsWith -- ComparisonOperator_Equals -- ComparisonOperator_False -- ComparisonOperator_GreaterThan -- ComparisonOperator_GreaterThanOrEqualTo -- ComparisonOperator_LastMonth -- ComparisonOperator_LastQuarter -- ComparisonOperator_LastWeek -- ComparisonOperator_LastYear -- ComparisonOperator_LessThan -- ComparisonOperator_LessThanOrEqualTo -- ComparisonOperator_NextMonth -- ComparisonOperator_NextQuarter -- ComparisonOperator_NextWeek -- ComparisonOperator_NextYear -- ComparisonOperator_NotEmpty -- ComparisonOperator_NotEquals -- ComparisonOperator_StartsWith -- ComparisonOperator_ThisMonth -- ComparisonOperator_ThisQuarter -- ComparisonOperator_ThisWeek -- ComparisonOperator_ThisYear -- ComparisonOperator_Today -- ComparisonOperator_Tomorrow -- ComparisonOperator_Top -- ComparisonOperator_TopPercentile -- ComparisonOperator_True -- ComparisonOperator_Yesterday -- Column_Options_Summary_Average -- Column_Options_Summary_Count -- Column_Options_Summary_Maximum -- Column_Options_Summary_Minimum -- Column_Options_Summary_Sum -- Column_Options_Summaries - -### Summary Strings - -- DataSource_Summary_Avg -- DataSource_Summary_Count -- DataSource_Summary_Max -- DataSource_Summary_Min -- DataSource_Summary_Sum - -### Date-Time Column Strings - -- January_Full -- January_Short -- February_Full -- February_Short -- March_Full -- March_Short -- April_Full -- April_Short -- May_Full -- May_Short -- June_Full -- June_Short -- July_Full -- July_Short -- August_Full -- August_Short -- September_Full -- September_Short -- October_Full -- October_Short -- November_Full -- November_Short -- December_Full -- December_Short -- Monday_Full -- Monday_Short -- Monday_Single -- Thursday_Single -- Today -- Tuesday_Full -- Tuesday_Short -- Tuesday_Single -- Wednesday_Full -- Wednesday_Short -- Wednesday_Single -- Thursday_Full -- Thursday_Short -- Friday_Full -- Friday_Short -- Friday_Single -- Saturday_Full -- Saturday_Short -- Saturday_Single -- Sunday_Full -- Sunday_Short -- Sunday_Single - -### ComboBox Column Strings - -- NoMatches - -## API References - -- `ActualDataSource` -- `SetCustomizedStringAsync` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-overview.md deleted file mode 100644 index 75b25baaf..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-overview.md +++ /dev/null @@ -1,841 +0,0 @@ ---- -title: React Data Grid Component | Real-Time React Tables | Infragistics -_description: Infragistics' React grid component helps you create a fast, real-time react data grid. Learn how Ignite UI for React can help you better display your data! -_keywords: React Table, Data Grid, overview, Ignite UI for React, data binding, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Table / Grid ---- - -# React Data Grid Overview - -The Ignite UI for React Data Table / Data Grid is a tabular React grid component that allows you to quickly bind and display your data with little coding or configuration. Features of the React data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The React tables are optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns. - -## React Data Grid Example - -This demo implements some of the features that are available in the Grid: -Filtering, Grouping, Pin/Unpin columns, Reposition columns, Sorting, and Summaries - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -.gridSparklineContainer { - background: transparent; - height: 100%; - width: 100%; - margin-top: 10px; - margin-bottom: 0px; - padding: 0px; - vertical-align: middle; -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import "./DataGridStyles.css"; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbarModule } from "igniteui-react-data-grids"; -import { IgrDataGridToolbar } from "igniteui-react-data-grids"; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn } from 'igniteui-react-data-grids'; -import { IgrTemplateCellUpdatingEventArgs } from 'igniteui-react-data-grids'; -import { IgrTemplateCellInfo } from 'igniteui-react-data-grids'; -import { IIgrCellTemplateProps } from 'igniteui-react-data-grids'; -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrColumnSummaryDescription } from 'igniteui-react-data-grids' -import { DataSourceSummaryOperand } from 'igniteui-react-core'; -import { IgrSparkline } from 'igniteui-react-charts'; -import { IgrSparklineModule } from 'igniteui-react-charts'; - -IgrDataGridModule.register(); -IgrDataGridToolbarModule.register(); -IgrGridColumnOptionsModule.register(); -IgrSparklineModule.register(); - -export default class DataGridOverview extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - public toolbar: IgrDataGridToolbar; - - constructor(props: any) { - super(props); - - this.data = DataGridSharedData.getEmployees(100); - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - - - - - - - - - - - {/* */} - - {/* */} - - - -
- ); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - this.grid.actualDataSource.isSectionExpandedDefault = true; - - if (this.toolbar !== null) { - this.toolbar.targetGrid = this.grid; - } - } - - public onToolbarRef = (toolbar: IgrDataGridToolbar) => { - this.toolbar = toolbar; - if (this.toolbar !== null) { - this.toolbar.targetGrid = this.grid; - } - } - - public componentDidMount() { - - const peopleGroup = new IgrColumnGroupDescription(); - peopleGroup.field = "Country"; - peopleGroup.displayName = "Country"; - this.grid.groupDescriptions.add(peopleGroup); - - const incomeGroup = new IgrColumnGroupDescription(); - incomeGroup.field = "Income"; - incomeGroup.displayName = "Income"; - this.grid.groupDescriptions.add(incomeGroup); - - const peopleCount = new IgrColumnSummaryDescription(); - peopleCount.field = "Photo"; - peopleCount.operand = DataSourceSummaryOperand.Count; - this.grid.summaryDescriptions.add(peopleCount); - - const sales = new IgrColumnSummaryDescription(); - sales.field = "Sales"; - sales.operand = DataSourceSummaryOperand.Max; - sales.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(sales); - - const salary = new IgrColumnSummaryDescription(); - salary.field = "Salary"; - salary.operand = DataSourceSummaryOperand.Average; - salary.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(salary); - } - - public getProductivityChart = (props: IIgrCellTemplateProps) => { - const info = props.dataContext as IgrTemplateCellInfo; - return ( -
- -
- ); - } - - public onAddressCellUpdating = (s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - let span1: HTMLSpanElement | null = null; - let span2: HTMLSpanElement | null = null; - const info = e.cellInfo as IgrTemplateCellInfo; - const item = info.rowItem; - - if (content.childElementCount === 0) { - - span1 = document.createElement("span"); - span2 = document.createElement("span"); - - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - content.style.verticalAlign = "center"; - content.style.lineHeight = "normal"; - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.justifyContent = "center"; - content.style.height = "100%"; - content.style.width = "100%"; - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0] as HTMLSpanElement; - span2 = content.children[1] as HTMLSpanElement; - } - - if (span1 && span2) { - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } - } - - public onSalesCellUpdating = (s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - const info = e.cellInfo as IgrTemplateCellInfo; - const sales = info.rowItem.Sales; - let gaugeValue: HTMLSpanElement | null = null; - let gaugeBar: HTMLDivElement | null = null; - - if (content.childElementCount === 0) { - gaugeValue = document.createElement("span"); - gaugeValue.style.margin = "0px"; - gaugeValue.style.marginTop = "2px"; - gaugeValue.style.padding = "0px"; - gaugeValue.style.fontFamily = "Verdana"; - gaugeValue.style.fontSize = "13px"; - gaugeValue.style.textAlign = "center"; - - gaugeBar = document.createElement("div"); - gaugeBar.style.background = "#7f7f7f"; - gaugeBar.style.padding = "0px"; - gaugeBar.style.margin = "0px"; - gaugeBar.style.height = "6px"; - gaugeBar.style.left = "0px"; - gaugeBar.style.top = "0px"; - gaugeBar.style.position = "relative"; - - const gauge = document.createElement("div"); - gauge.style.background = "#dddddd"; - gauge.style.padding = "0px"; - gauge.style.margin = "0px"; - gauge.style.height = "6px"; - gauge.style.marginTop = "8px"; - gauge.style.width = "100%"; - gauge.appendChild(gaugeBar); - - content.style.verticalAlign = "center"; - content.style.lineHeight = "normal"; - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.justifyContent = "center"; - content.style.height = "100%"; - content.style.width = "calc(100% - 2rem)"; - content.style.marginRight = "1rem"; - content.style.marginLeft = "1rem"; - - content.appendChild(gauge); - content.appendChild(gaugeValue); - } else { - const gauge = content.children[0]; - gaugeBar = gauge.children[0] as HTMLDivElement; - gaugeValue = content.children[1] as HTMLSpanElement; - } - - // conditional formatting: - if (sales < 400000) { - gaugeValue.style.color = "rgb(211, 17, 3)"; - gaugeBar.style.background = "rgb(211, 17, 3)"; - } - else if (sales < 650000) { - gaugeValue.style.color = "Orange"; - gaugeBar.style.background = "Orange"; - } - else { - gaugeValue.style.color = "rgb(21, 190, 6)"; - gaugeBar.style.background = "rgb(21, 190, 6)"; - } - gaugeValue.textContent = "$" + sales / 1000 + ",000"; - - let gaugeWidth = (sales / 990000) * 100; - gaugeWidth = Math.min(100, gaugeWidth); - gaugeBar.style.width = gaugeWidth + "%"; - } - - public onEmailCellUpdating = (s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - const info = e.cellInfo as IgrTemplateCellInfo; - const item = info.rowItem; - let link: HTMLAnchorElement; - - if (content.childElementCount === 0) { - link = document.createElement("a"); - - content.style.verticalAlign = "center"; - content.style.marginTop = "15px"; - content.style.lineHeight = "normal"; - content.style.display = "inline-grid"; - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - content.style.color = "#4286f4"; - content.style.width = "100%"; - - content.appendChild(link); - } else { - link = content.children[0] as HTMLAnchorElement; - } - - link.href = "mailto:" + item.Email + "?Subject=Hello%20Friend"; - link.textContent = item.Email; - } - - public onPhoneCellUpdating = (s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - - const info = e.cellInfo as IgrTemplateCellInfo; - const item = info.rowItem; - let link: HTMLAnchorElement; - - if (content.childElementCount === 0) { - - link = document.createElement("a"); - - content.style.verticalAlign = "center"; - content.style.marginTop = "15px"; - content.style.lineHeight = "normal"; - content.style.display = "inline-block"; - // content.style.display = "inline-grid"; - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - content.style.color = "#4286f4"; - content.style.width = "100%"; - - content.appendChild(link); - } else { - link = content.children[0] as HTMLAnchorElement; - } - - link.href = "tel:" + item.Phone; - link.textContent = item.Phone; - } - -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Getting Started - -### Dependencies - -When installing the React grid package, the core package must also be installed. - -```cmd -npm install --save igniteui-react-core -npm install --save igniteui-react-grids -npm install --save igniteui-react-inputs -``` - -### Component Modules - -The [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) requires the following modules: - -```ts -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -``` - -
- -### Optional Modules - -The optional [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) features, seen above, requires the following modules: - -```ts -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbarModule } from "igniteui-react-data-grids"; -import { IgrSparklineModule } from 'igniteui-react-charts'; - -IgrGridColumnOptionsModule.register(); -IgrDataGridToolbarModule.register(); -IgrSparklineModule.register(); -``` - -
- -### Sample Data Source - -Now that the React data grid module is imported, next is the basic configuration of the React grid that binds to local data. - -```ts - this.data = [{ - Discontinued: false, - OrderDate: new Date("2012-02-12"), - ProductID: 1, - ProductName: "Chai", - QuantityPerUnit: "10 boxes x 20 bags", - ReorderLevel: 10, - UnitPrice: 18.0000, - UnitsInStock: 39 - }, { - Discontinued: false, - OrderDate: new Date("2003-03-17"), - ProductID: 2, - ProductName: "Chang", - QuantityPerUnit: "24 - 12 oz bottles", - ReorderLevel: 25, - UnitPrice: 19.0000, - UnitsInStock: 17 - }, { - Discontinued: false, - OrderDate: new Date("2006-03-17"), - ProductID: 3, - ProductName: "Aniseed Syrup", - QuantityPerUnit: "12 - 550 ml bottles", - ReorderLevel: 25, - UnitPrice: 10.0000, - UnitsInStock: 13 - }, { - Discontinued: false, - OrderDate: new Date("2016-03-17"), - ProductID: 4, - ProductName: "Chef Antony Cajun Seasoning", - QuantityPerUnit: "48 - 6 oz jars", - ReorderLevel: 0, - UnitPrice: 22.0000, - UnitsInStock: 53 - }, { - Discontinued: true, - OrderDate: new Date("2011-11-11"), - ProductID: 5, - ProductName: "Chef Antony Gumbo Mix", - QuantityPerUnit: "36 boxes", - ReorderLevel: 0, - UnitPrice: 21.3500, - UnitsInStock: 0 - }]; -``` - -### Auto-Generate Columns - -The following code demonstrates how to bind the React data grid to the above local data. - -```tsx - -``` - -### Manually Define Columns - -```tsx - - - - - - - -``` - -### Styling Columns - -The following code demonstrates how to style specific columns using the provided column's properties. - -```tsx - -``` - -## Additional Resources - -- [Accessibility Compliance](accessibility.md) -- [Cell Activation](cell-activation.md) -- [Grid Editing](cell-editing.md) -- [Cell Selection](cell-selection.md) -- [Column Animation](column-animation.md) -- [Column Chooser](column-chooser.md) -- [Column Filtering](column-filtering.md) -- [Column Moving](column-moving.md) -- [Column Options](column-options.md) -- [Column Resizing](column-resizing.md) -- [Column Sorting](column-sorting.md) -- [Column Types](column-types.md) -- [Performance](performance.md) -- [Row Pinning](row-pinning.md) -- [Row Grouping](row-grouping.md) -- [Row Highlighting](row-highlighting.md) - - - - - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-performance.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-performance.md deleted file mode 100644 index b7d972b7a..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-performance.md +++ /dev/null @@ -1,634 +0,0 @@ ---- -title: React Data Grid | Performance | Infragistics -_description: Use the Infragistics' React table for high performance data scenarios. Scroll through an unlimited number of rows and columns with full virtualization. View Ignite UI for React table tutorials! -_keywords: React Table, Data Grid, performance, Ignite UI for React, Infragistics, data binding -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: High Performance -_premium: true ---- - -# React High Performance with Live Data - -The Ignite UI for React Data Table / Data Grid is optimized for high-performance with live data scenarios. With fast load time, smooth scrolling with zero lag time or screen flicker, you can seamlessly scroll through an unlimited number of rows and columns in your React data grid application with full virtualization of grid's columns and rows. - -## React High Performance with Live Data Example - -This sample demonstrates this performance by binding thousands of financial records to the React data grid, grouping them by 1 column (eg. Territory), and live-updating multiple columns every couple of milliseconds. You can change various options in real-time and the Data Grid performance with no lag, screen flicker, or visual delay - -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridColumn } from 'igniteui-react-data-grids'; -import { IgrCellStyleRequestedEventArgs } from 'igniteui-react-data-grids'; -import { IgrDataBindingEventArgs } from 'igniteui-react-data-grids'; -import { HeaderClickAction } from 'igniteui-react-data-grids'; -import { DataGridSelectionMode } from 'igniteui-react-data-grids'; -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn, IIgrCellTemplateProps } from 'igniteui-react-data-grids'; -import { IgrTemplateCellUpdatingEventArgs } from 'igniteui-react-data-grids'; -import { IgrTemplateCellInfo } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); - -export default class DataGridPerformance extends React.Component { - - public constructor(props: any) { - super(props); - - this.data = this.generateSalesPeople(8000); - - for (let i = 0; i < this.kpiColumnCount; i++) { - this.kpiColumns.push("KPI_" + i); - } - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - } - - public kpiColumns: string[] = []; - public kpiColumnCount: number = 43; - public data: SalesPerson[]; - public colorIncreasing = "#4EB862"; - public colorDecreasing = "#FF134A"; - public grid: IgrDataGrid; - - public onPriceStyleKey = (grid: any, args: IgrCellStyleRequestedEventArgs) => { - let row: SalesPerson; - if (this.grid) { - row = this.grid.actualDataSource.getItemAtIndex(args.rowNumber); - } else { - row = this.data[args.rowNumber]; - } - if (row.Change >= 0) { - args.styleKey = "priceShiftUp"; - } else { - args.styleKey = "priceShiftDown"; - } - } - - public onPriceCellUpdating = (grid: any, args: IgrTemplateCellUpdatingEventArgs) => { - let row = args.cellInfo.rowItem; - let priceShiftUp = row.Change >= 0; - let template = args.cellInfo as IgrTemplateCellInfo; - - let content = args.content as HTMLDivElement; - let sp: HTMLSpanElement | null = null; - let icon: HTMLSpanElement | null = null; - - if (content.childElementCount > 0) { - sp = content.children[0] as HTMLSpanElement; - icon = content.children[1] as HTMLSpanElement; - } else { - content.style.textAlign = "right"; - sp = document.createElement("span"); - icon = document.createElement("span"); - sp.style.font = "13px Verdana"; - sp.style.verticalAlign = "center"; - content.appendChild(sp); - content.appendChild(icon); - icon.style.fontFamily = "Material Icons"; - icon.style.fontSize = "13px"; - icon.style.fontFeatureSettings = "liga"; - icon.style.verticalAlign = "center"; - } - - sp.textContent = "$" + (+template.value).toFixed(2); - - if ((sp as any).__isUp === undefined || - (sp as any).__isUp !== priceShiftUp) { - (sp as any).__isUp = priceShiftUp; - if (priceShiftUp) { - // icon.textContent = "trending_up"; - icon.style.color = this.colorIncreasing; - sp.style.color = this.colorIncreasing; - } else { - // icon.textContent = "trending_down"; - icon.style.color = this.colorDecreasing; - sp.style.color = this.colorDecreasing; - } - } - } - - public onPricePercentStyleKey = (grid: any, args: IgrCellStyleRequestedEventArgs) => { - if (args.resolvedValue >= 0) { - args.styleKey = "pricePercentUp"; - } else { - args.styleKey = "pricePercentDown"; - } - } - - public borderDecreasing = "4px solid #FF134A"; - public borderIncreasing = "4px solid #4EB862"; - - public onPricePercentCellUpdating = (grid: any, args: IgrTemplateCellUpdatingEventArgs) => { - let template = args.cellInfo as IgrTemplateCellInfo; - let priceShiftUp = template.value >= 0; - - let content = args.content as HTMLDivElement; - let sp: HTMLSpanElement | null = null; - - if (content.childElementCount > 0) { - sp = content.children[0] as HTMLSpanElement; - } else { - content.style.textAlign = "right"; - sp = document.createElement("span"); - sp.style.font = "13px Verdana"; - sp.style.verticalAlign = "center"; - content.appendChild(sp); - } - - sp.textContent = (+template.value).toFixed(2) + "%"; - if ((sp as any).__isUp === undefined || - (sp as any).__isUp !== priceShiftUp) { - (sp as any).__isUp = priceShiftUp; - if (priceShiftUp) { - sp.style.paddingRight = "5px"; - sp.style.borderRight = this.borderIncreasing; - // sp.style.color = this.colorIncreasing; - } else { - sp.style.paddingRight = "5px"; - sp.style.borderRight = this.borderDecreasing; - // sp.style.color = this.colorDecreasing; - } - } - } - - public onPriceAmountStyleKey = (grid: any, args: IgrCellStyleRequestedEventArgs) => { - if (args.resolvedValue >= 0) { - args.styleKey = "priceAmountUp"; - } else { - args.styleKey = "priceAmountDown"; - } - } - - public onPriceAmountCellUpdating = (grid: any, args: IgrTemplateCellUpdatingEventArgs) => { - let template = args.cellInfo as IgrTemplateCellInfo; - let priceShiftUp = template.value >= 0; - - let content = args.content as HTMLDivElement; - let sp: HTMLSpanElement | null = null; - - if (content.childElementCount > 0) { - sp = content.children[0] as HTMLSpanElement; - } else { - content.style.textAlign = "right"; - sp = document.createElement("span"); - sp.style.font = "13px Verdana"; - sp.style.verticalAlign = "center"; - content.appendChild(sp); - } - - sp.textContent = (+template.value).toFixed(2); - - if ((sp as any).__isUp === undefined || - (sp as any).__isUp !== priceShiftUp) { - (sp as any).__isUp = priceShiftUp; - if (priceShiftUp) { - sp.style.paddingRight = "5px"; - sp.style.borderRight = this.borderIncreasing; - // sp.style.color = this.colorIncreasing; - } else { - sp.style.paddingRight = "5px"; - sp.style.borderRight = this.borderDecreasing; - // sp.style.color = this.colorDecreasing; - } - } - } - - public onChartStyleKey = (grid: any, args: IgrCellStyleRequestedEventArgs) => { - args.styleKey = "container"; - } - - public onChartCellUpdating = (grid: any, args: IgrTemplateCellUpdatingEventArgs) => { - let template = args.cellInfo as IgrTemplateCellInfo; - - let content = args.content as HTMLDivElement; - let icon: HTMLSpanElement | null = null; - - if (content.childElementCount > 0) { - icon = content.children[0] as HTMLSpanElement; - icon.onclick = (e) => { - // console.log("chart clicked!!") - e.stopPropagation(); - } - } else { - icon = document.createElement("span"); - content.appendChild(icon); - icon.style.fontFamily = "Material Icons"; - icon.style.fontSize = "13px"; - icon.style.fontFeatureSettings = "liga"; - icon.style.verticalAlign = "center"; - icon.textContent = "insert_chart_outlined"; - } - } - - public onGridStyleKey = (grid: any, args: IgrCellStyleRequestedEventArgs) => { - args.styleKey = "grid"; - } - - public onGridCellUpdating = (grid: any, args: IgrTemplateCellUpdatingEventArgs) => { - let template = args.cellInfo as IgrTemplateCellInfo; - - let content = args.content as HTMLDivElement; - let icon: HTMLSpanElement | null = null; - - if (content.childElementCount > 0) { - icon = content.children[0] as HTMLSpanElement; - icon.onclick = (e) => { - // console.log("grid clicked!!") - e.stopPropagation(); - } - } else { - icon = document.createElement("span"); - content.appendChild(icon); - icon.style.fontFamily = "Material Icons"; - icon.style.fontSize = "13px"; - icon.style.fontFeatureSettings = "liga"; - icon.style.verticalAlign = "center"; - icon.textContent = "table_chart"; - } - } - - public TestTemplateContent = (props: IIgrCellTemplateProps) => { - let template = props.dataContext as IgrTemplateCellInfo; - let font = template.font; - return ( -
- -
- ); - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - - - - - - - - - { - this.kpiColumns.map(function (i) { - return ( ) - }) - } - - -
- ); - } - - public componentDidMount() { - let g = new IgrColumnGroupDescription(); - g.field = "Territory"; - this.grid.groupDescriptions.add(g); - - for (let i = 0; i < this.kpiColumnCount; i++) { - (() => { - let currVal = i; - this.grid.forColumnsWithPropertyPath("KPI_" + currVal, (col: IgrDataGridColumn) => { - col.cellStyleKeyRequested = (sender: any, args: IgrCellStyleRequestedEventArgs) => { - let value = args.resolvedValue; - if (value < 20.0) { - args.styleKey = "kpi_red"; - } else if (value > 80.0) { - args.styleKey = "kpi_green"; - } - }; - - col.dataBound = (sender: any, args: IgrDataBindingEventArgs) => { - let value = args.resolvedValue; - if (value < 20.0) { - if (args.cellInfo.background !== "red") { - args.cellInfo.background = this.colorDecreasing; - } - } - - if (value > 80.0) { - if (args.cellInfo.background !== "green") { - args.cellInfo.background = this.colorIncreasing; - } - } - }; - }); - })(); - } - - this.grid.forColumnsWithPropertyPath("AvgSale", (col: IgrDataGridColumn) => { - col.dataBound = (sender: any, args: IgrDataBindingEventArgs) => { - let item: any = args.cellInfo.rowItem; - if (item !== null) - { - if (item.AvgSaleHeat > 0) - { - let p = +item.AvgSaleHeat; - let toA = 1.0; - let fromA = 1.0; - let toR = 0.0; - let fromR = 1.0; - let toG = 1.0; - let fromG = 1.0; - let toB = 0.0; - let fromB = 1.0; - - let aByte = fromA + (toA - fromA) * p; - let rByte = Math.round((fromR + (toR - fromR) * p) * 255.0); - let gByte = Math.round((fromG + (toG - fromG) * p) * 255.0); - let bByte = Math.round((fromB + (toB - fromB) * p) * 255.0); - - let colorString = "rgba(" + rByte + "," + gByte + "," + bByte + "," + aByte + ")"; - args.cellInfo.background = colorString; - } - else if (item.AvgSaleHeat < 0) { - let p = +item.AvgSaleHeat * -1.0; - let toA = 1.0; - let fromA = 1.0; - let toR = 1.0; - let fromR = 1.0; - let toG = 0.0; - let fromG = 1.0; - let toB = 0.0; - let fromB = 1.0; - - let aByte = fromA + (toA - fromA) * p; - let rByte = Math.round((fromR + (toR - fromR) * p) * 255.0); - let gByte = Math.round((fromG + (toG - fromG) * p) * 255.0); - let bByte = Math.round((fromB + (toB - fromB) * p) * 255.0); - - let colorString = "rgba(" + rByte + "," + gByte + "," + bByte + "," + aByte + ")"; - - args.cellInfo.background = colorString; - } - else - { - let colorString = "white"; - args.cellInfo.background = colorString; - } - } - }; - }); - - window.setTimeout(this.tick, 16); - } - - public lastDataUpdate: Date = new Date(); - public interval: number = 100; - - private randomizeItem(item: SalesPerson) { - item.Change = Math.random() * 40.0 - 20.0; - let prevSale = item.AvgSale; - - item.AvgSale += item.Change; - item.PercentChange = ((item.AvgSale / prevSale) * 100.0); - } - - private tick = () => - { - let sortedBySales = false; - // foreach (let item in grid.SortDescriptions) - // { - // if (item.PropertyName === "YearToDateSales") - // { - // sortedBySales = true; - // } - // } - - let toChange = 200; - let toChangeIndexes: any = {}; - let stillAnimating = false; - for (let i = 0; i < this.data.length; i++) - { - let item = this.data[i]; - if (item.AvgSaleHeat !== 0) - { - stillAnimating = true; - } - } - - let now = new Date(); - let intervalElapsed = false; - if ((+now - +this.lastDataUpdate) > this.interval) { - intervalElapsed = true; - } - - let useClear = false; - let sortingByAvgSale = false; - for (let i = 0; i < this.grid.sortDescriptions.count; i++) { - if (this.grid.sortDescriptions.item(i).field === "AvgSale" || - this.grid.sortDescriptions.item(i).field.indexOf("Change") >= 0) { - sortingByAvgSale = true; - } - } - - let changing = false; - if (intervalElapsed) - { - this.lastDataUpdate = new Date(); - for (let i = 0; i < toChange; i++) - { - let index = Math.round(Math.random() * this.data.length - 1); - while (toChangeIndexes[index.toString()] !== undefined) - { - index = Math.round(Math.random() * this.data.length - 1); - } - toChangeIndexes[index.toString()] = true; - changing = true; - } - } - - for (let i = 0; i < this.data.length; i++) - { - let item = this.data[i]; - if (toChangeIndexes[i.toString()] !== undefined) - { - if (sortingByAvgSale && !useClear) { - - this.grid.notifyRemoveItem(i, item); - this.randomizeItem(item); - this.grid.notifyInsertItem(i, item); - } else { - this.randomizeItem(item); - } - - if (item.Change > 0) { - // item.YearToDateSales += Math.round(Math.random() * 4.0); - item.AvgSaleHeat = 1; - } else { - item.AvgSaleHeat = -1; - } - } - else - { - if (item.AvgSaleHeat > 0) - { - item.AvgSaleHeat -= .06; - if (item.AvgSaleHeat < 0) - { - item.AvgSaleHeat = 0; - } - } - if (item.AvgSaleHeat < 0) { - item.AvgSaleHeat += .06; - if (item.AvgSaleHeat > 0) { - item.AvgSaleHeat = 0; - } - } - } - } - - if (sortingByAvgSale && useClear) { - this.grid.actualDataSource.queueAutoRefresh(); - } - - // if (!sortingByPrice) { - // if (!useClear) { - if (!sortingByAvgSale || !intervalElapsed) { - this.grid.invalidateVisibleRows(); - } - // } - // } - // this.grid.invalidateVisibleRows(); - // actualDataSource.queueAutoRefresh(); - - window.setTimeout(() => this.tick(), 16); - } - - private generateSalesPeople(num: number) { - let firstNames = [ - "Kyle", "Gina", "Irene", "Katie", "Michael", "Oscar", "Ralph", "Frank", "William", "Bill", - "Daniel", "Frank", "Brenda", "Henry", "Fiona", "Howard", "Jack", "Larry", "Holly", - "Bob", "Liz", "Pete", "Steve", "Mark", "Henry" - ]; - - let lastNames = ['Smith', 'Johnson', 'Mendoza', 'Brown', 'Spencer', 'Stone', 'Stark', 'Rooney'];; - - let territories = [ - "Australia", "Canada", "Egypt", "Greece", "Italy", "Kenya", "Mexico", "Oman", "Qatar", - "Sweden", "Uruguay", "Yemen", "Bulgaria", "Denmark", "France", "Hungary", "Japan", - "Latvia", "Netherlands", "Portugal", "Russia", "Turkey", "Venezuela", "Zimbabwe" - ]; - - let items = []; - for (let i = 0; i < num; i++) - { - let item = new SalesPerson(); - let firstIndex = Math.round(Math.random() * (firstNames.length - 1)); - item.Index = i; - item.FirstName = firstNames[firstIndex]; - item.LastName = lastNames[Math.round(Math.random() * (lastNames.length - 1))]; - item.Name = item.FirstName + item.LastName; - - let randomIndex = Math.round(Math.random() * (firstNames.length - 1)); - if (randomIndex === 0) - randomIndex = 1; - - item.Territory = territories[Math.round(Math.random() * (territories.length - 1))]; - item.AvgSale = Math.round(Math.random() * 800) + 200.0; - item.Change = Math.random() * 40.0 - 20.0; - item.PercentChange = 0; - item.YearToDateSales = Math.round(Math.random() * 50000); - - item.DateValue = new Date(); - item.DateValue.setDate(item.DateValue.getDate() + Math.round(Math.random() * 500)) - - for (let j = 0; j < this.kpiColumnCount; j++) { - let kpi: string = "KPI_" + j; - item[kpi] = Math.round(Math.random() * 100.0); - } - - items.push(item); - } - - return items; - } - - private getRandomInt(min: number, max: number) { - return Math.floor(Math.random() * (max - min + 1)) + min; - } - -} -export class SalesPerson { - [key: string]: any; - public FirstName: string; - public LastName: string; - public Name: string; - public Territory: string; - public Index: number; - public AvgSale: number; - public AvgSaleHeat: number; - public Change: number; - public PercentChange: number; - public YearToDateSales: number; - public DateValue: Date; -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Additional Resources - - - - - -- [Column Types](column-types.md) -- [Row Grouping](row-grouping.md) - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-grouping.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-grouping.md deleted file mode 100644 index 85a78d28b..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-grouping.md +++ /dev/null @@ -1,844 +0,0 @@ ---- -title: React Data Grid | Row Grouping | Infragistics -_description: Use Infragistics' React grid component's Group Row feature to group rows into a sticky header Row Group. This is an easy way to visually group data based on your criteria. Check out Ignite UI for React table demos! -_keywords: React Table, Data Grid, row grouping, groupby area, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/groupby -_tocName: Row Grouping -_premium: true ---- - -# React Row Grouping - -The Ignite UI for React Data Table / Data Grid lets you group rows into a ‘sticky header’ Row Group. This is similar to the Group By feature in Microsoft Outlook, which is an easy way to visually group data based on your own criteria. - -## React Row Group-By Area Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridRowGrouping extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - this.data = DataGridSharedData.getEmployees(50); - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Group-By Area - -Set [`isGroupByAreaVisible`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#isGroupByAreaVisible) property on the DataGrid to True, as shown in the example above, to the user interface. The group-by area allows users more options to group and sort columns without interact when interacting the DataGrid indirectly. Groups can be positioned and reordered based on the users needs. This area also populates when columns are programmatically added as [`groupDescriptions`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#groupDescriptions) on the DataGrid as well. - -## Using Group Descriptions Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridRowGrouping extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { componentVisible: true, isGroupCollapsible: true } - this.data = DataGridSharedData.getEmployees(50); - } - - public render(): JSX.Element { - return ( -
-
- - -
- - - - - - - - - - -
- ); - } - - public onGroupHeaderCollapsible = (e: any) =>{ - const isCollapsible = e.target.checked; - - if (isCollapsible) { - this.setState( {isGroupCollapsible: true} ); - } - else { - this.setState( {isGroupCollapsible: false} ); - } - } - - public onSectionHeaderDisplayModeChanging = (e: any) => { - this.grid.groupHeaderDisplayMode = e.target.value; - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - this.grid.actualDataSource.isSectionExpandedDefault = true; - } - - public componentDidMount() { - window.addEventListener('load', this.onLoad); - } - - public onLoad = () => { - const country = new IgrColumnGroupDescription(); - country.field = "Country"; - country.displayName = "Location"; - const city = new IgrColumnGroupDescription(); - city.field = "City"; - city.displayName = ""; - const income = new IgrColumnGroupDescription(); - income.field = "Income"; - income.displayName = "Income"; - this.grid.groupDescriptions.add(country); - this.grid.groupDescriptions.add(city); - this.grid.groupDescriptions.add(income); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Hierarchical Groups - -The [`groupHeaderDisplayMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#groupHeaderDisplayMode) property allows the groups to be hierarchical. By default, each group description that is added gets aggregated together. Setting the [`groupHeaderDisplayMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#groupHeaderDisplayMode) to `Split` will create a section header for ever group defined in [`groupDescriptions`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#groupDescriptions) property of the [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html). - - - -```ts -import { GroupHeaderDisplayMode } from 'igniteui-react-core'; - -public componentDidMount() { - // ... - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - -## Collapsible Groups - -Also, the [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) can display a toggle on each group section to allow the end user to expand or collapse the grouped data via the [`isGroupCollapsable`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#isGroupCollapsable) property. - - - -```ts -public componentDidMount() { - // ... - this.grid.isGroupCollapsable = true; -} -``` - -## Summary - -For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. - -```ts -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { ListSortDirection } from 'igniteui-react-core'; -import { GroupHeaderDisplayMode } from 'igniteui-react-core'; - -public componentDidMount() { - window.addEventListener('load', this.onLoad); -} - -public onLoad() { - const state = new IgrColumnGroupDescription(); - state.field = "Country"; - state.displayName = "Location"; - state.sortDirection = ListSortDirection.Descending; - const city = new IgrColumnGroupDescription(); - city.field = "City"; - city.displayName = ""; - const income = new IgrColumnGroupDescription(); - income.field = "Income"; - income.displayName = "Income"; - - this.grid.groupDescriptions.add(state); - this.grid.groupDescriptions.add(city); - this.grid.groupDescriptions.add(income); - - this.grid.isGroupCollapsable = true; - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) -- [`groupDescriptions`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#groupDescriptions) -- [`groupHeaderDisplayMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#groupHeaderDisplayMode) -- [`isGroupByAreaVisible`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#isGroupByAreaVisible) -- [`isGroupCollapsable`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#isGroupCollapsable) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-highlighting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-highlighting.md deleted file mode 100644 index ade1d5c0b..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-highlighting.md +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: React Data Grid | Row Highlighting | Infragistics -_description: Configuring the row highlight of the Infragistics' React data grid on mouse over. Learn how to configure row highlight for the Ignite UI for React table. -_keywords: React Table, Data Grid, row highlighting, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Row Highlighting -_premium: true ---- - -# React Grid Highlighting - -The Ignite UI for React Data Table / Data Grid supports configuring the appearance of row highlighting. - -## React Grid Highlighting Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -interface IRowHoverState { - hoverEnabled: boolean; - hoverColor: string; -} - -export default class DataGridRowHighlighting extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { hoverEnabled: true, - hoverColor: '' }; - this.data = DataGridSharedData.getEmployees(); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - } - - public render(): JSX.Element { - return ( -
-
- - -
- -
- - - -
- - - - - - - - - - - - -
- ); - } - - public onHoverChange = (args: any) => { - this.setState({ hoverEnabled: args.target.checked ? true : false }); - } - - public onHoverColorChange = (args: any) => { - this.setState({ hoverColor: args.target.value === "default" ? '' : args.target.value }); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Overview - -Highlighting records in the React data can be toggled by setting the [`isRowHoverEnabled`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#isRowHoverEnabled) boolean property of the React grid. Note, this is enabled by default. - -In addition, the color is configurable by setting the [`rowHoverBackground`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#rowHoverBackground) string property to a hex value. - -## Code Snippet - -The following demonstrates how to enable row highlighting on the React data grid and applies the color blue: - -```tsx - -``` - -## API References - -- [`isRowHoverEnabled`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#isRowHoverEnabled) -- [`rowHoverBackground`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#rowHoverBackground) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-paging.md deleted file mode 100644 index c7bb20801..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-paging.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: React grid/table pagination – Ignite UI for React  -_description: View Infragistics' React grid component's Pager, which was designed to take in an array of data and output portions of that data as a page. -_keywords: React Table, Data Grid, row, paging, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/paging -_tocName: Row Paging -_premium: true ---- - -# React Grid/Table Pagination - -Tabular table UIs are used commonly in many web products. Building a tabular table UI from scratch isn't easy, however, Ignite UI for React grid, creating a Table UI is simple, and binding large amounts of local or remote data to the React grid is easy. Since the grid is virtualized by default, you are not required to include table pagination to show large data sets. It is mainly used due to its most efficient ways of organizing complex data in the UI. With table pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without actually needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows / buttons that let users flip through pages, as demonstrated here: - -Row Paging is enabled within the Ignite UI for React Data Table / Data Grid by setting the [`isPagerVisible`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#isPagerVisible) property. In addition, you can limit the maximum number of visible rows by setting [`pageSize`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#pageSize). - -## React Row Paging Example - -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridPager extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { componentVisible: true } - this.initData(); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - const state = new IgrColumnGroupDescription(); - state.field = "Status"; - state.displayName = "Status"; - this.grid = grid; - this.grid.groupDescriptions.add(state); - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - - - - - -
- ); - } - - public getRandomDate(): Date { - const today: Date = new Date(); - const year: number = today.getFullYear(); - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - public getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - public getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - public getCountryFlag(country: string): string { - - const flag = 'https://dl.infragistics.com/x/img/flags/' + country + '.png' - return flag; - } - - public initData() { - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain",]; - const status: string[] = [ "Packing", "Shipped", "Delivered"] - const sales: any[] = []; - - for (let i = 0; i < 200; i++) { - const price = this.getRandomNumber(10000, 90000) / 100; - const items = this.getRandomNumber(4, 30); - const value = Math.round(price * items); - const margin = this.getRandomNumber(2, 5); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - Country: country, - CountryFlag: this.getCountryFlag(country), - Margin: margin, - OrderDate: this.getRandomDate(), - OrderItems: items, - OrderValue: value, - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - ProductPrice: price, - Profit: Math.round(profit), - Status: this.getRandomItem(status), - }); - } - - this.data = sales; - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Overview - -From a UX perspective, table pagination has pros and cons. According to a [recent article](https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php) on UX Matters, here is a breakdown of the good and the bad when it comes to table pagination. - -Table Pagination Benefits: - -- Limits user choice -- Clicks are measurable - -Table Pagination Negatives: - -- Users still have to scrolls -- Pagers work and behave differently from site to site -- Too many UI controls can be confusing -- Users perceive paging and slow and cumbersome -- Users may not notice pagination controls -- Page loading may be slow -- Users are confused whether actions apply to Page or entire set of data - -With the Ignite UI React grid, we allow the developer to add paging, however, as the grid has infinite scrolling built in by default, we recommend infinite (or virtual) scrolling vs. adding a pager to the grid. With virtualized, infinite scrolling as the default user experience, you get: - -- Best performance while still having control or how much data is ‘paged’ via the scrolling interaction -- Natural approach to scrolling all content -- All interactions are clear to the end user -- Maps to the natural interactions on a mobile UX - -## React Grid/Page Synchronization - -When users interact with the Grid like sorting and grouping, and you have enabled the React Pager on the grid, you need to use the following functions to ensure that the React Pagination data is synchronized with the React table display. - -- applySorts -- applyGroups -- applyFilters - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) -- [`isPagerVisible`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#isPagerVisible) -- [`pageSize`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html#pageSize) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-pinning.md deleted file mode 100644 index 9892d752e..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-row-pinning.md +++ /dev/null @@ -1,393 +0,0 @@ ---- -title: React Data Grid | Row Pinning | Infragistics -_description: Use Infragistics' React grid component's row pinning feature in order to lock row change row order with a rich and easy to use API. Check out Ignite UI for React table demos! -_keywords: React Table, Data Grid, row pinning, Ignite UI for React, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/row-pinning -_tocName: Row Pinning -_premium: true ---- - -# React Row Pinning - -The Ignite UI for React Data Table / Data Grid allows Row Pinning by either using keys or the underlying data source items. When a row is pinned, it will be duplicated at the top of the react data grid and remain fixed there with light gray background and its actual row will be rendered with low opacity. - -## React Row Pinning Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { DataGridSharedData } from './DataGridSharedData'; -// grid modules: -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrDateTimeColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrGridColumnOptionsModule.register(); - -export default class DataGridRowPinning extends React.Component { - - public data: any[]; - public grid: IgrDataGrid; - - constructor(props: any) { - super(props); - - this.state = { componentVisible: true }; - this.data = DataGridSharedData.getEmployees(); - } - - public render(): JSX.Element { - return ( -
- - - {/* */} - - - - - - - - - -
- ); - } - - public onGridRef = (grid: IgrDataGrid) => { - if (!grid) { return; } - - this.grid = grid; - this.grid.pinnedItems.add(this.data[2]); - this.grid.pinnedItems.add(this.data[4]); - } - -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -You can pin rows in the React data grid by adding the target row’s underlying data item to the pinnedItems collection of the React grid. - -## Code Snippet - -```ts -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - this.grid.pinnedItems.add(this.data[2]); - this.grid.pinnedItems.add(this.data[4]); -} -``` - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-type-comparison-table.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-type-comparison-table.md deleted file mode 100644 index c2f687eca..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-type-comparison-table.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: React Data Grid | Comparison Table | Data Binding | Infragistics -_description: Use Infragistics' React grid component to bind to comparison data. View our Ignite UI for React table demos! -_keywords: React Table, Data Grid, column template, comparison data, Ignite UI for React, data binding, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Comparison Data -_premium: true ---- - -# React Binding Comparison Data - -The Ignite UI for React Data Table / Data Grid supports [template columns](column-types.md#template-column) to insert images. - -## React Binding Comparison Data Example - -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -// grid modules: -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn } from 'igniteui-react-data-grids'; -import { IgrTemplateCellInfo } from 'igniteui-react-data-grids'; -import { IgrTemplateHeader } from 'igniteui-react-data-grids'; -import { IgrTemplateCellUpdatingEventArgs } from 'igniteui-react-data-grids'; -import { IgrTemplateHeaderCellUpdatingEventArgs } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); - -export default class DataGridTypeComparisonTable extends React.Component { - - public data: any[]; - public VerticalHeader: IgrTemplateHeader; - public HorizontalRightHeader: IgrTemplateHeader; - public HorizontalLeftHeader: IgrTemplateHeader; - public cellSize: number = 50; - - public genders: string[] = ["male", "female"]; - public maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - public femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - public lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "Betts", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Newberry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adama", "Power", "Tesla"]; - public skillNames = ["JavaScript", "Angular", "React", "C#", "C++", "Swift", "VB", "Python", "Ruby", "XAML"]; - - constructor(props: any) { - super(props); - - this.createData(); - - this.VerticalHeader = new IgrTemplateHeader({}); - this.VerticalHeader.cellUpdating = (s, e) => this.onVerticalHeaderUpdating(s, e); - - this.HorizontalRightHeader = new IgrTemplateHeader({}); - this.HorizontalRightHeader.cellUpdating = (s, e) => this.onHorizontalHeaderUpdating(s, e, "right"); - - this.HorizontalLeftHeader = new IgrTemplateHeader({}); - this.HorizontalLeftHeader.cellUpdating = (s, e) => this.onHorizontalHeaderUpdating(s, e, "left"); - } - - public render(): JSX.Element { - return ( -
- - - - - {this.renderDataColumns()} - - - - -
- ); - } - - public renderDataColumns(): JSX.Element[] { - const columns: JSX.Element[] = []; - - for (let i = 0; i < this.skillNames.length; i++) { - const name = this.skillNames[i]; - columns.push(this.renderColumn(name)); - } - return columns; - } - - public renderColumn(columnPath: string, columnName?: string) { - if (columnName === undefined) { - columnName = columnPath; - } - return ; - } - - public onVerticalHeaderUpdating = (s: IgrTemplateHeader, e: IgrTemplateHeaderCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - let label: HTMLSpanElement | null = null; - if (content.childElementCount === 0) { - content.style.lineHeight = "140px"; - label = document.createElement("div"); - label.style.background = "transparent"; - label.style.color = "rgb(24, 29, 31)"; - label.style.fontSize = "13px"; - label.style.fontFamily = "Verdana"; - label.style.transform = "rotate(270deg)"; - label.style.transformOrigin = "center"; - content.appendChild(label); - } else { - label = content.children[0] as HTMLDivElement; - } - - const info = e.cellInfo as IgrTemplateCellInfo; - label.textContent = info.value; - } - - public onHorizontalHeaderUpdating = (s: IgrTemplateHeader, e: IgrTemplateHeaderCellUpdatingEventArgs, align: string) => { - const content = e.content as HTMLDivElement; - let label: HTMLSpanElement | null = null; - if (content.childElementCount === 0) { - content.style.lineHeight = "140px"; - label = document.createElement("div"); - label.style.background = "transparent"; - label.style.color = "rgb(24, 29, 31)"; - label.style.fontSize = "13px"; - label.style.fontFamily = "Verdana"; - label.style.verticalAlign = "bottom"; - label.style.textAlign = align; - content.appendChild(label); - } else { - label = content.children[0] as HTMLDivElement; - } - - const info = e.cellInfo as IgrTemplateCellInfo; - label.textContent = info.value; - } - - public onCellUpdating = (s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) => { - const content = e.content as HTMLDivElement; - const info = e.cellInfo as IgrTemplateCellInfo; - let cell: HTMLDivElement | null = null; - - if (content.childElementCount === 0) { - content.style.margin = "0px"; - content.style.padding = "0px"; - cell = document.createElement("div"); - cell.style.margin = "0px"; - cell.style.padding = "0px"; - cell.style.textAlign = "center"; - cell.style.fontFamily = "Verdana"; - cell.style.fontSize = "x-large"; - cell.style.color = "#fdb417"; - content.appendChild(cell); - } else { - cell = content.children[0] as HTMLDivElement; - } - - if (info.value) { - cell.textContent = "\u2605"; - } else { - cell.textContent = ""; - } - } - - public createData() { - - this.data = []; - for (let row = 0; row < 20; row++) { - - const person: any = {}; - person.ID = row; - person.Gender = this.getRandomGender(); - person.FirstName = this.getRandomNameFirst(person.Gender); - person.LastName = this.getRandomNameLast(); - person.Name = person.FirstName + " " + person.LastName; - person.Skills = 0; - // generating experience level for all skills - for (let c = 0; c < this.skillNames.length; c++) { - const month = this.skillNames[c]; - const rand = Math.random(); - person[month] = rand > 0.65; - person.Skills += rand > 0.65 ? 1 : 0; - } - this.data.push(person); - } - - this.data.sort(this.compareData); - } - - public compareData(a: any, b: any): number { - if (a.Name < b.Name) { - return 1; - } - if (a.Name > b.Name) { - return -1; - } - return 0; - } - - public getRandomGender(): string { - return this.getRandomItem(this.genders); - } - public getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - public getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - public getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - public getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-type-sparkline-table.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-type-sparkline-table.md deleted file mode 100644 index 9001443be..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid-type-sparkline-table.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: React Data Grid | Column Sparkline | Infragistics -_description: See how Ignite UI for React Data Table & Grid supports a template column which provides you a way to embed other components such as the column sparkline. -_keywords: React Table, Data Grid, column sparkline, Ignite UI for React, data binding, Infragistics -mentionedTypes: ["Grid", "CellInfo", "TemplateCellInfo", "Sparkline"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Sparkline -_premium: true ---- - -# React Column Sparkline - -The Ignite UI for React Data Table / Data Grid supports a Template Column which provides you to a way to embed other components such as Ignite UI for React sparkline component. Refer to the [Column Types](column-types.md) topic for other types of columns supported in the [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) component. - -## React Column Sparkline Example - -```typescript -export class Products { - - public static names: string[] = [ - "Intel CPU", "AMD CPU", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - - public static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain",]; - - public static status: string[] = [ "Packing", "Shipped", "Delivered"] - - public static getData(count?: number): any[] { - if (count === undefined) { - count = 20; - } - const items: any[] = []; - for (let i = 0; i < count; i++) { - const id = this.pad(count - i, count.toString().length); - const price = this.getRandomNumber(10000, 90000) / 100; - const orderCount = this.getRandomNumber(4, 30); - const orderValue = Math.round(price * orderCount); - const orderShipped = this.getRandomNumber(30, 100); - const margin = this.getRandomNumber(5, 10); - const profit = Math.round(orderValue * (margin / 100)); - const country = this.getRandomItem(this.countries); - - // sales per month for sparkline chart - const sales: any[] = []; - for (let m = 0; m < 12; m++) { - const sale = this.getRandomNumber(20, 90); - sales.push({Value: sale, Month: m}); - } - items.push({ - CountryFlag: this.getCountryFlag(country), - CountryName: country, - Margin: margin, - // data source for embedded sparklines - OrderCount: orderCount, - OrderHistory: this.getOrderHistory(26), - OrderShipped: orderShipped, - OrderValue: orderValue, - OrderDate: this.getRandomDate(), - ProductID: id, - ProductName: this.getRandomItem(this.names), - ProductPrice: price, - Profit: profit, - ReturnRate: this.getReturnRate(52), - Status: this.getRandomItem(this.status), - }); - } - // console.log("Products:" + items.length) - return items; - } - - public static getOrderHistory(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const sales: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(0, 100); - sales.push({Sold: value, Week: w}); - } - return sales; - } - - public static getReturnRate(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const rates: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-100, 100); - rates.push({Balance: value, Week: w}); - } - return rates; - } - - public static getCountryFlag(country: string): string { - const flag = 'https://dl.infragistics.com/x/img/flags/' + country + '.png' - return flag; - } - - public static getRandomDate(): Date { - const today: Date = new Date(); - const year: number = today.getFullYear(); - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - public static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - public static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - public static pad(num: number, size: number, char?: string): string { - if (char === undefined) char = "0"; - let s = num + ""; - // if (s.length) - while (s.length < size) s = char + s; - return s; - } -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { Products } from './Products'; -// sparkline modules: -import { IgrSparkline } from 'igniteui-react-charts'; -import { IgrSparklineModule } from 'igniteui-react-charts'; -// grid modules: -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTextColumn } from 'igniteui-react-data-grids'; -import { IgrNumericColumn } from 'igniteui-react-data-grids'; -import { IgrImageColumn } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn, IIgrCellTemplateProps } from 'igniteui-react-data-grids'; -import { IgrTemplateCellInfo } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -IgrSparklineModule.register(); - -export default class SparklineGrid extends React.Component { - - public data: any[]; - - constructor(props: any) { - super(props); - - this.data = Products.getData(); - } - - public render(): JSX.Element { - return ( -
- - - - - - - - - - -
- ); - } - - public getOrderHistoryTemplate(props: IIgrCellTemplateProps) { - const info = props.dataContext as IgrTemplateCellInfo; - return ( -
- -
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## Code Snippet - -The following code example shows how to embed [`IgrSparkline`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrsparkline.html) component in [`IgrTemplateColumn`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igrtemplatecolumn.html) of the [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) component : - -```tsx - - {/* ... */} - - {/* ... */} - -``` - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn, IIgrCellTemplateProps } from 'igniteui-react-data-grids'; - -public getOrderHistoryTemplate(props: IIgrCellTemplateProps) { - const info = props.dataContext as IgrTemplateCellInfo; - return ( -
- -
- ); -} -``` - -## API References - -- [`IgrDataGrid`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrdatagrid.html) -- [`IgrSparkline`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrsparkline.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid.md index 7e6068b00..33048ece7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-grid.md @@ -202,7 +202,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Getting Started with React Data Grid @@ -240,7 +239,7 @@ Now that we have the grid packages imported, let’s get started with the basic The [`id`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#id) property is a string value and is the unique identifier of the grid which will be auto-generated if not provided, while `data` binds the grid, in this case to local data. -The [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#autoGenerate) property tells the grid to auto generate the grid's [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) components based on the data source fields. It will also try to deduce the appropriate data type for the column if possible. Otherwise, the developer needs to explicitly define the columns and the mapping to the data source fields. +The [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#autoGenerate) property tells the grid to auto generate the grid's [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) components based on the data source fields. It will also try to deduce the appropriate data type for the column if possible. Otherwise, the developer needs to explicitly define the columns and the mapping to the data source fields. ## Editable React Grid @@ -254,7 +253,7 @@ Following this topic you will learn more about [cell template](data-grid.md#cell ### Defining Columns -Let's turn the [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#autoGenerate) property off and define the columns collection in the markup: +Let's turn the [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#autoGenerate) property off and define the columns collection in the markup: ```tsx @@ -485,7 +484,7 @@ const POJO = [{ > **WARNING**: > **The key values must not contain arrays**. -> If you use [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#autoGenerate) columns **the data keys must be identical.** +> If you use [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#autoGenerate) columns **the data keys must be identical.** ## Grid Data Binding @@ -509,7 +508,7 @@ function fetchData(url: string): void { } ``` -**Note**: The grid [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#autoGenerate) available, when binding to remote service, is on our roadmap for future versions. +**Note**: The grid [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#autoGenerate) available, when binding to remote service, is on our roadmap for future versions. ## Complex Data Binding @@ -545,9 +544,6 @@ For example, in order to display the weights of a given amino acid in the grid t An alternative way to bind complex data, or to visualize composite data (from more than one column) in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) is to use a custom body template for the column. Generally, one can: - use the `value` of the cell, that contains the nested data - - - - use the `cell` object in the template, from which to access the `ctx.cell.id.rowIndex` or `ctx.cell.id.rowID` to get the row via the grid's API and retrieve any value from it and interpolate those in the template. ```tsx @@ -846,10 +842,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Working with Flat Data Overview -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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#data) property of the [`IgrGridRowComponent`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrowcomponent.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#data) property of the [`IgrGridRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrow.html). Since the React 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` property provides you this opportunity. @@ -1215,7 +1210,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Keyboard Navigation Keyboard navigation of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) provides a rich variety of keyboard interactions for the user. It enhances accessibility and allows intuitive navigation through any type of elements inside (cell, row, column header, toolbar, footer, etc.). @@ -1263,7 +1257,7 @@ Then set the `--header-background` and `--header-text-color` CSS properties for - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) - `Cell` - [`IgrCellTemplateContext`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcelltemplatecontext.html) -- [`IgrGridRowComponent`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrowcomponent.html) +- [`IgrGridRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrow.html) - [`IgrGridToolbar`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridtoolbar.html) - [`IgrPaginator`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrpaginator.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-pie-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-pie-chart.md index 9d1d2c48c..841fc95e9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-pie-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/data-pie-chart.md @@ -110,7 +110,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Data Pie Chart Recommendations @@ -150,9 +149,9 @@ Legends are used to show information about each point, to know about its contrib In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`IgrLegend`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrlegend.html) property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its [`orientation`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrlegend.html#orientation) property. -The labels shown on the legend will display the same content as the label that is shown for each slice in the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) by default, but this can be modified by utilizing the [`legendSliceLabelContentMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#legendSliceLabelContentMode) property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart. +The labels shown on the legend will display the same content as the label that is shown for each slice in the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) by default, but this can be modified by utilizing the [`legendSliceLabelContentMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#legendSliceLabelContentMode) property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart. -You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the [`legendItemBadgeShape`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#legendItemBadgeShape) property on the chart, and you can set this to be a circle, line, bar, column, and more. +You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the [`legendItemBadgeShape`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#legendItemBadgeShape) property on the chart, and you can set this to be a circle, line, bar, column, and more. Below is an example that demonstrates usage of the ItemLegend with the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html). @@ -278,20 +277,19 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Pie Chart Others Category Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice. -The Others category in the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) has three main, configurable properties - [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryType), [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryThreshold), and [`othersCategoryText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryText) that allow you to configure how the Others slice in the chart is shown. These are each described below: +The Others category in the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) has three main, configurable properties - [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryType), [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryThreshold), and [`othersCategoryText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryText) that allow you to configure how the Others slice in the chart is shown. These are each described below: -The [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryType) property works in tandem with the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryThreshold) property of the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html). For the [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryType), you can define whether you want the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryThreshold) to be evaluated as a number or a percentage. For example, if you decide on number and set the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryThreshold) to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) will become part of the Others category. +The [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryType) property works in tandem with the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryThreshold) property of the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html). For the [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryType), you can define whether you want the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryThreshold) to be evaluated as a number or a percentage. For example, if you decide on number and set the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryThreshold) to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) will become part of the Others category. -To get the underlying data items that are contained within the Others slice in the chart, you can utilize the [`getOthersContext`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#getOthersContext) method on the chart. This return type of this method is an [`IgrOthersCategoryContext`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrotherscategorycontext.html) which exposes an [`items`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrotherscategorycontext.html#items) property. The [`items`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrotherscategorycontext.html#items) property returns an array that will contain the items in the Others slice. Additionally, when clicking the Others slice, the `Item` property of the event arguments for the `SeriesClick` event will be will also return this [`IgrOthersCategoryContext`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrotherscategorycontext.html). +To get the underlying data items that are contained within the Others slice in the chart, you can utilize the [`getOthersContext`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#getOthersContext) method on the chart. This return type of this method is an [`IgrOthersCategoryContext`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrotherscategorycontext.html) which exposes an [`items`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrotherscategorycontext.html#items) property. The [`items`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrotherscategorycontext.html#items) property returns an array that will contain the items in the Others slice. Additionally, when clicking the Others slice, the `Item` property of the event arguments for the `SeriesClick` event will be will also return this [`IgrOthersCategoryContext`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrotherscategorycontext.html). -By default, the Others slice will be represented by a label of "Others." You can change this by modifying the [`othersCategoryText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryText) property of the chart. +By default, the Others slice will be represented by a label of "Others." You can change this by modifying the [`othersCategoryText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryText) property of the chart. ### React Styling the Others Slice @@ -306,9 +304,9 @@ You can style the aggregated Others slice separately from other slices by using These properties only affect the Others slice (when it exists). All other slices continue to use the normal palette and item-wise coloring behavior. > [!NOTE] -> The Others slice is only rendered when the chart is configured to create it (for example, with [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryThreshold) greater than `0` and an appropriate [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryType)). If the Others slice is not present, `OthersCategoryBrush` and `OthersCategoryOutline` have no visible effect. +> The Others slice is only rendered when the chart is configured to create it (for example, with [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryThreshold) greater than `0` and an appropriate [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryType)). If the Others slice is not present, `OthersCategoryBrush` and `OthersCategoryOutline` have no visible effect. -If you want to ensure that the Others category does not show up in the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html), you can set the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryThreshold) to 0. +If you want to ensure that the Others category does not show up in the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html), you can set the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryThreshold) to 0. The following sample demonstrates usage of the Others slice in the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html): @@ -465,16 +463,15 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Data Pie Chart Selection -The [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#selectionBehavior) and [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#selectionMode) properties of the chart, described below: +The [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#selectionBehavior) and [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#selectionMode) properties of the chart, described below: -The main two options of the [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#selectionBehavior) are [`PerDataItemSingleSelect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.seriesselectionbehavior.html#PerDataItemSingleSelect) and [`PerDataItemMultiSelect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.seriesselectionbehavior.html#PerDataItemMultiSelect), which will enable single and multiple selection, respectively. +The main two options of the [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#selectionBehavior) are [`PerDataItemSingleSelect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.seriesselectionbehavior.html#PerDataItemSingleSelect) and [`PerDataItemMultiSelect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.seriesselectionbehavior.html#PerDataItemMultiSelect), which will enable single and multiple selection, respectively. -The [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#selectionMode) property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do: +The [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#selectionMode) property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do: - [`Brighten`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.seriesselectionmode.html#Brighten): The selected slices will be highlighted. - [`FadeOthers`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.seriesselectionmode.html#FadeOthers): The selected slices will remain their same color and others will fade. @@ -643,21 +640,20 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Data Pie Chart Highlighting The [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) supports mouse over highlighting, as well as a highlighting overlay that can be configured by providing a separate data source. -First, the [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#highlightingBehavior) enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do: +First, the [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#highlightingBehavior) enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do: - [`DirectlyOver`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.serieshighlightingbehavior.html#DirectlyOver): The slices are only highlighted when the mouse is directly over them. - [`NearestItems`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.serieshighlightingbehavior.html#NearestItems): The nearest slice to the mouse position will be highlighted. - [`NearestItemsAndSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.serieshighlightingbehavior.html#NearestItemsAndSeries): The nearest slice and series to the mouse position will be highlighted. - [`NearestItemsRetainMainShapes`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.serieshighlightingbehavior.html#NearestItemsRetainMainShapes): The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized. -The [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#highlightingMode) enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do: +The [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#highlightingMode) enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do: - [`Brighten`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/enums/igniteui_react_charts.seriesselectionmode.html#Brighten): The series will have its color brightened when the mouse position is over or near it. - `BrightenSpecific`: The specific slice will have its color brightened when the mouse position is over or near it. @@ -810,8 +806,7 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - -In addition to the mouse highlighting, the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a `HighlightedDataSource` for the control and by setting the [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#highlightedValuesDisplayMode) property to `Overlay`. The `HighlightedDataSource` expects a subset of the data assigned to the `DataSource` property of the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html). +In addition to the mouse highlighting, the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html) exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a `HighlightedDataSource` for the control and by setting the [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#highlightedValuesDisplayMode) property to `Overlay`. The `HighlightedDataSource` expects a subset of the data assigned to the `DataSource` property of the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html). When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control. @@ -953,7 +948,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Data Pie Chart Animation @@ -962,7 +956,7 @@ The [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/ap You can set the [`isTransitionInEnabled`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#isTransitionInEnabled) property to **true** to have the pie chart animate into view. The type of animation performed can be configured by setting the [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#transitionInMode) enumerated property to the type of animation you would like to see. Additionally, you can also set the [`transitionInSpeedType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#transitionInSpeedType) property to scale with index, value, normal, or randomized. The duration of this animation can be controlled by the [`transitionInDuration`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#transitionInDuration) property, which takes a `TimeSpan`. -If you would like to animate data changes, this can also be done by setting the [`animateSeriesWhenAxisRangeChanges`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#animateSeriesWhenAxisRangeChanges) property to **true**. The duration of this change can be configured by setting the [`transitionDuration`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#transitionDuration) property as well. +If you would like to animate data changes, this can also be done by setting the [`animateSeriesWhenAxisRangeChanges`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#animateSeriesWhenAxisRangeChanges) property to **true**. The duration of this change can be configured by setting the [`transitionDuration`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#transitionDuration) property as well. The following sample demonstrates the usage of animation in the [`IgrDataPieChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html): @@ -1113,7 +1107,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources @@ -1127,10 +1120,10 @@ root.render(); The following table lists API members mentioned in the above sections: - [`chartType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#chartType) -- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryThreshold) -- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiebasechart.html#othersCategoryType) -- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#selectionMode) -- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdomainchart.html#selectionBehavior) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#selectionMode) +- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatapiechart.html#selectionBehavior) |Chart Type | Control Name | API Members | |-----------------|----------------|------------ | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-picker.md index d61863332..8e2a16293 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-picker.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-picker.md @@ -45,7 +45,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Getting Started with React Date Picker First, you need to install the Ignite UI for React by running the following command: @@ -178,7 +177,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Display and input format [`inputFormat`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html#inputFormat) and [`displayFormat`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.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-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html#inputFormat) is locale based, so if none is provided, the picker will default to the one used by the browser. @@ -214,7 +212,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Increment and decrement The [`IgrDatePicker`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html) exposes [`stepUp`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html#stepUp) and [`stepDown`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html#stepDown) methods. Both of which come from the [`IgrDateTimeInput`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatetimeinput.html) and can be used for incrementing and decrementing a specific `DatePart` of the currently set date. @@ -305,7 +302,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Calendar Specific settings The [`IgrDatePicker`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html) can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include [`visibleMonths`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html#visibleMonths) which allows more than one calendar to be displayed when the picker expands, [`weekStart`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html#weekStart) which determines the starting day of the week, [`showWeekNumbers`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html#showWeekNumbers) which shows the number for each week in the year and more. @@ -413,7 +409,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrInput`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-range-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-range-picker.md index 61be83f30..7855f36aa 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-range-picker.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-range-picker.md @@ -39,7 +39,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ### Getting Started To start using the [`IgrDateRangePicker`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdaterangepicker.html), you first need to install the Ignite UI for React by running the following command: @@ -61,9 +60,7 @@ For a complete introduction to the Ignite UI for React, read the [**Getting Star ## Usage -The [`IgrDateRangePicker`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdaterangepicker.html) allows users to select a start and end date either by choosing a date range from a dropdown/calendar pop-up or by typing directly into the input fields - one for the start date and one for the 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. +The [`IgrDateRangePicker`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdaterangepicker.html) allows users to select a start and end date either by choosing a date range from a dropdown/calendar pop-up or by typing directly into the input fields - one for the start date and one for the end date. The picker offers two modes for displaying date values: single input and two inputs. Both provide editing and masking capabilities. When the calendar is visible, a date range can be selected by choosing both a start and end date. Selecting a date will set both the start and end date, and once a second date is chosen, it will set the end date. If a range is already selected, clicking any other date on the calendar will start a new range selection. @@ -130,10 +127,6 @@ By default, when clicked, the [`IgrDateRangePicker`](https://www.infragistics.co The [`IgrDateRangePicker`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdaterangepicker.html) features intuitive keyboard navigation, allowing users to easily increment, decrement, or jump between different component parts, all without needing to use a mouse. -The available keyboard navigation options vary depending on whether the component is in single input or two inputs mode. - -**Two Inputs Mode:** - |Keys|Description| |----|-----------| | ← | Moves the caret one character to the left | @@ -145,11 +138,6 @@ The available keyboard navigation options vary depending on whether the componen | HOME | Moves the caret to the beginning of the input mask | | END | Moves the caret to the end of the input mask | | CTRL + ; | Sets the current date as the value of the component | - -**Both Single and Two Inputs Modes:** - -|Keys|Description| -|----|-----------| | ALT + ↓ | Opens the calendar dropdown | | ALT + ↑ | Closes the calendar dropdown | @@ -304,7 +292,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Disabled & 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-react/docs/typescript/latest/classes/igniteui-react.igrdaterangepicker.html#disabledDates) property. @@ -402,7 +389,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Additional configuration ### Properties @@ -573,7 +559,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ### Methods In addition to the properties and slots, the [`IgrDateRangePicker`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdaterangepicker.html) also exposes few methods that you can use: @@ -698,7 +683,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## API References - [`IgrInput`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-time-input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-time-input.md index 69d78bea6..8560ffd88 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-time-input.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/date-time-input.md @@ -63,7 +63,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage First, you need to the install the corresponding Ignite UI for React npm package by running the following command: @@ -206,7 +205,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Display format The date time input exposes predefined formats for displaying date/time in various manners. All of the examples below are given in en-US locale. @@ -320,7 +318,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Step up/down The [`IgrDateTimeInput`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatetimeinput.html) exposes public [`stepUp`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatetimeinput.html#stepUp) and [`stepDown`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatetimeinput.html#stepDown) methods. They increment or decrement a specific `DatePart` of the currently set date and time and can be used in a couple of ways. @@ -381,7 +378,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling The [`IgrDateTimeInput`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatetimeinput.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -486,7 +482,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrInput`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dialog.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dialog.md index 874f2eb5c..9497b4423 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dialog.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dialog.md @@ -78,7 +78,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
### Usage @@ -209,7 +208,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Form Form elements can close a Dialog if they have the attribute `method="dialog"`. Submitting the form will trigger the closing of the dialog. @@ -295,7 +293,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling The [`IgrDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdialog.html) component exposes several CSS parts to give you full control over its style: @@ -395,7 +392,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/divider.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/divider.md index bcbdff36f..a810dbbf9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/divider.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/divider.md @@ -44,7 +44,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Dependencies @@ -141,7 +140,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Type The [`type`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdivider.html#type) attribute determines whether to render a `solid` or a `dashed` divider line. The default value is `solid`. @@ -183,7 +181,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Inset Divider The [`IgrDivider`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdivider.html) can be set in on both sides. To `inset` the divider, set the [`middle`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdivider.html#middle) attribute to true in combination with the `--inset` css variable. This will shrink the divider line from both sides. The default value of the [`middle`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdivider.html#middle) attribute is false. @@ -273,7 +270,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Using Divider Inside Select Component The following sample illustrates how the [`IgrDivider`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdivider.html) can be integrated within the [`IgrSelect`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrselect.html) in order to distinguish two groups of items. @@ -331,7 +327,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## CSS Variables ### Inset diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dock-manager-embedding-frames.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dock-manager-embedding-frames.md index ca9013fd3..49221f95c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dock-manager-embedding-frames.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/dock-manager-embedding-frames.md @@ -153,7 +153,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - + # Ignite UI CLI for React -Our CLI tools provide project templates pre-configured for the Ignite UI for React toolset that help you get your next application off the ground in record time. The Ignite UI CLI is a stand-alone command-line tool for creating and scaffolding your applications for a variety of different frameworks and provides a substantial productivity boost for developers. +The [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) (`igniteui-cli`) is a standalone global command-line tool for creating and scaffolding React applications with Ignite UI for React. It provides project templates pre-configured for Ignite UI for React, a guided step-by-step wizard for first-time setup, non-interactive `new` and `add` commands for scripted workflows, a development server, and a built-in MCP server for connecting AI coding assistants to live Ignite UI for React documentation. + +The Ignite UI CLI does not replace the build tooling for your framework - projects it creates are standard React applications that remain fully compatible with their native build commands and configuration after scaffolding. -## Getting Started +The Ignite UI CLI does not replace Vite or other React tooling - projects created with the CLI are standard Vite-based React applications and remain fully compatible with npm scripts and Vite commands after scaffolding. -To get started, install the CLI: +## Install the Ignite UI CLI + +Install the Ignite UI CLI globally using npm: ```cmd npm install -g igniteui-cli ``` -The above install command will make the Ignite UI CLI available for creation, scaffolding, and running of your Ignite UI for React application. +Or, using yarn: + +```cmd +yarn global add igniteui-cli +``` + +Verify the installation: + +```cmd +ig version +``` ## Create a New Project -To create an application that is configured to use the Ignite UI for React controls using the Ignite UI CLI, you can use the following template in your command line: +The Ignite UI CLI provides two modes for project creation: a guided interactive wizard and a direct command with arguments. + +### Use the guided wizard + +The guided wizard is the recommended starting point for new projects. It prompts you to choose a framework, project type, template, and theme, then scaffolds and commits the project automatically. + +To activate the wizard, run: ```cmd -ig new "[name_of_project]" --framework=[target_framework] --type=[project_type] +ig ``` -Using the above template, if you wanted to create a **React** application named "My Project" targeting TypeScript, you could write the following command: +or: ```cmd -ig new "My Project" --framework=react --type=igr-ts +ig new ``` -> [!Note] -> TypeScript support will be available starting from Ignite UI CLI version 13. +For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). -## Adding Components +### Create a project directly -Once you have created a project, you can then add additional component templates using **ig add** at any point. Running this command without any parameters will guide you through the available templates by using a keyboard navigation CLI to add the control of your choosing. +To create a React project non-interactively, provide `react` as the framework and `igr-ts` as the project type: ```cmd -ig add +ig new --framework=react --type=igr-ts --template=top-nav ``` -Alternatively, you can simply run the **ig list** command to get a full list of supported templates in the current project you have created. +The following project templates are available for React: + +| Template ID | Description | +| :---------- | :------------------------------------------------- | +| empty | Minimal project structure with no predefined views | +| base | Project structure with a home page | +| top-nav | Project structure with a top navigation bar | + +The following arguments are available when creating a project: + +| Argument | Alias | Description | +| :--------------- | :----- | :-------------------------------------------------------------------------------------------------------------------- | +| `name` | `-n` | The name of the application. The application is created inside a directory with the same name. | +| `--framework` | `-f` | The framework for the generated project. Default: `jquery`. Supported: `jquery`, `angular`, `react`, `webcomponents`. | +| `--type` | `-t` | The project type for the selected framework. Use `igr-ts` for React or `igc-ts` for Web Components. | +| `--template` | | The project template to use. See the template tables above for available options per framework. | +| `--skip-git` | `--sg` | Skips automatic Git repository initialization. Uses the global `skip-git` config value if omitted. | +| `--skip-install` | `--si` | Skips npm package installation on project creation. | + +## Add a Component Template + +Once you have created a project, you can add additional component views at any point. Running `ig add` without arguments launches an interactive template browser: ```cmd -ig list +ig add ``` -After running **ig list** and you find the component template you would like to add, you can do so quickly by following this template in your command line: +To add a specific component template directly, provide the template ID and a name for the new component: ```cmd -ig add [component_template] [component_name] +ig add [component-template] [component-name] ``` -The "component_template" above will generally match an Ignite UI for React component ("grid", "category-chart", "linear-gauge", etc.). +For example, to add a data grid component named `MyGrid`: -For example, if you wanted to add a data grid templated component named "MyGridComponent" to your application, you could run the following: +```cmd +ig add grid MyGrid +``` + +To list all available templates in the current project: ```cmd -ig add grid MyGridComponent +ig list ``` -> NOTE: Your routing file will be updated with the path to the page with the new component - in that case `/my-grid-component`. You can use it to manually navigate to the newly generated page. +For a guided walkthrough of the component addition wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md#add-view). -## Build and Run the Application +> [!NOTE] +> Your routing file will be updated with the path to the newly generated page. For example, a component named `MyGrid` will be navigable at `/my-grid`. -In order to build and run the Ignite UI for React application, you can call the **ig build** and **ig run** commands: +To see all component templates available for the current project, run `ig list`. The list is project-aware and reflects the selected framework and type. + +## Run the Application + +The `start` command builds the application, starts a local web server, and opens it in your default browser: ```cmd -ig build -ig run +ig start ``` ### Using Vite -The React application generated by Ignite UI CLI utilizes Vite as the build tool. Vite offers fast development and production builds, providing an efficient development experience with features like hot module replacement (HMR) during development. +The React application generated by Ignite UI CLI uses [Vite](https://vitejs.dev/) as the build tool and supports fast development builds and hot module replacement (HMR). To start the Vite development server directly without the CLI wrapper: + +```bash +npm run dev +``` + +The Vite dev server starts on `http://localhost:5173` by default. Use `ig start` when you want the CLI to handle building and launching in a single command. + +## AI Assistant Integration (MCP) + +The Ignite UI CLI includes a built-in **MCP (Model Context Protocol) server** that connects AI coding assistants - GitHub Copilot, Claude, Cursor, and others - directly to Ignite UI for React component documentation and API references. Once configured, your AI assistant can scaffold projects, add and modify components, search docs, look up API details, and generate accurate Ignite UI for React code without leaving your editor. + +The CLI MCP server starts via `npx` without requiring a global install: + +```bash +npx -y igniteui-cli mcp +``` + +Or, if you have Ignite UI CLI installed globally: + +```bash +ig mcp +``` + +### Quick Setup with `ig ai-config` + +To configure Ignite UI for React Agent Skills and both MCP servers in a single step, run the following from your project root after installing Ignite UI for React packages: + +```cmd +npx igniteui-cli ai-config +``` + +If you have the CLI installed globally: + +```cmd +ig ai-config +``` + +This copies Ignite UI for React Agent Skills into `.claude/skills/` and writes the full Ignite UI MCP server configuration, including the CLI and Theming servers, to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op. For AI clients other than VS Code, use the manual configuration below. + +For full setup instructions across all AI clients and Agent Skills wiring, see [Agent Skills](./ai/skills.md) and [Ignite UI CLI MCP](./ai/cli-mcp.md). + +Configure your AI client to use the CLI MCP server manually. Most teams connect both the CLI MCP and the Theming MCP together - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, and design tokens. + +**VS Code** - create or edit `.vscode/mcp.json` in your project root: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:** + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +For per-client setup guides (VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains) and a full description of available tools, see [Ignite UI CLI MCP](./ai/cli-mcp.md). For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.md). ## Ignite UI CLI Commands -A full list of the available Ignite UI CLI commands and their usage (like passing flags, etc.), can be found at the [Ignite UI CLI wiki pages](https://github.com/IgniteUI/igniteui-cli/wiki): - -| Command | Alias | Description | -| --- | --- | --- | -| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. -| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory -| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types -| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists the available commands and provides a brief description of what they do. -| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Performs read and write operation on the Ignite UI CLI configuration settings. -| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for information about a given search term -| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. -| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. -| [ig version](https://github.com/IgniteUI/igniteui-cli/wiki) | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing | +A full list of available Ignite UI CLI commands is maintained on the [Ignite UI CLI wiki](https://github.com/IgniteUI/igniteui-cli/wiki): + +| Command | Alias | Description | +| :-------------------------------------------------------------------- | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server, and opens it in the default browser. | +| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory. | +| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types. | +| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists available commands with brief descriptions. | +| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Reads and writes Ignite UI CLI configuration settings. | +| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for a given term. | +| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists available templates for the project's framework and type. When run inside a project folder, uses the project's framework and type regardless of provided arguments. | +| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | +| ig upgrade-packages | | Upgrades Ignite UI packages in the project from Trial to Licensed. | +| ig mcp | | Starts the built-in MCP server for connecting AI coding assistants to Ignite UI for React component documentation. | +| ig ai-config | | Copies Ignite UI for React Agent Skills into `.claude/skills/` and writes Ignite UI MCP server configuration to `.vscode/mcp.json`. Run once per project. | +| ig version | -v | Shows the Ignite UI CLI version installed locally, or globally if no local installation is found. | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-getting-started.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-getting-started.md index 1fb20d6ae..9fc2fa79b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-getting-started.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-getting-started.md @@ -1,12 +1,14 @@ --- title: Getting Started | Ignite UI for React | Infragistics -_description: Use Infragistics' React components to create apps and improve data visualization with the world’s fastest, virtualized, real-time React data grid and streaming financial and business and financial charts. +_description: Install Ignite UI for React and render your first component. Covers CLI scaffolding, manual package setup, and AI tooling with Agent Skills and MCP servers. _keywords: Ignite UI for React, Infragistics, Getting Started -_language: en -mentionedTypes: ["XamBulletGraph", "IgrGrid"] +last_updated: "2025-04-06" +mentionedTypes: [] _tocName: Getting Started --- + + # Getting Started With Ignite UI for React [`Ignite UI for React`](https://github.com/IgniteUI/igniteui-react) is a complete set of UI widgets, components, and Figma UI kits for React by Infragistics. It enables developers to build modern, high-performance HTML5 and JavaScript apps for desktop browsers, mobile experiences, and progressive web apps (PWAs). @@ -52,11 +54,18 @@ ig ``` Then choose `React` as the framework and `Ignite UI for React TS` as the project type. Select the `Default Top Navigation` project template, add a specific component/view, or select `Complete & Run`. -For more information about the Ignite UI CLI, see the [CLI overview](general-cli-overview.md). + +Or create a project directly in one command, for example: + +```cmd +ig new --framework=react --type=igr-ts --template=top-nav +``` + +For a step-by-step walkthrough of the wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands and options, see the [CLI Overview](general-cli-overview.md). If you added a Grid component during the prompts, once the application is running you should see something similar to the following: - +Ignite UI CLI generated grid component > [!NOTE] > Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under [commercial license](./general-open-source-vs-premium.md#comparison-table-for-all-components). @@ -67,7 +76,7 @@ Alternatively, you can use popular frameworks such as Next.js, Vite, or Expo as ### Creating a New React Project -All popular frameworks for React development provide powerful CLI tools for scaffolding a React application. +Common React toolchains such as Next.js, Vite, and Expo each provide CLI tools for scaffolding a new application. 1 - Open **VS Code**, select **Terminal** menu and then **New Terminal** option. @@ -81,7 +90,7 @@ Then follow the prompts to choose a name for the project, React as the framework ### Adding an Ignite UI React Grid Component -##### Package Installation +#### Package Installation To add the Ignite UI React [**Grid**](grids/data-grid.md) component to the app you need to install the `igniteui-react-grids` package: @@ -93,7 +102,7 @@ npm install igniteui-react-grids --save Then we can import the required modules of the components we want to use. Let's do this for the Grid and Column components that we will also use in the template. We also need to import one of the themes. -```ts +```typescript import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; ``` @@ -103,7 +112,7 @@ import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; We are now ready to use the Ignite UI for React grid component in our markup! Let's go ahead and define it: ```tsx -// App.txs +// App.tsx function App() { const data = [ { name: "John", age: 30 }, @@ -142,7 +151,7 @@ npm run dev After executing this command, your project will be built and served locally on your computer. It will automatically open in your default browser and you will be able to use Ignite UI for React components in your project. The final result should show a data grid with sample data: - +Ignite UI React grid component rendered with Vite ## Updating Existing Apps @@ -171,7 +180,26 @@ yarn add igniteui-react-spreadsheet igniteui-react-core This will automatically install packages for Ignite UI for React, along with all of their dependencies, font imports and styles references to the existing project. -# Ignite UI for React Packages Overview +## Upgrade from Trial to Licensed + +The Ignite UI CLI installs the trial version of Ignite UI for React by default. To upgrade from the trial package to the licensed version, run the upgrade command in your project root: + +```bash +ig upgrade-packages +``` + +You will be prompted to log in to the Infragistics private npm registry if not already configured. For details on the license model, see [License FAQ and Installation](./general-licensing.md) and [Open Source vs Premium](./general-open-source-vs-premium.md). + +## AI-Assisted Development + +Ignite UI provides a three-part AI toolchain - **Agent Skills**, the **Ignite UI CLI MCP server**, and the **Ignite UI Theming MCP server** - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Once connected, your AI assistant can scaffold projects, add and modify components, answer documentation questions, and generate accurate Ignite UI for React code without leaving your editor. + +Run `ig ai-config` from your project root to copy Ignite UI for React Agent Skills and write the Ignite +UI MCP server configuration to `.vscode/mcp.json` in a single step. + +For an overview of all three layers and setup instructions, see [AI-Assisted Development with Ignite UI](./ai/ai-assisted-development-overview.md). For the full CLI MCP client setup guide, see [Ignite UI CLI MCP](./ai/cli-mcp.md). For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.md). + +## Ignite UI for React Packages Overview Ignite UI for React is a comprehensive suite of UI components, design toolkits, and supporting services for React. Built to empower developers to create modern, high-performance React applications for desktop browsers, mobile experiences, and progressive web apps (PWAs), Ignite UI for React leverages the latest React best practices and APIs. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-how-to-mcp-e2e.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-how-to-mcp-e2e.md index 8a7b53369..26dd9e6a8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-how-to-mcp-e2e.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-how-to-mcp-e2e.md @@ -62,7 +62,7 @@ This gives you the `ig` command in any terminal session. ### Without a global install ```bash -npx --package igniteui-cli igniteui new +npx ig new ``` This runs the CLI through `npx` instead of a global `ig` command. @@ -76,7 +76,7 @@ ig new Matching `npx` form: ```bash -npx --package igniteui-cli igniteui new +npx ig new ``` You can also use a direct command when you already know the project settings. @@ -90,7 +90,7 @@ ig new my-app --framework=react Matching `npx` form: ```bash -npx --package igniteui-cli igniteui new my-app --framework=react +npx ig new my-app --framework=react ``` What happens next: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-step-by-step-guide-using-cli.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-step-by-step-guide-using-cli.md new file mode 100644 index 000000000..e5da8a0ba --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/general-step-by-step-guide-using-cli.md @@ -0,0 +1,106 @@ +--- +title: Step-by-Step Guide Using Ignite UI CLI | Ignite UI for React | Infragistics +_description: Walk through the Ignite UI CLI interactive wizard to create a new React project, choose a template and theme, and add Ignite UI for React component views. +_keywords: React cli, ignite ui cli, Ignite UI for React, scaffolding, step-by-step, Infragistics +mentionedTypes: [] +last_updated: "2025-04-08" +_tocName: Step-by-Step Guide Using Ignite UI CLI +--- + + + +# Step-by-Step Guide Using Ignite UI CLI + +The Ignite UI CLI step-by-step mode is an interactive wizard that guides you through project creation, template selection, theming, and component view addition for Ignite UI for React projects. It covers the same operations as the non-interactive `ig new` and `ig add` commands but prompts you at each step rather than requiring all arguments upfront. + +The step-by-step mode does not support scripted or non-interactive use - for that, use the `ig new` and `ig add` commands with explicit arguments. The wizard relies on `Inquirer.js`; see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) for compatibility. For the full CLI reference, see [Ignite UI CLI Overview](general-cli-overview.md). + +To activate the wizard, run: + +```cmd +ig +``` + +or: + +```cmd +ig new +``` + +## Create a New Project + +The wizard walks through project naming, framework and type selection, template choice, and theming in sequence. Each step displays its options as an interactive list - navigate with the arrow keys and confirm with ENTER. + +### Enter a project name + +First, you will be prompted to enter a name for your application. The project is created inside a directory with the same name. + +### Select a framework + +Navigate through the options using the arrow keys and press ENTER to confirm: + +Select **React** to scaffold a project pre-configured for Ignite UI for React. + +### Select a project type + +Select **Ignite UI for React TS** as the project type. + +### Select a project template + +Choose one of the available project templates. Navigate through the options using the arrow keys and press ENTER to confirm: + +| Template | Description | +| :--------------- | :-------------------------------------------------- | +| Empty | Minimal project structure with no predefined views | +| Base | Project structure with a home page | +| Top Navigation | Project structure with a top navigation bar | + +### Select a theme + +Choose a theme for your application: + +- The **default** option includes a pre-compiled CSS file with the default Ignite UI for React theme. +- The **custom** option generates a Sass-based color palette and theme configuration using the [Theming API](./themes/overview.md). + +### Complete or continue + +After completing the above steps, the project structure is generated, a Git repository is initialized, and the project is committed. You will then be asked whether to complete the process or add a new view to your application. + +## Add View + +The Ignite UI CLI supports multiple component templates that can be added to an existing project. This mode is available either as a continuation of project creation or inside an existing project using: + +```cmd +ig add +``` + +You will be provided with a list of available component templates, grouped by category. Use the arrow keys to navigate through the groups and ENTER to select. For some templates, such as `Custom Grid`, you will be provided with a list of optional features that can be toggled on or off with the SPACE key before confirming your selection. + +After selecting a group, choose a specific template from the list and enter a name for the new component. If you choose to add a scenario template, you will also be presented with a list of available scenario templates. + +After adding a template, you will be asked whether to add more views or complete the process. On completion, any remaining package dependencies are installed and the application is built and opened in your default browser. + +To add more views to a project later without the wizard, use the direct `add` command: + +```cmd +ig add [template] [name] +``` + +For example: + +```cmd +ig add grid MyGrid +``` + +> [!NOTE] +> Your routing file will be updated with the path to the newly generated page. For example, a component named `MyGrid` will be navigable at `/my-grid`. + +## Run the Application + +Once your project is complete, run it at any time with: + +```cmd +ig start +``` + +This builds the project, starts a local web server, and opens the application in your default browser. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-csv.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-csv.md index 25186f45c..f689b8c6e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-csv.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-csv.md @@ -376,7 +376,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Data Example diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-json-points.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-json-points.md index 29d32d5dd..abb64bbf1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-json-points.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-json-points.md @@ -367,7 +367,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Data Example diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-model.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-model.md index 57908725e..69bb1f8bd 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-model.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-data-model.md @@ -425,7 +425,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The following table summarized data structures required for each type of geographic series: @@ -435,10 +434,10 @@ The following table summarized data structures required for each type of geograp | [`IgrGeographicSymbolSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html#latitudeMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates | | [`IgrGeographicHighDensityScatterSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographichighdensityscatterseries.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographichighdensityscatterseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographichighdensityscatterseries.html#latitudeMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates | | [`IgrGeographicProportionalSymbolSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicproportionalsymbolseries.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicproportionalsymbolseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicproportionalsymbolseries.html#latitudeMemberPath), [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicproportionalsymbolseries.html#radiusMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols | -| [`IgrGeographicScatterAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#latitudeMemberPath), [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#colorMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | -| [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#latitudeMemberPath), [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#valueMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | -|[`IgrGeographicShapeSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseries.html)|[`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseriesbase.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | -|[`IgrGeographicPolylineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicpolylineseries.html)|[`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseriesbase.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | +| [`IgrGeographicScatterAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#latitudeMemberPath), [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#colorMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +| [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#latitudeMemberPath), [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#valueMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +|[`IgrGeographicShapeSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseries.html)|[`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseries.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | +|[`IgrGeographicPolylineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicpolylineseries.html)|[`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseries.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | ## Code Snippet diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-multiple-shapes.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-multiple-shapes.md index 34e161e79..8bafbc1ce 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-multiple-shapes.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-multiple-shapes.md @@ -505,7 +505,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
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 [`IgrShapeDataSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_core.igrshapedatasource.html) class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about [`IgrShapeDataSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_core.igrshapedatasource.html) object. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-multiple-sources.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-multiple-sources.md index bf956ec50..dc5a6f93c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-multiple-sources.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-multiple-sources.md @@ -1179,7 +1179,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-shp-file.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-shp-file.md index 573ae32f2..b6fadce37 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-shp-file.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-binding-shp-file.md @@ -135,7 +135,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The following table explains properties of the [`IgrShapeDataSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_core.igrshapedatasource.html) class for loading shape files. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-azure-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-azure-imagery.md index 4e15d4bb6..f8673a80c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-azure-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-azure-imagery.md @@ -313,7 +313,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## React Displaying Imagery from Azure Maps - Code Example The following code snippet shows how to display geographic imagery tiles from Azure Maps in React [`IgrGeographicMap`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html) using [`IgrAzureMapsImagery`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrazuremapsimagery.html) class. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-esri-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-esri-imagery.md index 95b3f0d34..51b8365b4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-esri-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-esri-imagery.md @@ -303,7 +303,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Code Snippet diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-heat-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-heat-imagery.md index 92444ce73..57e3ad7cf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-heat-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-heat-imagery.md @@ -143,7 +143,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
When a [`IgrShapeDataSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_core.igrshapedatasource.html) loads its shape files, it converts that data into [`IgrShapefileRecord`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_core.igrshapefilerecord.html) objects. These objects can be retrieved from the `GetPointData()` method of the [`IgrShapeDataSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_core.igrshapedatasource.html) and can then be used to create a heat-map through usage of a [`IgrTileGeneratorMapImagery`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrtilegeneratormapimagery.html) object with a [`IgrHeatTileGenerator`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_core.igrheattilegenerator.html) assigned to its `TileGenerator` property. This [`IgrTileGeneratorMapImagery`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrtilegeneratormapimagery.html) can then be used in a [`IgrGeographicTileSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographictileseries.html) as its [`tileImagery`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographictileseries.html#tileImagery) source. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-osm-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-osm-imagery.md index 7693f1cac..b570bc240 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-osm-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-display-osm-imagery.md @@ -83,7 +83,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Code Snippet diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-navigation.md index 1e31ef7a0..5e40e6f62 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-navigation.md @@ -366,7 +366,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Geographic Coordinates @@ -409,18 +408,18 @@ The following table summarizes properties that can be used in navigation of the | Property Name | Property Type | Description | |----------------|-----------------|---------------| -|[`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#windowRect)| Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. | -|[`windowScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowScale)| number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the [`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#windowRect) property | -|[`windowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#windowPositionHorizontal)| number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#windowRect) property. | -|[`windowPositionVertical`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#windowPositionVertical)| number | Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#windowRect) property. | -|[`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#actualWindowRect)| Rect | Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window. | -|[`actualWindowScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#actualWindowScale)| number | Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#actualWindowRect) property | -|[`actualWindowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#actualWindowPositionHorizontal)| number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#actualWindowRect) property. | -|[`actualWindowPositionVertical`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#actualWindowPositionVertical)| number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#actualWindowRect) property. | +|[`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowRect)| Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. | +|[`windowScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowScale)| number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the [`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowRect) property | +|[`windowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowPositionHorizontal)| number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowRect) property. | +|[`windowPositionVertical`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowPositionVertical)| number | Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowRect) property. | +|[`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#actualWindowRect)| Rect | Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window. | +|[`actualWindowScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#actualWindowScale)| number | Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#actualWindowRect) property | +|[`actualWindowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#actualWindowPositionHorizontal)| number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#actualWindowRect) property. | +|[`actualWindowPositionVertical`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#actualWindowPositionVertical)| number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#actualWindowRect) property. | ## API References -- [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#actualWindowRect) -- [`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#windowRect) +- [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#actualWindowRect) +- [`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowRect) - [`IgrGeographicMap`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html) - [`zoomable`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#zoomable) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-shape-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-shape-styling.md index a432eed0d..9545543ec 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-shape-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-shape-styling.md @@ -696,7 +696,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Required Imports diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-area-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-area-series.md index 101e271d9..eef6b96eb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-area-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-area-series.md @@ -555,15 +555,14 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The [`IgrGeographicScatterAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html) works a lot like the [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html) except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values. ## Data Requirements -Similar to other types of geographic series in the map component, the [`IgrGeographicScatterAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store a geographic longitude and latitude coordinates and one data column that stores a value associated with the geographic location. The [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#latitudeMemberPath), and [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#colorMemberPath) properties of the geographic series identify these data column. -The [`IgrGeographicScatterAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource for this property, especially when a large number of data items are present. +Similar to other types of geographic series in the map component, the [`IgrGeographicScatterAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store a geographic longitude and latitude coordinates and one data column that stores a value associated with the geographic location. The [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#latitudeMemberPath), and [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#colorMemberPath) properties of the geographic series identify these data column. +The [`IgrGeographicScatterAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#trianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource for this property, especially when a large number of data items are present. ## Data Binding @@ -571,14 +570,14 @@ The following table summarizes properties of GeographicScatterAreaSeries used fo | Property Name | Property Type | Description | |--------------|---------------| ---------------| -|`ItemsSource`|any|The source of data items to perform triangulation on if the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource) property provides no triangulation data.| -|[`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#longitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.| -|[`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#latitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to the `ItemsSource`.| +|`ItemsSource`|any|The source of data items to perform triangulation on if the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#trianglesSource) property provides no triangulation data.| +|[`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#longitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.| +|[`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#latitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to the `ItemsSource`.| |[`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#colorMemberPath)|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the [`colorScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#colorScale) property is set.| -|[`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource)|any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.| -|[`triangleVertexMemberPath1`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#triangleVertexMemberPath1)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`triangleVertexMemberPath2`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#triangleVertexMemberPath2)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`triangleVertexMemberPath3`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#triangleVertexMemberPath3)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#trianglesSource)|any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.| +|[`triangleVertexMemberPath1`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#triangleVertexMemberPath1)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath2`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#triangleVertexMemberPath2)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath3`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#triangleVertexMemberPath3)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| ## Color Scale @@ -686,7 +685,7 @@ public createAreaSeries(data: any[]) - [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html) - [`IgrGeographicScatterAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html) - `ItemsSource` -- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#latitudeMemberPath) -- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#longitudeMemberPath) -- [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource) +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#longitudeMemberPath) +- [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html#trianglesSource) - `TriangulationSource` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-bubble-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-bubble-series.md index e20b538f8..d8b25e2cf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-bubble-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-bubble-series.md @@ -1007,7 +1007,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The demo above shows the [`IgrGeographicProportionalSymbolSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicproportionalsymbolseries.html) series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-contour-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-contour-series.md index f1a958444..f96e8eb4f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-contour-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-contour-series.md @@ -322,15 +322,14 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html) works a lot like the [`IgrGeographicScatterAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html) except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale. ## Data Requirements -Similar to other types of geographic series in the map component, the [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#latitudeMemberPath), and [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#valueMemberPath) properties of the geographic series. -The [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present. +Similar to other types of geographic series in the map component, the [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#latitudeMemberPath), and [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#valueMemberPath) properties of the geographic series. +The [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#trianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present. ## Data Binding @@ -338,14 +337,14 @@ The following table summarizes properties of [`IgrGeographicContourLineSeries`]( | Property Name | Property Type | Description | |--------------|---------------| ---------------| -|`ItemsSource`|any|The source of data items to perform triangulation on if the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource) property provides no triangulation data.| -|[`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#longitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.| -|[`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#latitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to to the `ItemsSource`.| +|`ItemsSource`|any|The source of data items to perform triangulation on if the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#trianglesSource) property provides no triangulation data.| +|[`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#longitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.| +|[`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#latitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to to the `ItemsSource`.| |[`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#valueMemberPath)|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the [`fillScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#fillScale) property is set.| -|[`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource)|any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.| -|[`triangleVertexMemberPath1`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#triangleVertexMemberPath1)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`triangleVertexMemberPath2`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#triangleVertexMemberPath2)|string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`triangleVertexMemberPath3`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#triangleVertexMemberPath3)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#trianglesSource)|any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.| +|[`triangleVertexMemberPath1`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#triangleVertexMemberPath1)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath2`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#triangleVertexMemberPath2)|string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath3`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#triangleVertexMemberPath3)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| ## Contour Fill Scale @@ -355,7 +354,7 @@ The following table list properties of the CustomPaletteColorScale affecting the | Property Name | Property Type | Description | |--------------|---------------| ---------------| -|[`brushes`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#brushes)|BrushCollection|Gets or sets the collection of brushes for filling contours of the [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html)| +|[`brushes`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#brushes)|BrushCollection|Gets or sets the collection of brushes for filling contours of the [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html)| |[`maximumValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrcustompalettecolorscale.html#maximumValue)|double|The highest value to assign a brush in a fill scale.| |[`minimumValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrcustompalettecolorscale.html#minimumValue)|double|The lowest value to assign a brush in a fill scale.| @@ -451,9 +450,9 @@ public createContourSeries(data: any[]) - [`IgrGeographicContourLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html) - [`IgrGeographicScatterAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicscatterareaseries.html) - `ItemsSource` -- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#latitudeMemberPath) -- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#longitudeMemberPath) -- [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicxytriangulatingseries.html#trianglesSource) +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#longitudeMemberPath) +- [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#trianglesSource) - `TriangulationSource` - [`IgrValueBrushScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrvaluebrushscale.html) - [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographiccontourlineseries.html#valueMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-density-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-density-series.md index 2cd7c492e..7d1a671ad 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-density-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-density-series.md @@ -539,7 +539,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The demo above shows the [`IgrGeographicHighDensityScatterSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographichighdensityscatterseries.html) series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-symbol-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-symbol-series.md index f3f309325..762ee2f3a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-symbol-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-scatter-symbol-series.md @@ -984,7 +984,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Data Requirements diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-shape-polygon-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-shape-polygon-series.md index d83d59e2d..7a05a0d23 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-shape-polygon-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-shape-polygon-series.md @@ -562,7 +562,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The [`IgrGeographicShapeSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseries.html) works a lot like the [`IgrGeographicPolylineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicpolylineseries.html) except that geo-spatial data is rendered with polygons instead of polylines. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-shape-polyline-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-shape-polyline-series.md index ae3dc97ad..6cb769599 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-shape-polyline-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map-type-shape-polyline-series.md @@ -323,7 +323,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The [`IgrGeographicPolylineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicpolylineseries.html) works a lot like the [`IgrGeographicShapeSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseries.html) except that geo-spatial data is rendered with polylines instead of polygons. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map.md index a9be83c8e..a3a7d3601 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/geo-map.md @@ -1008,7 +1008,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The map component allows you to render geographic imagery from Bing Maps™, and Open Street Maps. The map provides plotting of tens of thousands of data points, and updates them every few milliseconds so that the control can handle your real-time feeds. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-advanced-filtering.md index 0d1f5c4bb..ff14af54b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-advanced-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-advanced-filtering.md @@ -143,7 +143,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Interaction In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. If no advanced filter is applied, you should start with creating a group of filtering conditions linked with **AND** or **OR**. After that, you can add filtering conditions or sub-groups. @@ -158,7 +157,7 @@ In order to filter the data once you are ready with creating the filtering condi ## Usage -To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering) input property should be set to **true**. +To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#allowAdvancedFiltering) input property should be set to **true**. ```tsx @@ -168,7 +167,7 @@ To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.inf -The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. +The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. @@ -204,7 +203,7 @@ const filteringTree: IgrFilteringExpressionsTree = { -In case you don't want to show the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. +In case you don't want to show the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. > [!Note] > You can enable both the **QuickFilter**/**ExcelStyleFilter** and the advanced filtering user interfaces in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). Both filtering user interfaces will work independently of one another. The final filtered result in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) is the intersection between the results of the two filters. @@ -363,7 +362,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-editing.md index f7eb9fba7..6b2ea9db1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-editing.md @@ -191,7 +191,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Cell Editing ### Editing through UI @@ -231,7 +230,7 @@ function updateCell() { -Another way to update cell is directly through `Update` method of `Cell`: +Another way to update cell is directly through [`update`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrow.html#update) method of `Cell`: ```typescript function updateCell() { @@ -482,7 +481,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Grid Excel Style Editing @@ -655,7 +653,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - Main benefits of the above approach include: - Constant edit mode: typing while a cell is selected will immediately enter edit mode with the value typed, replacing the existing one @@ -685,7 +682,7 @@ grid1Ref.current.addRow(record); ### Updating data in the Grid -Updating data in the Grid is achieved through [`updateRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#updateCell) methods but **only if the PrimaryKey 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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#updateCell) methods but **only if the PrimaryKey for the grid is defined**. You can also directly update a cell and/or a row value through their respective **update** methods. @@ -708,7 +705,7 @@ row.update(newData); ### Deleting data from the Grid -Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) is defined. +Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#primaryKey) is defined. @@ -758,6 +755,8 @@ If the value entered in a cell under the **Units On Order** column is larger tha + + The result of the above validation being applied to our [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) can be seen in the below demo: @@ -871,7 +870,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -1028,13 +1026,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) - - - - [`IgrDatePicker`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-merging.md index 57205eaef..0d8d6940d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-merging.md @@ -246,7 +246,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Enabling and Using Cell Merging @@ -627,7 +626,6 @@ export class PerProjectMergeStrategy extends IgrDefaultMergeStrategy { } ``` - ## Feature Integration diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-selection.md index 9e2ea346d..fa9817984 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-cell-selection.md @@ -152,7 +152,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Selection Types ### Grid Multiple-Cell Selection @@ -375,18 +374,17 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Grid Single Selection -When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) to **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. +When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#cellSelection) to **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. > When single cell is selected [`selected`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.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` event is emitted. ### Grid None Selection -If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) to **none**. 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. +If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#cellSelection) to **none**. 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 @@ -415,7 +413,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Select range -[`selectRange`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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. @@ -428,7 +426,7 @@ gridRef.current.selectRange(range) ### Clear cell selection -[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clearCellSelection) will clear the current cell selection. +[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#clearCellSelection) will clear the current cell selection. ```tsx gridRef.current.clearCellSelection(); @@ -506,7 +504,7 @@ The multi-cell selection is index based (DOM elements selection). - `Filtering` - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells. - `Resizing` - On column resizing selected cells will not be cleared. - `Hiding` - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected. -- [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#pinning) - Selected cell will not be cleared. Same as hiding +- [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#pinning) - Selected cell will not be cleared. Same as hiding - [`groupBy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#groupBy) - On column grouping selected cells will not be cleared. @@ -657,7 +655,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-clipboard-interactions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-clipboard-interactions.md index f4222c8a0..c86cfc7a4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-clipboard-interactions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-clipboard-interactions.md @@ -244,7 +244,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Functionality Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are: @@ -271,7 +270,7 @@ Copy behavior is working with the default interaction defined by the browser and ## API Usage -We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clipboardOptions) property, which handles the following options: +We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#clipboardOptions) property, which handles the following options: - `Enabled` Enables/disables copying of selected cells. - `CopyHeaders` Include the associated headers when copying. @@ -281,7 +280,7 @@ We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-r > [!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` Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clipboardOptions). +- `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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#clipboardOptions). ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-collapsible-column-groups.md index c7050e042..477e71a1c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-collapsible-column-groups.md @@ -219,7 +219,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Setup To get started with the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) and the **Collapsible multi-column headers** feature, first you need to install Ignite UI for React by typing the following command: @@ -236,9 +235,9 @@ Also, we strongly suggest that you take a brief look at [multi-column headers](m **Collapsible Column Groups** is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. -In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#columnGroup) to **true**. +In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#columnGroup) to **true**. -You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. +You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. Let's see the markup below: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-hiding.md index 762d99b3c..5b4c5d138 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-hiding.md @@ -203,7 +203,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Grid Setup Let's start by creating our [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) and binding it to our data. We will also enable both filtering and sorting for the columns. @@ -558,7 +557,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References In this article we learned how to use the built-in column hiding UI in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'s toolbar. The column hiding UI has a few more APIs to explore, which are listed below. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-moving.md index b5905c41f..5e3a74c10 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-moving.md @@ -323,10 +323,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Overview -**Column moving** feature is enabled on a per-grid level, meaning that the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#moving) input of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). +**Column moving** feature is enabled on a per-grid level, meaning that the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#moving) input of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). ```tsx @@ -338,7 +337,7 @@ root.render(); In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: -[`moveColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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` value), which determines whether to place the column before or after the target column. +[`moveColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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` value), which determines whether to place the column before or after the target column. ```typescript // Move the ID column after the Name column @@ -356,7 +355,7 @@ const idColumn = grid.getColumnByName("ID"); idColumn.move(3); ``` -Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`moving`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#moving) property to true. +Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`moving`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#moving) property to true. ## Events @@ -688,7 +687,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-pinning.md index 68fd41a5b..a2423aa2d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-pinning.md @@ -143,10 +143,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Column Pinning API -Column pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pinned) property of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html). Pinned columns are rendered on the left side of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) body. +Column pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrow.html#pinned) property of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html). Pinned columns are rendered on the left side of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) body. ```tsx @@ -158,7 +157,7 @@ Column pinning is controlled through the [`pinned`](https://www.infragistics.com -You may also use the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#unpinColumn) methods of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) to pin or unpin columns by their field name: +You may also use the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#unpinColumn) methods of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) to pin or unpin columns by their field name: @@ -187,7 +186,7 @@ const columnPinning = (event: IgrPinColumnCancellableEventArgs) = { ## Pinning Position -You can change the column pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#pinning) configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right. ```typescript @@ -424,7 +423,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. @@ -632,7 +630,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. @@ -854,7 +851,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) 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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). @@ -1031,7 +1027,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-resizing.md index 0ba495ba8..5b70c2427 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-resizing.md @@ -177,7 +177,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - **Column resizing** is also enabled per-column level, meaning that the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#resizable) input of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html). ```tsx @@ -440,7 +439,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -600,7 +598,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-selection.md index 02f74020a..71b8d7d50 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-selection.md @@ -13,7 +13,7 @@ _premium: true # React Grid Column Selection Overview -The React Grid Column Selection feature in Ignite UI for React offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. +The React Grid Column Selection feature in Ignite UI for React offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. ## React Grid Column Selection Example @@ -192,10 +192,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Basic Usage -The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) input, which takes `GridSelectionMode` values. +The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#columnSelection) input, which takes `GridSelectionMode` values. ## Interactions @@ -361,11 +360,10 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Keyboard Combinations > [!Note] -> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) input is set to `multiple`. +> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#columnSelection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: @@ -543,7 +541,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References The column selection UI has a few more APIs to explore, which are listed below. @@ -554,12 +551,12 @@ The column selection UI has a few more APIs to explore, which are listed below. [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) properties: -- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) -- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#selectedColumns) -- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#selectColumns) -- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#deselectColumns) -- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#selectAllColumns) -- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#deselectAllColumns) +- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#columnSelection) +- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#selectedColumns) +- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#selectColumns) +- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#deselectColumns) +- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#selectAllColumns) +- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#deselectAllColumns) [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-types.md index 51a2d9423..71f80ef47 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-column-types.md @@ -328,7 +328,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## React Grid Default Template @@ -343,7 +342,7 @@ This column [`dataType`](https://www.infragistics.com/products/ignite-ui-react/d ### Number -If the [`dataType`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: +If the [`dataType`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: - Number of digits after the decimal point - Decimal separator with `,` or `.` @@ -358,7 +357,7 @@ const formatOptions : IgrColumnPipeArgs = { ### 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: +The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: - **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc. - **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: @@ -441,7 +440,7 @@ Default template is using the value coming from the data as an image source to a ``` -When [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#autoGenerate) is used for the 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 [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#autoGenerate) is used for the 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. ### Currency @@ -541,7 +540,7 @@ const formatCurrency = (value: number) => { - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) - [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) - [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) -- [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) +- [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#locale) - [`dataType`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#dataType) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-conditional-cell-styling.md index 4f9df303f..2a0488478 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-conditional-cell-styling.md @@ -19,31 +19,31 @@ The Ignite UI for React Conditional Styling feature in React Grid allows custom The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component in Ignite UI for React provides two ways to **conditional styling of rows** based on custom rules. -- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) input on the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component; -- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowStyles) input on the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component; +- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowClasses) input on the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component; +- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowStyles) input on the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component; Further in this topic we will cover both of them in more details. ### Using Row Classes -You can conditionally style the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) input and define custom rules. +You can conditionally style the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowClasses) input and define custom rules. ```tsx ``` -The [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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. ```tsx const rowClasses = { - activeRow: (row: IgrRowType) => row.index === 0 + activeRow: (row: IgrRowType) => row.index % 2 === 0 } ``` ```css .activeRow { - border: 2px solid #fc81b8; + border-top: 2px solid #fc81b8; border-left: 3px solid #e41c77; } ``` @@ -150,12 +150,11 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Using Row Styles -The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). +The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). -> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) is: +> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowClasses) is: ```tsx (row: IgrRowType) => boolean @@ -452,7 +451,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Grid Conditional Cell Styling ## Overview @@ -680,7 +678,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - - By using the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) input [`cellStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#cellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. > The callback signature for both `cellStyles` and `cellClasses` is now changed to: @@ -865,7 +862,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## 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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-editing.md index b37146da9..8514a701b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-editing.md @@ -20,7 +20,7 @@ The Ignite UI for React Cell Editing feature in React Grid provides an easy way ## Setup -In order to specify which edit mode should be enabled, the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable). +In order to specify which edit mode should be enabled, the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowEditable). The [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) property enables you to specify the following options: @@ -29,12 +29,12 @@ The [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/type > Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). -The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) property enables you to specify the following options: +The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowEditable) property enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled. This is the default value. - **true** - the row editing in the corresponding grid will be enabled. -In the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. +In the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. @@ -613,7 +611,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -804,7 +801,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-export-excel.md index 359bd5d6f..7c20c8681 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-export-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-export-excel.md @@ -199,7 +199,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Export Grouped Data @@ -434,7 +433,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Export Grid with Frozen Column Headers By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` `FreezeHeaders` to `true`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-filtering.md index 1b49c51ea..c0eb22426 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-filtering.md @@ -122,22 +122,21 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Setup -In order to specify if filtering is enabled and which filtering mode should be used, the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable). +In order to specify if filtering is enabled and which filtering mode should be used, the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable). -Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowFiltering) enables you to specify the following options: +Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#allowFiltering) enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled. This is the default value. - **true** - the filtering for the corresponding grid will be enabled. -Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering) enables you to specify the following options: +Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#allowAdvancedFiltering) enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled. This is the default value. - **true** - the advanced filtering for the corresponding grid will be enabled. -Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filterMode) enables you to specify the following options: +Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#filterMode) enables you to specify the following options: - **QuickFilter** - a simplistic filtering UI. This is the default value. - **ExcelStyleFilter** - an Excel-like filtering UI. @@ -156,7 +155,7 @@ Property [`filterable`](https://www.infragistics.com/products/ignite-ui-react/do -To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering) input property to **true** +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#allowAdvancedFiltering) input property to **true** ```tsx @@ -176,7 +175,7 @@ While some filtering conditions have been applied to a column, and the filter ro 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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#dataType) of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the `IgnoreCase` and the initial `Condition` properties. -The filtering feature is enabled for the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable) input to **false**. +The filtering feature is enabled for the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable) input to **false**. @@ -193,7 +192,7 @@ The filtering feature is enabled for the [`IgrGrid`](https://www.infragistics.co ## Initial filtered state -To set the initial filtering state of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), set the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringExpressionsTree) for each column to be filtered. +To set the initial filtering state of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), set the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#filteringExpressionsTree) for each column to be filtered. ```tsx const filteringExpressions: IgrFilteringExpressionsTree = { @@ -226,7 +225,7 @@ return ( ### Filtering logic -The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringLogic) property of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) controls how filtering multiple columns will resolve in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). You can change it at any time through the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) API, or through the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) input property. +The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#filteringLogic) property of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) controls how filtering multiple columns will resolve in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). You can change it at any time through the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) API, or through the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) input property. ```tsx import { FilteringLogic } from "igniteui-react-grids"; @@ -454,7 +453,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Known Limitations > [!Note] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-groupby.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-groupby.md index 2851b5032..ce0d6fb39 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-groupby.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-groupby.md @@ -11,7 +11,7 @@ _premium: true # React Grid Group By -The Ignite UI for React Group By behavior in React IgrGrid creates grouped data rows based on the column values. The Group By in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection) property is set to multiple, clicking over the Group By row selector selects all records belonging to this group. +The Ignite UI for React Group By behavior in React IgrGrid creates grouped data rows based on the column values. The Group By in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowSelection) property is set to multiple, clicking over the Group By row selector selects all records belonging to this group. ## React Grid Group By Example @@ -256,7 +256,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#groupingExpressions) property of the grid. @@ -568,7 +567,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Group By With Summaries Integration between Group By and Summaries is described in the [Summaries](summaries.md#summaries-with-group-by) topic. @@ -895,7 +893,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - The sample defines custom sorting for the different date conditions. Each custom strategy defines the `GroupingComparer` method, which is the custom compare function used when sorting the values. Additionally it extracts the values from the date needed for the comparison. @@ -1217,7 +1214,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Known Limitations |Limitation|Description| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-icons.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-icons.md index 12c0670b3..8048b4564 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-icons.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-icons.md @@ -318,7 +318,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Internal Icons The following lists all internal icons. Alias is the name of the icon by which it can be referenced. Target Icon is the internal icon name and Target Collection is the collection in which the icon is registered internally. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-keyboard-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-keyboard-navigation.md index 58f340956..3e779f66a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-keyboard-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-keyboard-navigation.md @@ -102,19 +102,11 @@ over Group Row - collapses the group. - - - - - ALT + → or ALT + ↓ - over Group Row - expands the group. - - - - - ALT + ← or ALT + ↑ - over Master Detail Row - collapses the details view. @@ -129,7 +121,6 @@ Practice all of the above mentioned actions in the demo sample below. Focus any - ## Custom Keyboard Navigation Overriding the default behavior for a certain key or keys combination is one of the benefits that the **Keyboard Navigation** feature provides. For example: press the ENTER or TAB key to navigate to the next cell or the cell below. This or any other navigation scenario is easily achieved by the **Keyboard Navigation** API: @@ -312,7 +303,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Known Limitations |Limitation|Description| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/binding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md similarity index 99% rename from packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/binding.md rename to packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md index d5a519406..5f3198289 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/binding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md @@ -276,7 +276,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - + +Add the `` component to your markup: + +```tsx +return ( +
+
+ +
+
+); +``` + +## Grid Lite in Action + +```typescript +export type UserSimple = { + id: string; + username: string; + email: string; + subscribed: boolean; +}; + +export type ProductInfo = { + id: string; + name: string; + price: number; + sold: number; + rating: number; + total: number; +}; + +export type User = { + id: string; + firstName: string; + lastName: string; + age: number; + email: string; + avatar: string; + active: boolean; + priority: 'Low' | 'Standard' | 'High'; + employmentType: 'Full-Time' | 'Part-Time' | 'Contract'; + department: 'Engineering' | 'Marketing' | 'Sales' | 'Finance'; + satisfaction: number; + registeredAt: Date; +}; + +export class GridLiteDataService { + private counter = 0; + + private namesMen = ['John', 'Bob', 'Mark', 'Charlie', 'Martin', 'Bill', 'Frank', 'Larry', 'Henry', 'Steve', 'Mike', 'Andrew']; + private namesWomen = ['Jane', 'Alice', 'Diana', 'Eve', 'Grace' , 'Katie', 'Irene', 'Liz', 'Fiona', 'Pam', 'Val', 'Mindy']; + private lastNames = ['Smith', 'Johnson', 'Mendoza', 'Brown', 'Spencer', 'Stone', 'Stark', 'Rooney']; + private productNames = ['Widget', 'Gadget', 'Gizmo', 'Device', 'Tool', 'Instrument', 'Machine', 'Equipment']; + private productModels = ['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite']; + private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High']; + private employmentTypes: ('Full-Time' | 'Part-Time' | 'Contract')[] = ['Full-Time', 'Part-Time', 'Contract']; + private departments: ('Engineering' | 'Marketing' | 'Sales' | 'Finance')[] = ['Engineering', 'Marketing', 'Sales', 'Finance']; + + private randomInt(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1)) + min; + } + + private randomFloat(min: number, max: number, precision = 2): number { + const array = new Uint32Array(1); + window.crypto.getRandomValues(array); + const random01 = array[0] / 2 ** 32; + return parseFloat((random01 * (max - min) + min).toFixed(precision)); + } + + private randomElement(array: T[]): T { + return array[this.randomInt(0, array.length - 1)]; + } + + private randomBoolean(): boolean { + const array = new Uint8Array(1); + window.crypto.getRandomValues(array); + return (array[0] & 1) === 0; + } + + private generateId(): string { + return `1000-${this.counter++}-${this.randomInt(1000, 9999)}`; + } + + createProductInfo(): ProductInfo { + const price = this.randomFloat(50, 500, 2); + const sold = this.randomInt(10, 100); + const total = parseFloat((price * sold).toFixed(2)); + const product = this.randomElement(this.productNames) + ' ' + this.randomElement(this.productModels); + + return { + price, + sold, + total, + id: this.generateId(), + name: product, + rating: this.randomFloat(0, 5, 1) + }; + } + + createUserSimple(): UserSimple { + const firstName = this.randomElement(this.namesMen.concat(this.namesWomen)).toLowerCase(); + const lastName = this.randomElement(this.lastNames).toLowerCase(); + const email = firstName + '.' + lastName + '@example.com'; + const username = firstName + '.' + lastName + this.randomInt(1, 99); + return { + id: this.generateId(), + username: username, + email: email, + subscribed: this.randomBoolean() + }; + } + + createUser(): User { + let imagePath: string = ""; + let firstName: string = ""; + const gender = this.randomInt(0, 1); + if (gender === 0) { + imagePath = "https://dl.infragistics.com/x/img/people/men/" + this.randomInt(10, 40) + ".png"; + firstName = this.randomElement(this.namesMen); + } else { + imagePath = "https://dl.infragistics.com/x/img/people/women/" + this.randomInt(10, 40) + ".png"; + firstName = this.randomElement(this.namesWomen); + } + const lastName = this.randomElement(this.lastNames); + const email = firstName.toLowerCase() + '.' + lastName.toLowerCase() + '@example.com'; + + return { + id: this.generateId(), + firstName, + lastName, + age: this.randomInt(18, 90), + email, + avatar: imagePath, + active: this.randomBoolean(), + priority: this.randomElement(this.priorities), + employmentType: this.randomElement(this.employmentTypes), + department: this.randomElement(this.departments), + satisfaction: this.randomInt(0, 5), + registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000)) + }; + } + + generateUsers(count: number): User[] { + return Array.from({ length: count }, () => this.createUser()); + } + + generateProducts(count: number): ProductInfo[] { + return Array.from({ length: count }, () => this.createProductInfo()); + } + + generateSimpleUsers(count: number): UserSimple[] { + return Array.from({ length: count }, () => this.createUserSimple()); + } +} +``` +```css +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +igc-grid-lite { + min-height: 75vh; + --ig-size: 1; +} + +/* Badge spacing tokens are scale multipliers; 2.6667 = 0.5rem target inline padding / 0.1875rem base spacing unit. */ +.badge-padded { + --ig-spacing-inline: 2.6667; +} + +.badge-padded::part(base) { + padding-block: 0.125rem; + color: var(--ig-gray-900) !important; +} + +/* Use lighter variant shades across both department (filled) and employment (outlined) badges. */ +.badge-padded[variant="success"] { + --ig-badge-border-color: var(--ig-success-300); +} + +.badge-padded[variant="warning"] { + --ig-badge-border-color: var(--ig-warn-300); +} + +.badge-padded[variant="primary"] { + --ig-badge-border-color: var(--ig-primary-300); +} + +.badge-padded[variant="danger"] { + --ig-badge-border-color: var(--ig-error-300); +} + +/* Force lighter fills for department (filled) badges. */ +.badge-padded.badge-department[variant="success"]::part(base) { + background: var(--ig-success-300) !important; +} + +.badge-padded.badge-department[variant="warning"]::part(base) { + background: var(--ig-warn-300) !important; +} + +.badge-padded.badge-department[variant="primary"]::part(base) { + background: var(--ig-primary-300) !important; +} + +.badge-padded.badge-department[variant="danger"]::part(base) { + background: var(--ig-error-300) !important; +} + +/* Employment badges are outline-only. */ +.badge-employment::part(base) { + background: transparent !important; + box-shadow: inset 0 0 0 0.125rem var(--ig-badge-border-color) !important; +} +``` +```tsx +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import { GridLiteDataService, User } from "./GridLiteDataService"; +import "./index.css"; +import { + IgrAvatar, + IgrBadge, + IgrRating, + type StyleVariant, +} from "igniteui-react"; +import { + IgrGridLite, + IgrGridLiteColumn, + type IgrCellContext, +} from "igniteui-react/grid-lite"; + +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./index.css"; + +const avatarCellTemplate = (ctx: IgrCellContext) => ( + +); + +const satisfactionCellTemplate = (ctx: IgrCellContext) => ( + +); + +const getDepartmentBadgeVariant = (value: string): StyleVariant => { + switch (value) { + case "Engineering": + return "primary"; + case "Marketing": + return "warning"; + case "Sales": + return "danger"; + case "Finance": + return "success"; + default: + return "primary"; + } +}; + +const getEmploymentTypeOutline = (value: string): StyleVariant => { + switch (value) { + case "Full-Time": + return "success"; + case "Part-Time": + return "warning"; + case "Contract": + return "primary"; + default: + return "primary"; + } +}; + +const employmentTypeCellTemplate = (ctx: IgrCellContext) => ( + + {ctx.value} + +); + +const departmentCellTemplate = (ctx: IgrCellContext) => ( + + {ctx.value} + +); + +const registeredAtCellTemplate = (ctx: IgrCellContext) => ( + {ctx.value.toLocaleString()} +); + +export default function Sample() { + const [data, setData] = React.useState([]); + + useEffect(() => { + const dataService = new GridLiteDataService(); + const data: User[] = dataService.generateUsers(1000); + setData(data); + }, []); + + return ( +
+
+ + + + + + + + + + +
+
+ ); +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); +``` + +Grid Lite is designed to give you the core features that you need to deliver a beautiful data grid / data table experience in your apps. Designed for performance and beauty, the Grid Lite will work in any framework, on any platform. + +## Performance Built In + +Row-level virtualization allows you to render unlimited amounts of data with smooth scrolling. + +## Automatic Column Types + +Column types are automatically generated based on your data source, with built-in filtering tailored to each column type. + +## Interactive Features + +All the core interactive features your users expect: column filtering, column hiding, column resizing, column sorting, and more. + +## Beautiful UX & Branding + +Built-in theme support for Bootstrap, Material & Fluent, plus endless branding options in color palettes, fonts, elevation, display density & more. + +## Rich Keyboard Navigation + +Full Excel-style keyboard navigation gives users the experience they expect, with high performance even on large datasets. + +## Is Grid Lite a Free & Open-Source React Data Grid? + +Yes. Ignite UI Grid Lite is a free, open-source React data grid released under the MIT license. You can use it in commercial or personal projects with no licensing fees. It is part of our initiative to make Ignite UI more open, transparent, and accessible. + +- MIT-licensed + +- Free for commercial use + +- Community-driven development + +- No feature gating + +However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free React data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-sorting.md similarity index 99% rename from packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/sorting.md rename to packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-sorting.md index f36ebc9f6..beca023a5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-sorting.md @@ -236,7 +236,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Single and multi-sorting The Grid Lite supports both single and multi-column sorting. Multi-column is enabled by default and can be configured through the `sortingOptions` property of the grid. The `mode` property accepts `'single'` or `'multiple'` as values. @@ -523,7 +522,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Sort Model The building block for sort operations in the Grid Lite is the `SortingExpression` which has the following properties: @@ -880,7 +878,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Remote sort operations In cases where sorting must be done remotely or you want to save the current state/data to a server somewhere, the Grid Lite exposes a hook where you can implement and customize this behavior. @@ -1177,7 +1174,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - @@ -468,7 +467,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - and finally set up the behaviour for the RowIslands: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-actions.md index 4bd687dcd..b4ecfbe19 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-actions.md @@ -19,7 +19,7 @@ The Ignite UI for React Row Actions feature in React Grid enables developers to The predefined actions UI components are: -- [`IgrGridEditingActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) option and row deletion of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). +- [`IgrGridEditingActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowEditable) option and row deletion of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). - [`IgrGridPinningActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridpinningactions.html) - includes functionality and UI specifically designed for the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. @@ -47,7 +47,7 @@ They are added inside the [`IgrGrid`](https://www.infragistics.com/products/igni These components expose templates giving flexibility for customization. For instance, if we would like to use the [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) for a Gmail scenario with row actions such as **delete**, **edit** and etc. You can simply create button component with icon, add click event to it and insert it into the [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html). - + @@ -191,7 +191,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrGridPinningActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridpinningactions.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-adding.md index 05fc3763a..93728d488 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-adding.md @@ -139,10 +139,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Row Adding Usage -Then define a [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) set to true and an [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#addRow) input controls the visibility of the button that spawns the row adding UI. +Then define a [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowEditable) set to true and an [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#addRow) input controls the visibility of the button that spawns the row adding UI. @@ -186,7 +185,7 @@ The internal `BaseTransactionService` is automatically provided for [`grid`](htt -Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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. +Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#beginAddRowById) requires you to specify the row to use as context for the operation by its `RowID` (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. ```typescript gridRef.current.beginAddRowById('ALFKI'); // Spawns the add row UI under the row with PK 'ALFKI' @@ -219,9 +218,6 @@ After a new row is added through the row adding UI, its position and/or visibili ## Keyboard Navigation - ALT + + - Enters edit mode for adding a row - - - - ESC exits row adding mode without submitting any changes - TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. @@ -236,7 +232,7 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowAddTextTemplate). +Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowAddTextTemplate). @@ -263,13 +259,13 @@ The row adding UI comprises the buttons in the [`IgrActionStrip`](https://www.in ## API References -- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `RowEditCancel` -- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#endEdit) -- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#endEdit) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#primaryKey) - [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-drag.md index a027b9c2d..a5302d576 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-drag.md @@ -13,7 +13,7 @@ _premium: true # Row Dragging in React Grid -The Ignite UI for React Row Dragging feature in React Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable) input. +The Ignite UI for React Row Dragging feature in React Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowDraggable) input. ## React Grid Row Drag Example @@ -164,10 +164,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Configuration -In order to enable row-dragging for your [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. +In order to enable row-dragging for your [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. ```tsx @@ -176,7 +175,7 @@ In order to enable row-dragging for your [`IgrGrid`](https://www.infragistics.co ### Templating the Drag Icon -The drag handle icon can be templated using the grid's [`dragIndicatorIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#dragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (**drag_indicator**) to **drag_handle**. @@ -219,9 +218,9 @@ With the help of the grid's row drag events you can create a grid that allows yo > [!Note] -> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. +> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. -Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: +Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@ -447,18 +446,17 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Limitations -Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable). +Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowDraggable). ## API References -- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable) +- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowDraggable) - `RowDragStart` - `RowDragEnd` - [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-editing.md index f0c6aca37..8a1851ee5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-editing.md @@ -128,13 +128,12 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - > [!Note] > When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode. ## Row Editing Usage -Define a [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) set to true: +Define a [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowEditable) set to true: @@ -163,7 +162,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { > Setting primary key is mandatory for row editing operations. > [!Note] -> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) property in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) input of that column to `false`. +> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowEditable) property in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) input of that column to `false`. > [!Note] > The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. @@ -391,10 +390,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Known Issues and Limitations -- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection @@ -406,14 +404,14 @@ root.render(); ## API References -- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` -- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#endEdit) +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#endEdit) - [`field`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#field) - [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) -- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#primaryKey) - [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-pinning.md index 86fbfcc37..f1360ac59 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-pinning.md @@ -183,7 +183,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Row Pinning UI The built-in row pinning UI is enabled by adding an [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) component with the [`IgrGridPinningActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridpinningactions.html) component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. @@ -206,7 +205,7 @@ The built-in row pinning UI is enabled by adding an [`IgrActionStrip`](https://w ## Row Pinning API -Row pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pinned) input of the `Row`. Pinned rows are rendered at the top of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) by default and stay fixed through vertical scrolling of the unpinned rows in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) body. +Row pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrow.html#pinned) input of the `Row`. Pinned rows are rendered at the top of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) by default and stay fixed through vertical scrolling of the unpinned rows in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) body. ```tsx gridRef.current.getRowByIndex(0).pinned = true; @@ -219,7 +218,7 @@ gridRef.current.pinRow('ALFKI'); gridRef.current.unpinRow('ALFKI'); ``` -Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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. +Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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` event and changing the `InsertAtIndex` property of the event arguments to the desired position index. @@ -236,7 +235,7 @@ const rowPinning = (event: IgrPinRowEventArgs) => { ## Pinning Position -You can change the row pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#pinning) configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom. @@ -421,7 +420,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - @@ -597,11 +595,10 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) -- [`IgrGridRowComponent`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrowcomponent.html) +- [`IgrGridRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrow.html) - [`IgrRowType`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrrowtype.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-selection.md index 80c142534..a2f2b80ac 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-row-selection.md @@ -320,7 +320,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Setup In order to setup row selection in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), you just need to set the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection) property. This property accepts `GridSelectionMode` enumeration. @@ -457,7 +456,7 @@ const mySelectedRows = [1,2,3]; You can template header and row selectors in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) and also access their contexts which provide useful functionality for different scenarios. -By default, the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`click`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckboxbase.html#click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. +By default, the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`click`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html#click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. #### Row Template @@ -505,7 +504,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { } ``` -In the above example we are using an [`IgrCheckbox`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html) and we bind `rowContext.selected` to its [`checked`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckboxbase.html#checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). +In the above example we are using an [`IgrCheckbox`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html) and we bind `rowContext.selected` to its [`checked`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html#checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). ### Header Template @@ -714,7 +713,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Excel Style Row Selectors Demo @@ -895,7 +893,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Conditional Selection Demo @@ -1062,11 +1059,10 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) -- [`IgrGridRowComponent`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrowcomponent.html) +- [`IgrGridRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridrow.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-search.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-search.md index 7b63e45a4..b90bf96a1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-search.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-search.md @@ -223,7 +223,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## React Search Usage ### Grid Setup @@ -265,7 +264,7 @@ const [searchText, setSearchText] = useState(''); Now let's create our search input! By binding our `searchText` to the `value` property to our newly created input and subscribe to the `inputOccured` event, we can detect every single `searchText` modification by the user. This will allow us to use the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'s `findNext` and `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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findPrev) methods have three arguments: +Both the [`findNext`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#findPrev) methods have three arguments: - `Text`: **string** (the text we are searching for) - (optional) `CaseSensitive`: **boolean** (should the search be case sensitive or not, default value is false) @@ -289,7 +288,7 @@ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => { ### 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#findPrev) methods inside the buttons' respective click event handlers. @@ -310,7 +309,7 @@ const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) = ### 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#findPrev) methods depending on which key the user has pressed. @@ -368,7 +367,7 @@ What if we would like to filter and sort our [`IgrGrid`](https://www.infragistic 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. -Let's begin by creating the search navigation buttons on the right of the input by adding two 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findPrev) methods. +Let's begin by creating the search navigation buttons on the right of the input by adding two 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#findPrev) methods. - For displaying a couple of chips that toggle the `CaseSensitive` and the `ExactMatch` properties. We have replaced the checkboxes with two stylish chips. Whenever a chip is clicked, we invoke its respective handler. @@ -455,10 +454,10 @@ In this article we implemented our own search bar for the [`IgrGrid`](https://ww [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) methods: -- [`findNext`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findNext) -- [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findPrev) -- [`clearSearch`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clearSearch) -- [`refreshSearch`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#refreshSearch) +- [`findNext`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#findNext) +- [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#findPrev) +- [`clearSearch`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#clearSearch) +- [`refreshSearch`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#refreshSearch) [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-selection.md index 4ea732b6d..b74ce078f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-selection.md @@ -18,7 +18,7 @@ With the Ignite UI for React Select feature in React Grid you can easily interac - Cell selection - Column selection -With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection) property, you can specify: +With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowSelection) property, you can specify: - None - Single @@ -155,18 +155,17 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## React Grid Selection Options -The Ignite UI for React [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) 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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#selectable) properties. +The Ignite UI for React [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) 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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#selectable) properties. ### React Grid Row Selection -Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection) enables you to specify the following options: +Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowSelection) enables you to specify the following options: - `None` - Row selection would be disabled for the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). - `Single` - Selection of only one row within the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) would be available. @@ -176,7 +175,7 @@ Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/ ### React Grid Cell Selection -Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) enables you to specify the following options: +Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#cellSelection) enables you to specify the following options: - `None` - Cell selection would be disabled for the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). - `Single` - Selection of only one cell within the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) would be available. @@ -658,12 +657,11 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Known Issues and Limitations -When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection - Row Expand/collapse diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-size.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-size.md index 0d8ebf8ae..de59b5818 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-size.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-size.md @@ -308,7 +308,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage As you can see in the demo above, the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set `--ig-size` either inline or part of a CSS class: @@ -323,11 +322,11 @@ As you can see in the demo above, the [`IgrGrid`](https://www.infragistics.com/p ``` -And now let's see in details how each option reflects on the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component. When you switch between different size options the height of each [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width), please consider the fact that it must be bigger than the sum of left and right padding: +And now let's see in details how each option reflects on the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) component. When you switch between different size options the height of each [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width), please consider the fact that it must be bigger than the sum of left and right padding: -- **large** - this is the default [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `80px`; -- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `64px`; -- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `56px`; +- **large** - this is the default [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) is `80px`; +- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) is `64px`; +- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) is `56px`; > [!Note] > Please keep in mind that currently you **can not** override any of the sizes. @@ -424,16 +423,14 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio } ``` -Another option that [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) provides for you, in order to be able to change the height of the rows in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowHeight). So let's see in action how this property affects the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) layout along with the `--ig-size`. +Another option that [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) provides for you, in order to be able to change the height of the rows in the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowHeight). So let's see in action how this property affects the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) layout along with the `--ig-size`. 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowHeight) specified**. +- `--ig-size` CSS variable will have no impact on row height **if there is [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowHeight) specified**. - `--ig-size` will **affect all of the rest elements in the Grid**, as it has been described above. -We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowHeight) property to the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html): - - +We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#rowHeight) property to the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html): ```tsx diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-sizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-sizing.md index 84d62186b..ef508b0f5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-sizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-sizing.md @@ -12,23 +12,23 @@ _premium: true # React Grid Sizing -The Ignite UI for React Sizing feature in React Grid is an important aspect of creating responsive and user-friendly grid interfaces. The React Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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. +The Ignite UI for React Sizing feature in React Grid is an important aspect of creating responsive and user-friendly grid interfaces. The React Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. > [!Note] > If the Border box sizing is overridden by the user we cannot guarantee that the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) will size correctly. ## React Grid Width -If the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) input does not have value assigned, its default value is `100%` and the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. +If the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) input does not have value assigned, its default value is `100%` and the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. > [!Note] -> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) style of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) itself will result in an unexpected behavior. +> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) style of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) itself will result in an unexpected behavior. ### Null -The grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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. +The grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. +- If there are 6 columns and none of them has width defined, the grid will have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. columns-default-gridWidth-null-v2 @@ -49,9 +49,9 @@ The grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ ### Pixels -When the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content: -- When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width). Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. +- 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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#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-v2 @@ -62,9 +62,9 @@ When the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/ ### Percentages -When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) will size relative to the browser window. +When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) will size relative to the browser window. -- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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. +- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#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-100p-v2 @@ -72,7 +72,7 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ty width-percent-parent-100p-v2 -- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. +- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. width-percent-150p-parent-noscroll-v2 width-percent-150p-parent-scroll-v2 @@ -82,11 +82,11 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ty By default if no height is defined for the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html), it will be set to `100%`. You can check how the grid reacts depending on the DOM structure in the `Percentages` section. > [!Note] -> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) style of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) itself will result in an unexpected behavior. +> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height) style of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) itself will result in an unexpected behavior. ### Null -The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height) input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway. - If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. @@ -96,7 +96,7 @@ The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/types height-null-24rows-v2 -- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: +- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: height-null-24rows-parent-noscroll-v2 height-null-24rows-parent-scroll-v2 @@ -106,28 +106,28 @@ The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/types ### Pixels -Setting the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is set in pixels. +Setting the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#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-4rows-v2 -- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: +- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: height-500px-14rows-v2 -- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. +- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. height-700px-14rows-parent-noscroll-v2 height-700px-14rows-parent-scroll-v2 ### Percentages -When the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) input is set to percentages, the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) set in pixels or percentages, the grid will size relative to the size of the parent. +When the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height) input is set to percentages, the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `1200px` and the parent element not having any size applied to it: +Let's have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#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. @@ -141,7 +141,7 @@ Let's have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ height-percent-100-parent-800px-v2 -- If the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height) is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. height-percent-130p-parent-noscroll-v2 height-percent-130p-parent-scroll-v2 @@ -160,7 +160,7 @@ By default when a column doesn't have a specified width it will try to autosize, 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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) and the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) `null` and 6 columns that don't have width, each column will be sized to `136px`. columns-default-gridWidth-null-v2 @@ -168,15 +168,15 @@ When the grid is resized in these scenarios, the column width is also updated to columns-default-all-row-selectors-v2 -- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `1000px`. +- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) set to `1000px`. columns-default-all-min-136px-v2 -- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `100px`, the first will fill the rest. +- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) of `100px`, the first will fill the rest. columns-default-first-rest-100px-v2 -- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `100px`. +- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) set to `100px`. columns-default-all-first-100px-v2 @@ -185,19 +185,19 @@ When the grid is resized in these scenarios, the column width is also updated to ### Pixels -When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of the columns is static, it can be less than the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) or exceed it. +When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) of the columns is static, it can be less than the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) or exceed it. -- If the combined `width` of all columns is less than the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). In the next example the columns have `150px` width. +- If the combined `width` of all columns is less than the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). In the next example the columns have `150px` width. columns-150px-empty-area-v2 -- If the combined [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of all columns is bigger than the actual [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) of all columns is bigger than the actual [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width), a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. columns-150px-extra-area-v2 ### Percentages -When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. +When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. - If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. @@ -211,7 +211,7 @@ When columns have set [`width`](https://www.infragistics.com/products/ignite-ui- columns-percent-bigger-100p-v2 -- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `50%`: +- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) set to `50%`: columns-percent-gridWidth-null-v2 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-sorting.md index a4e38bec6..ca62e784c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-sorting.md @@ -244,7 +244,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - This is done via the [`sortable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortable) input. With the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) sorting, you can also set the [`sortingIgnoreCase`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortingIgnoreCase) property to perform case sensitive sorting: ```tsx @@ -454,10 +453,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Sorting through the API -You can sort any column or a combination of columns through the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) API using the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`sort`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sort) method: +You can sort any column or a combination of columns through the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) API using the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) [`sort`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#sort) method: ```tsx import { SortingDirection } from "igniteui-react-grids"; @@ -479,7 +477,7 @@ gridRef.current.sort([ > [!Note] > Sorting is performed using our `DefaultSortingStrategy` algorithm. Any [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) or `ISortingExpression` can use a custom implementation of the `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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clearSort) method: +As with the filtering behavior, you can clear the sorting state by using the [`clearSort`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#clearSort) method: @@ -494,14 +492,14 @@ gridRef.current.clearSort(); > [!Note] -> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortStrategy) of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortStrategy) of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html), since they work in different scopes and expose different parameters. +> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortStrategy) of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#sortStrategy) of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html), since they work in different scopes and expose different parameters. > [!Note] > The sorting operation **DOES NOT** change the underlying data source of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). ## Initial Sorting State -It is possible to set the initial sorting state of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortingExpressions) property of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). +It is possible to set the initial sorting state of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#sortingExpressions) property of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html). ```tsx const sortingExpressions: IgrSortingExpression[] = [ @@ -528,7 +526,7 @@ const sortingExpressions: IgrSortingExpression[] = [ The sorting indicator icon in the column header can be customized using a template. The following properties are available for templating the sorting indicator for any sorting state (ascending, descending, none): -- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. +- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. @@ -546,7 +544,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { -- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. +- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. @@ -564,7 +562,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { -- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. +- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. @@ -778,7 +776,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrSortingExpression`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrsortingexpression.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-state-persistence.md index 422d04638..187da06f5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-state-persistence.md @@ -450,7 +450,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Limitations diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-summaries.md index ba212cf28..74b557ee9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-summaries.md @@ -130,7 +130,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - > [!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** @@ -482,7 +481,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Disabled Summaries The [`disabledSummaries`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#disabledSummaries) property provides precise per-column control over the React Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgrGrid, 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. @@ -1080,7 +1078,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs). When using custom operands, the [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) and [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#summaryFormatter) property. @@ -1207,7 +1204,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Summaries with Group By @@ -1452,7 +1448,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Keyboard Navigation @@ -1715,7 +1710,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-toolbar.md index 667c5e84b..262abcc60 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-toolbar.md @@ -186,7 +186,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - The predefined [`IgrGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridtoolbaractions.html) and [`IgrGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridtoolbartitle.html) UI components are added inside the [`IgrGridToolbar`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridtoolbar.html) and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: @@ -393,7 +392,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Title @@ -698,7 +696,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## 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. @@ -829,7 +826,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -1012,7 +1008,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References The Grid Toolbar service has a few more APIs to explore, which are listed below. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-virtualization.md index d8cff054e..4cd95130d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-virtualization.md @@ -280,19 +280,18 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Enabling Virtualization -The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) 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. The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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. +The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html) 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. The [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) is `null`). +However, it is also possible to explicitly set the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#height) is `null`). The size of the data chunks is determined by: -- The row height for the vertical (row) virtualization. This is determined by the [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.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 [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#columnWidth) option, which will be applied to all columns that don't have explicit width set. In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the [`IgrGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html)'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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grids-theming.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grids-theming.md deleted file mode 100644 index 19f0b2c84..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grids-theming.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: React Grid theming | Real-Time React Tables | The Lightweight React Web Components table | Infragistics -_description: . -_keywords: React data grid, infragistics, data grids theming, theming, Ignite UI for React, table -_license: commercial -mentionedTypes: ["Infragistics.Controls.Grid.Implementation.Grid"] -namespace: Infragistics.Controls -_tocName: Theming -_premium: true ---- - -# Theme React Data Grid - -With the React Theming engine, the Ignite UI for React Grid can be easily customized to match your brand identity. -In addition to predefined themes and palettes, you can further customize the look and feel of your data grid by using a set of CSS custom properties. - -## Available Theming Properties - -| Property name | Type | Description | -|------------------------------------------|--------------------------|----------------------------------------------------------------------------------------------| -| --grid-elevation | number between 0-24 | The elevation level, to be used for the grid | -| --drag-elevation | number between 0-24 | The elevation level, to be used for movable elements (ex. column header) | -| --grouparea-color | color | The grid group area text color | -| --grouparea-background | color | The grid group area text color | -| --drop-area-text-color | color | The drop area text color | -| --drop-area-icon-color | color | The drop area icon color | -| --drop-area-background | color | The drop area background color | -| --drop-area-on-drop-background | color | The drop area background on drop color | -| --header-background | color | The grid header background color | -| --header-text-color | color | The grid header text color | -| --header-selected-background | color | The grid header background color when selected (ex. column selection). | -| --header-selected-text-color | color | The grid header text color when selected (ex. column selection). | -| --sortable-header-icon-hover-color | color | The icon color on hover in grid header when the column is sortable. | -| --sorted-header-icon-color | color | The sorted table header icon color | -| --header-border-width | border-width | The border width used for header borders. | -| --header-border-style | border-style | The border style used for header borders. Can be 'dotted', 'dashed' or 'solid' | -| --header-border-color | color | The color used for header borders. | -| --ghost-header-background | color | The dragged header background color. | -| --ghost-header-text-color | color | The dragged header text color. | -| --ghost-header-icon-color | color | The dragged header icon color. | -| --filtering-background-and | color | The background color of advanced filtering "AND" condition. | -| --filtering-background-or | color | The background color on focus/selected of advanced filtering "AND" condition. | -| --filtering-background-and--focus | color | The background color of advanced filtering "OR" condition. | -| --filtering-background-or--focus | color | The background color on focus/selected of advanced filtering "OR" condition. | -| --grid-border-color | color | The border color surrounding the grid. | -| --content-background | color | The grid body background color. | -| --content-text-color | color | The grid body text color. | -| --row-odd-background | color | The background color of odd rows. | -| --row-even-background | color | The background color of even rows. | -| --row-odd-text-color | color | The text color of odd rows. | -| --row-even-text-color | color | The text color of even rows. | -| --row-selected-background | color | The selected row background color. | -| --tree-selected-filtered-row-text-color | color | The selected/filtered row text color | -| --row-selected-text-color | color | The selected row text color. | -| --cell-selected-within-background | color | The background of the selected cell inside a selected row/column. | -| --cell-selected-within-text-color | color | The color of the selected cell inside a selected row/column. | -| --row-selected-hover-background | color | The selected row hover background. | -| --row-selected-hover-text-color | color | The selected row hover tex | -| --row-hover-background | color | The hover row background color. | -| --row-hover-text-color | color | The hover row text color. | -| --row-border-color | color | The border color between the grid body rows. | -| --pinned-border-width | border-width | The border width of the pinned rows/columns. | -| --pinned-border-style | border-style | The border style of the pinned rows/columns. Can be 'dotted', 'dashed' or 'solid' | -| --pinned-border-color | color | The border color of the pinned rows/columns. | -| --cell-active-border-color | color | The active(focused) cell border color. | -| --cell-selected-background | color | The selected cell background color. | -| --tree-selected-filtered-cell-text-color | color | The selected/filtered cell text color | -| --cell-selected-text-color | color | The selected cell text color. | -| --cell-editing-background | color | The background color of a cell in edit mode. | -| --edit-mode-color | color | The text color in edit mode | -| --edited-row-indicator | color | The indicator's color of edited row. | -| --cell-new-color | color | The text color of a new, unedited cell. Used when adding new row in a grid. | -| --cell-edited-value-color | color | The color of cell edited value. | -| --cell-disabled-color | color | The text color of a disabled cell. | -| --resize-line-color | color | The grid header resize line color. | -| --drop-indicator-color | color | The color of the drop indicator. | -| --group-label-column-name-text | color | The grid group row column name text color. | -| --group-label-icon | color | The grid group row icon color. | -| --group-label-text | color | The grid group row text color. | -| --expand-all-icon-color | color | The grid header expand all group rows icon color. | -| --expand-all-icon-hover-color | color | The grid header expand all group rows icon hover color. | -| --expand-icon-color | color | The grid row expand icon color. | -| --expand-icon-hover-color | color | The grid row expand icon hover color. | -| --active-expand-icon-color | color | The drop area background on drop color. | -| --active-expand-icon-hover-color | color | The drop area background on drop color. | -| --group-count-background | color | The grid group row cont badge background color. | -| --group-count-text-color | color | The grid group row cont badge text color. | -| --group-row-background | color | The grid group row background color. | -| --group-row-selected-background | color | The drop area background on drop color. | -| --filtering-header-background | color | The background color of the filtered column header. | -| --filtering-header-text-color | color | The text color color of the filtered column header. | -| --filtering-row-background | color | The background color of the filtering row. | -| --filtering-row-text-color | color | The text-color color of the filtering row. | -| --tree-filtered-text-color | color | The grouping row background color on focus. | -| --body-summaries-background | color | The background color of the summary groups located the body. | -| --body-summaries-text-color | color | The text color of the summary groups located the body. | -| --root-summaries-background | color | The background color of the summary groups located the footer. | -| --root-summaries-text-color | color | The text color of the summary groups located the footer. | -| --row-highlight | color | The grid row highlight color. | -| --row-ghost-background | color | The background color of the dragged row. | -| --row-drag-color | color | The color of the drag handle. | -| --drop-area-border-radius | number between 0 and 1 | The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. | - -## How to use - -As mentioned above Using the CSS vars from the table allow us to style our grid. Let's say that we want to change the grid to use a Dark Theme, by changing the following header background and text colors etc., we can do that like so in a file optionally called dark-theme.css. - -import "./dark-theme.css"; - -```css -.ig-data-grid { - /* shared variables used in custom properties */ - --cell-text-color:#58258b; - --cell-background:#191919; - --cell-selected-background: #58258b; - --cell-selected-within-text-color: #191919; - --cell-selected-within-background: #58258b; - - --row-selected-background:var(--cell-selected-background); - --row-hover-background:var(--cell-selected-background); - --row-hover-text-color:var(--cell-background); - - --header-background: #58258b; - --header-text-color: #191919; - --header-separator-background: #58258b; - --header-separator-width: 5px; - - --section-header-background: #191919; - --section-header-text-color: #58258b; - --section-header-selected-background: #58258b; - --section-header-selected-text-color: #191919; - - --row-separator-background: #191919; - --row-separator-last-sticky-row-background: #191919; - --row-separator-pinned-row-background: #58258b; - --row-separator-sticky-row-background: #58258b; - - --column-resizing-separator-background: #58258b; - --column-moving-separator-background: #58258b; - - - --filtering-header-background: #272727; - --filtering-header-text-color: #ffffff; - --filtering-row-background: #272727; - --filtering-row-text-color: #ffffff; - --tree-filtered-text-color: #ffffff; - - --summary-root-background: #7446b9; - --summary-root-label-text-color: #191919; - --summary-root-value-text-color: #191919; -} - -.ig-grid-column-options { - --background-color: black; - --text-color: #7446b9; - --summary-list-text-color: #7446b9; - --summary-list-background: #191919; -} - -.ig-data-grid-toolbar { - --background-color: #191919; - --text-color: #58258b; - --dialog-background-color: #191919; -} - -.ig-column-chooser { - --background-color: #191919; - --title-color: green; - --select-all-caption-text-color: #58258b; - --search-icon-color: #58258b; - --search-text-color: #58258b; - --search-background-color: #191919; - --search-border-color: #58258b; - --search-text-style: 12px 'Courier'; -} - -.ig-column-pinning { - --background-color: white; - --text-color: #7446b9; - --select-all-caption-text-color: #58258b; - --search-icon-color: #58258b; - --search-text-color: #58258b; - --search-background-color: #191919; - --search-border-color: #58258b; - --search-text-style: 12px 'Courier'; -} -``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-advanced-filtering.md index a45e03769..711c55107 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-advanced-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-advanced-filtering.md @@ -213,7 +213,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Interaction In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. If no advanced filter is applied, you should start with creating a group of filtering conditions linked with **AND** or **OR**. After that, you can add filtering conditions or sub-groups. @@ -228,7 +227,7 @@ In order to filter the data once you are ready with creating the filtering condi ## Usage -To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering) input property should be set to **true**. +To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#allowAdvancedFiltering) input property should be set to **true**. @@ -242,7 +241,7 @@ To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.inf -The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. +The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. @@ -278,7 +277,7 @@ const filteringTree: IgrFilteringExpressionsTree = { -In case you don't want to show the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. +In case you don't want to show the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. > [!Note] > You can enable both the **QuickFilter**/**ExcelStyleFilter** and the advanced filtering user interfaces in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). Both filtering user interfaces will work independently of one another. The final filtered result in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) is the intersection between the results of the two filters. @@ -509,7 +508,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-editing.md index 9f15b8044..39e187bba 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-editing.md @@ -165,7 +165,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Cell Editing ### Editing through UI @@ -445,7 +444,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## CRUD operations > [!Note] @@ -472,7 +470,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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#updateCell) methods but **only if the PrimaryKey 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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#updateCell) methods but **only if the PrimaryKey for the grid is defined**. You can also directly update a cell and/or a row value through their respective **update** methods. @@ -495,7 +493,7 @@ row.update(newData); ### Deleting data from the Hierarchical Grid -Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) is defined. +Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#primaryKey) is defined. @@ -522,6 +520,8 @@ The first thing we need to do is bind to the grid's event: The `CellEdit` emits whenever **any** cell's value is about to be committed. In our **CellEdit** definition, we need to make sure that we check for our specific column before taking any action: + + If the value entered in a cell under the **Units On Order** column is larger than the available amount (the value under **Units in Stock**), the editing will be cancelled and the user will be alerted to the cancellation. @@ -718,7 +718,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -893,13 +892,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) - - - - [`IgrDatePicker`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-merging.md index 5f8bdb10b..946a27e2e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-merging.md @@ -189,7 +189,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Enabling and Using Cell Merging @@ -458,7 +457,6 @@ class PerCountryMergeStrategy extends IgrDefaultMergeStrategy { } ``` - ## Feature Integration diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-selection.md index cabb16072..c2edf3935 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-cell-selection.md @@ -203,7 +203,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Selection Types ### Hierarchical Grid Multiple-Cell Selection @@ -226,13 +225,13 @@ How to select cells: ### Hierarchical Grid Single Selection -When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) to **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. +When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#cellSelection) to **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. > When single cell is selected [`selected`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.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` event is emitted. ### Hierarchical Grid None Selection -If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) to **none**. 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. +If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#cellSelection) to **none**. 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 @@ -261,7 +260,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Select range -[`selectRange`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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. @@ -274,7 +273,7 @@ gridRef.current.selectRange(range) ### Clear cell selection -[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clearCellSelection) will clear the current cell selection. +[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#clearCellSelection) will clear the current cell selection. ```tsx gridRef.current.clearCellSelection(); @@ -282,7 +281,7 @@ gridRef.current.clearCellSelection(); ### Get Selected Data -[`getSelectedData`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#getSelectedData) will return array of the selected data in format depending on the selection. Examples below: +[`getSelectedData`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#getSelectedData) will return array of the selected data in format depending on the selection. Examples below: - If three different single cells are selected: @@ -352,7 +351,7 @@ The multi-cell selection is index based (DOM elements selection). - `Filtering` - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells. - `Resizing` - On column resizing selected cells will not be cleared. - `Hiding` - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected. -- [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#pinning) - Selected cell will not be cleared. Same as hiding +- [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#pinning) - Selected cell will not be cleared. Same as hiding - `GroupBy` - On column grouping selected cells will not be cleared. @@ -608,7 +607,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-collapsible-column-groups.md index 8f26c3d9e..3e9c03f09 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-collapsible-column-groups.md @@ -236,7 +236,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Setup To get started with the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) and the **Collapsible multi-column headers** feature, first you need to install Ignite UI for React by typing the following command: @@ -253,9 +252,9 @@ Also, we strongly suggest that you take a brief look at [multi-column headers](m **Collapsible Column Groups** is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. -In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#columnGroup) to **true**. +In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#columnGroup) to **true**. -You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. +You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. Let's see the markup below: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-hiding.md index de6c1deb7..0d48edb86 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-hiding.md @@ -199,7 +199,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Hierarchical Grid Setup Let's start by creating our [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) and binding it to our data. We will also enable both filtering and sorting for the columns. @@ -549,7 +548,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References In this article we learned how to use the built-in column hiding UI in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html)'s toolbar. The column hiding UI has a few more APIs to explore, which are listed below. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-moving.md index 75a2a108d..7eb337890 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-moving.md @@ -246,10 +246,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Overview -**Column moving** feature is enabled on a per-grid level, meaning that the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#moving) input of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). +**Column moving** feature is enabled on a per-grid level, meaning that the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#moving) input of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). ```tsx @@ -264,7 +263,7 @@ root.render(); In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: -[`moveColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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` value), which determines whether to place the column before or after the target column. +[`moveColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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` value), which determines whether to place the column before or after the target column. ```typescript // Move the ID column after the Name column @@ -282,7 +281,7 @@ const idColumn = grid.getColumnByName("ID"); idColumn.move(3); ``` -Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`moving`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#moving) property to true. +Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`moving`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#moving) property to true. ## Events @@ -543,7 +542,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-pinning.md index 543fa35cd..756939c48 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-pinning.md @@ -210,7 +210,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Column Pinning API Column pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pinned) property of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html). Pinned columns are rendered on the left side of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) body. @@ -225,7 +224,7 @@ Column pinning is controlled through the [`pinned`](https://www.infragistics.com -You may also use the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#unpinColumn) methods of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) to pin or unpin columns by their field name: +You may also use the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#unpinColumn) methods of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) to pin or unpin columns by their field name: @@ -254,7 +253,7 @@ const columnPinning = (event: IgrPinColumnCancellableEventArgs) = { ## Pinning Position -You can change the column pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#pinning) configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right. ```typescript @@ -470,7 +469,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. @@ -687,7 +685,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. @@ -951,7 +948,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) 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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). @@ -1178,7 +1174,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-resizing.md index 78ca60438..acca0231c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-resizing.md @@ -196,7 +196,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - **Column resizing** is also enabled per-column level, meaning that the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#resizable) input of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html). ```tsx @@ -508,7 +507,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -711,7 +709,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-selection.md index c0391bfb6..dfa6a0452 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-selection.md @@ -13,7 +13,7 @@ _premium: true # React Hierarchical Grid Column Selection Overview -The React Hierarchical Grid Column Selection feature in Ignite UI for React offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. +The React Hierarchical Grid Column Selection feature in Ignite UI for React offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. ## React Hierarchical Grid Column Selection Example @@ -223,10 +223,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Basic Usage -The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) input, which takes `GridSelectionMode` values. +The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#columnSelection) input, which takes `GridSelectionMode` values. ## Interactions @@ -432,11 +431,10 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Keyboard Combinations > [!Note] -> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) input is set to `multiple`. +> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#columnSelection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: @@ -645,7 +643,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References The column selection UI has a few more APIs to explore, which are listed below. @@ -656,12 +653,12 @@ The column selection UI has a few more APIs to explore, which are listed below. [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) properties: -- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) -- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#selectedColumns) -- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#selectColumns) -- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#deselectColumns) -- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#selectAllColumns) -- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#deselectAllColumns) +- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#columnSelection) +- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#selectedColumns) +- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#selectColumns) +- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#deselectColumns) +- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#selectAllColumns) +- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#deselectAllColumns) [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-types.md index f704b135a..f0d60cd77 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-column-types.md @@ -27,7 +27,7 @@ This column [`dataType`](https://www.infragistics.com/products/ignite-ui-react/d ### Number -If the [`dataType`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: +If the [`dataType`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: - Number of digits after the decimal point - Decimal separator with `,` or `.` @@ -42,7 +42,7 @@ const formatOptions : IgrColumnPipeArgs = { ### 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: +The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: - **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc. - **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: @@ -125,7 +125,7 @@ Default template is using the value coming from the data as an image source to a ``` -When [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#autoGenerate) is used for the 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 [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#autoGenerate) is used for the 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. ### Currency @@ -219,7 +219,7 @@ const formatCurrency = (value: number) => { - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) - [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) - [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) -- [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) +- [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#locale) - [`dataType`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#dataType) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-conditional-cell-styling.md index d3241cf80..c82bb3779 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-conditional-cell-styling.md @@ -19,31 +19,31 @@ The Ignite UI for React Conditional Styling feature in React Hierarchical Grid a The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component in Ignite UI for React provides two ways to **conditional styling of rows** based on custom rules. -- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) input on the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component; -- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowStyles) input on the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component; +- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowClasses) input on the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component; +- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowStyles) input on the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component; Further in this topic we will cover both of them in more details. ### Using Row Classes -You can conditionally style the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) input and define custom rules. +You can conditionally style the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowClasses) input and define custom rules. ```tsx ``` -The [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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. ```tsx const rowClasses = { - activeRow: (row: IgrRowType) => row.index === 0 + activeRow: (row: IgrRowType) => row.index % 2 === 0 } ``` ```css .activeRow { - border: 2px solid #fc81b8; + border-top: 2px solid #fc81b8; border-left: 3px solid #e41c77; } ``` @@ -244,12 +244,11 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Using Row Styles -The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). +The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). -> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) is: +> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowClasses) is: ```tsx (row: IgrRowType) => boolean @@ -475,7 +474,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Hierarchical Grid Conditional Cell Styling ## Overview @@ -713,7 +711,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - - By using the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) input [`cellStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#cellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. > The callback signature for both `cellStyles` and `cellClasses` is now changed to: @@ -952,7 +949,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## 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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-editing.md index adbd44dfe..8a581f261 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-editing.md @@ -20,7 +20,7 @@ The Ignite UI for React Cell Editing feature in React Hierarchical Grid provides ## Setup -In order to specify which edit mode should be enabled, the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable). +In order to specify which edit mode should be enabled, the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowEditable). The [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) property enables you to specify the following options: @@ -29,12 +29,12 @@ The [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/type > Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). -The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) property enables you to specify the following options: +The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowEditable) property enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled. This is the default value. - **true** - the row editing in the corresponding grid will be enabled. -In the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. +In the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. All available column data types could be found in the official [Column types topic](column-types.md#default-template). @@ -86,7 +84,7 @@ The grid exposes a wide array of events that provide greater control over the ed ### 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. +- `CellEditEnter` - Prevents entering cell edit. If [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. - `CellEdit` - Allowed `Cell` and/or `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. @@ -353,7 +351,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Features integration While a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-excel-style-filtering.md index 1a37614b8..9a9f404cf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-excel-style-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-excel-style-filtering.md @@ -220,10 +220,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage -To turn on the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component's Excel-style filtering, two inputs should be set. The [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowFiltering) should be set to **true** and the [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filterMode) should be set to `ExcelStyleFilter` value. +To turn on the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component's Excel-style filtering, two inputs should be set. The [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#allowFiltering) should be set to **true** and the [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#filterMode) should be set to `ExcelStyleFilter` value. ```tsx @@ -472,12 +471,11 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Templates -If you want to further customize the Excel style filter menu, you can use the [`excelStyleHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#excelStyleHeaderIconTemplate) property to define a custom template for the header icon of the menu. +If you want to further customize the Excel style filter menu, you can use the [`excelStyleHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#excelStyleHeaderIconTemplate) property to define a custom template for the header icon of the menu. -The following code demonstrates how to customize the Excel style filter menu using the [`excelStyleHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#excelStyleHeaderIconTemplate): +The following code demonstrates how to customize the Excel style filter menu using the [`excelStyleHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#excelStyleHeaderIconTemplate): @@ -759,7 +757,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -1003,7 +1000,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-export-excel.md index 9e7a946e9..896af4f1f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-export-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-export-excel.md @@ -205,7 +205,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Export Multi Column Headers Grid You can export [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` `IgnoreMultiColumnHeaders` to `true`. @@ -526,7 +525,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Export Grid with Frozen Column Headers By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` `FreezeHeaders` to `true`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-filtering.md index a24628552..c9bd8bab3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-filtering.md @@ -210,22 +210,21 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Setup -In order to specify if filtering is enabled and which filtering mode should be used, the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable). +In order to specify if filtering is enabled and which filtering mode should be used, the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable). -Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowFiltering) enables you to specify the following options: +Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#allowFiltering) enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled. This is the default value. - **true** - the filtering for the corresponding grid will be enabled. -Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering) enables you to specify the following options: +Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#allowAdvancedFiltering) enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled. This is the default value. - **true** - the advanced filtering for the corresponding grid will be enabled. -Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filterMode) enables you to specify the following options: +Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#filterMode) enables you to specify the following options: - **QuickFilter** - a simplistic filtering UI. This is the default value. - **ExcelStyleFilter** - an Excel-like filtering UI. @@ -244,7 +243,7 @@ Property [`filterable`](https://www.infragistics.com/products/ignite-ui-react/do -To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering) input property to **true** +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#allowAdvancedFiltering) input property to **true** ```tsx @@ -264,14 +263,14 @@ While some filtering conditions have been applied to a column, and the filter ro 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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#dataType) of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the `IgnoreCase` and the initial `Condition` properties. -The filtering feature is enabled for the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable) input to **false**. +The filtering feature is enabled for the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable) input to **false**. > [!Note] > If values of type **string** are used by a column of data type **date**, the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) 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. ## Initial filtered state -To set the initial filtering state of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), set the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringExpressionsTree) for each column to be filtered. +To set the initial filtering state of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), set the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#filteringExpressionsTree) for each column to be filtered. ```tsx const filteringExpressions: IgrFilteringExpressionsTree = { @@ -304,7 +303,7 @@ return ( ### Filtering logic -The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringLogic) property of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) controls how filtering multiple columns will resolve in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). You can change it at any time through the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) API, or through the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) input property. +The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#filteringLogic) property of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) controls how filtering multiple columns will resolve in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). You can change it at any time through the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) API, or through the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) input property. ```tsx import { FilteringLogic } from "igniteui-react-grids"; @@ -541,7 +540,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Known Limitations > [!Note] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-load-on-demand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-load-on-demand.md index 04b5ffd58..ad84c808b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-load-on-demand.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-load-on-demand.md @@ -140,7 +140,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Remote Service Provider First we will prepare our service provider so we will be ready to get the data we would need for the hierarchical grid. @@ -224,7 +223,7 @@ Next we will setup our hierarchical grid and connect it to our remote service pr ### Template defining -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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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: +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-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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: ```tsx @@ -337,7 +336,7 @@ With this, the setup of our application is almost done. This last step aims to i ### Setup of loading indication -The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) can display a loading indicator by setting the [`isLoading`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 and display that the grid has no data if the service returns an empty array by setting it to **false**. +The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) can display a loading indicator by setting the [`isLoading`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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 and display that the grid has no data if the service returns an empty array by setting it to **false**. In this case the final version of our configuration would look like this: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-multi-column-headers.md index 36f4acdb7..7fb9d2c29 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-multi-column-headers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-multi-column-headers.md @@ -337,7 +337,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - The declaration of multi-column headers is achieved by wrapping a set of columns into an [`columnGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#columnGroup) component with [`header`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#header) title information passed. ```tsx @@ -748,7 +747,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -1048,7 +1046,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-overview.md index 8d0c938a9..97c004143 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-overview.md @@ -195,7 +195,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Getting Started with Ignite UI for React Hierarchical Grid ### Dependencies @@ -640,7 +639,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Known Limitations |Limitation|Description| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-remote-data-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-remote-data-operations.md index c2405a918..654fa5274 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-remote-data-operations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-remote-data-operations.md @@ -378,7 +378,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-actions.md index e577309db..f8eac9846 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-actions.md @@ -19,7 +19,7 @@ The Ignite UI for React Row Actions feature in React Hierarchical Grid enables d The predefined actions UI components are: -- [`IgrGridEditingActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) option and row deletion of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). +- [`IgrGridEditingActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowEditable) option and row deletion of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). - [`IgrGridPinningActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridpinningactions.html) - includes functionality and UI specifically designed for the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. @@ -49,7 +49,7 @@ They are added inside the [`IgrHierarchicalGrid`](https://www.infragistics.com/p These components expose templates giving flexibility for customization. For instance, if we would like to use the [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) for a Gmail scenario with row actions such as **delete**, **edit** and etc. You can simply create button component with icon, add click event to it and insert it into the [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html). - + @@ -258,7 +258,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrGridPinningActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridpinningactions.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-adding.md index dc04c618a..7fa253f5f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-adding.md @@ -220,10 +220,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Row Adding Usage -Then define a [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) set to true and an [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) component with editing actions enabled. The `AddRow` input controls the visibility of the button that spawns the row adding UI. +Then define a [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowEditable) set to true and an [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) component with editing actions enabled. The `AddRow` input controls the visibility of the button that spawns the row adding UI. @@ -308,7 +307,7 @@ The internal `BaseTransactionService` is automatically provided for [`IgrHierarc -Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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. +Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#beginAddRowById) requires you to specify the row to use as context for the operation by its `RowID` (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. ```typescript gridRef.current.beginAddRowById('ALFKI'); // Spawns the add row UI under the row with PK 'ALFKI' @@ -341,9 +340,6 @@ After a new row is added through the row adding UI, its position and/or visibili ## Keyboard Navigation - ALT + + - Enters edit mode for adding a row - - - - ESC exits row adding mode without submitting any changes - TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. @@ -364,7 +360,7 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowAddTextTemplate). +Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowAddTextTemplate). @@ -391,13 +387,13 @@ The row adding UI comprises the buttons in the [`IgrActionStrip`](https://www.in ## API References -- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `RowEditCancel` -- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#endEdit) -- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#endEdit) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#primaryKey) - [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-drag.md index 3c3ac9de5..9fb1c125a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-drag.md @@ -13,7 +13,7 @@ _premium: true # Row Dragging in React Hierarchical Grid -The Ignite UI for React Row Dragging feature in React Hierarchical Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable) input. +The Ignite UI for React Row Dragging feature in React Hierarchical Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowDraggable) input. ## React Hierarchical Grid Row Drag Example @@ -1777,10 +1777,9 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Configuration -In order to enable row-dragging for your [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. +In order to enable row-dragging for your [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. ```tsx @@ -1789,7 +1788,7 @@ In order to enable row-dragging for your [`IgrHierarchicalGrid`](https://www.inf ### Templating the Drag Icon -The drag handle icon can be templated using the grid's [`dragIndicatorIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#dragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (**drag_indicator**) to **drag_handle**. @@ -1828,9 +1827,9 @@ With the help of the grid's row drag events you can create a grid that allows yo > [!Note] -> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. +> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. -Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: +Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@ -2091,14 +2090,13 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Limitations -Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable). +Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowDraggable). ## API References -- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable) +- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowDraggable) - `RowDragStart` - `RowDragEnd` - [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-editing.md index 0e2e73140..b944dc9ba 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-editing.md @@ -186,13 +186,12 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - > [!Note] > When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode. ## Row Editing Usage -Define a [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) set to true: +Define a [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowEditable) set to true: @@ -234,7 +233,7 @@ Define a [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui > Setting primary key is mandatory for row editing operations. > [!Note] -> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) property in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) input of that column to `false`. +> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowEditable) property in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) input of that column to `false`. > [!Note] > The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. @@ -511,10 +510,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Known Issues and Limitations -- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection @@ -526,14 +524,14 @@ root.render(); ## API References -- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` -- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#endEdit) +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#endEdit) - [`field`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#field) - [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) -- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#primaryKey) - [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-pinning.md index c0dcf249b..f9a369ffc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-pinning.md @@ -237,7 +237,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Row Pinning UI The built-in row pinning UI is enabled by adding an [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) component with the [`IgrGridPinningActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridpinningactions.html) component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. @@ -273,7 +272,7 @@ gridRef.current.pinRow('ALFKI'); gridRef.current.unpinRow('ALFKI'); ``` -Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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. +Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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` event and changing the `InsertAtIndex` property of the event arguments to the desired position index. @@ -290,7 +289,7 @@ const rowPinning = (event: IgrPinRowEventArgs) => { ## Pinning Position -You can change the row pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#pinning) configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom. @@ -639,7 +638,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Row Pinning Limitations - Only records that exist in the data source can be pinned. @@ -841,7 +839,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-selection.md index 7644687e4..f6794aa8a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-row-selection.md @@ -211,7 +211,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Setup In order to setup row selection in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), you just need to set the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection) property. This property accepts `GridSelectionMode` enumeration. @@ -354,7 +353,7 @@ const mySelectedRows = [1,2,3]; You can template header and row selectors in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) and also access their contexts which provide useful functionality for different scenarios. -By default, the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`click`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckboxbase.html#click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. +By default, the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`click`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html#click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. #### Row Template @@ -402,7 +401,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { } ``` -In the above example we are using an [`IgrCheckbox`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html) and we bind `rowContext.selected` to its [`checked`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckboxbase.html#checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). +In the above example we are using an [`IgrCheckbox`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html) and we bind `rowContext.selected` to its [`checked`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html#checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). @@ -653,7 +652,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Conditional Selection Demo This demo prevents some rows from being selected using the `RowSelectionChanging` event and a custom template with disabled checkbox for non-selectable rows. @@ -833,7 +831,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-selection.md index 1384dd63c..0caf4edfe 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-selection.md @@ -18,7 +18,7 @@ With the Ignite UI for React Select feature in React Hierarchical Grid you can e - Cell selection - Column selection -With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection) property, you can specify: +With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowSelection) property, you can specify: - None - Single @@ -200,18 +200,17 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## React Hierarchical Grid Selection Options -The Ignite UI for React [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) 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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#selectable) properties. +The Ignite UI for React [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) 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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#selectable) properties. ### React Hierarchical Grid Row Selection -Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection) enables you to specify the following options: +Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowSelection) enables you to specify the following options: - `None` - Row selection would be disabled for the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). - `Single` - Selection of only one row within the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) would be available. @@ -227,7 +226,7 @@ Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/ ### React Hierarchical Grid Cell Selection -Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) enables you to specify the following options: +Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#cellSelection) enables you to specify the following options: - `None` - Cell selection would be disabled for the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). - `Single` - Selection of only one cell within the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) would be available. @@ -257,7 +256,7 @@ This leads to the following three variations: ## Known Issues and Limitations -When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection - Row Expand/collapse diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-size.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-size.md index 2918f339e..77d397694 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-size.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-size.md @@ -240,7 +240,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage As you can see in the demo above, the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set `--ig-size` either inline or part of a CSS class: @@ -255,11 +254,11 @@ As you can see in the demo above, the [`IgrHierarchicalGrid`](https://www.infrag ``` -And now let's see in details how each option reflects on the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component. When you switch between different size options the height of each [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width), please consider the fact that it must be bigger than the sum of left and right padding: +And now let's see in details how each option reflects on the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) component. When you switch between different size options the height of each [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width), please consider the fact that it must be bigger than the sum of left and right padding: -- **large** - this is the default [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `80px`; -- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `64px`; -- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `56px`; +- **large** - this is the default [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) is `80px`; +- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) is `64px`; +- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) is `56px`; > [!Note] > Please keep in mind that currently you **can not** override any of the sizes. @@ -375,16 +374,14 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio } ``` -Another option that [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) provides for you, in order to be able to change the height of the rows in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowHeight). So let's see in action how this property affects the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) layout along with the `--ig-size`. +Another option that [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) provides for you, in order to be able to change the height of the rows in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowHeight). So let's see in action how this property affects the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) layout along with the `--ig-size`. 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowHeight) specified**. +- `--ig-size` CSS variable will have no impact on row height **if there is [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowHeight) specified**. - `--ig-size` will **affect all of the rest elements in the Hierarchical Grid**, as it has been described above. -We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowHeight) property to the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html): - - +We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#rowHeight) property to the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html): ```tsx diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-sizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-sizing.md index c952796b5..d86b03c31 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-sizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-sizing.md @@ -12,23 +12,23 @@ _premium: true # React Hierarchical Grid Sizing -The Ignite UI for React Sizing feature in React Hierarchical Grid is an important aspect of creating responsive and user-friendly grid interfaces. The React Hierarchical Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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. +The Ignite UI for React Sizing feature in React Hierarchical Grid is an important aspect of creating responsive and user-friendly grid interfaces. The React Hierarchical Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. > [!Note] > If the Border box sizing is overridden by the user we cannot guarantee that the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) will size correctly. ## React Hierarchical Grid Width -If the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) input does not have value assigned, its default value is `100%` and the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. +If the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) input does not have value assigned, its default value is `100%` and the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. > [!Note] -> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) style of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) itself will result in an unexpected behavior. +> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) style of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) itself will result in an unexpected behavior. ### Null -The grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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. +The grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. +- If there are 6 columns and none of them has width defined, the grid will have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. columns-default-gridWidth-null-v2 @@ -49,9 +49,9 @@ The grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ ### Pixels -When the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content: -- When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width). Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. +- 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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#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-v2 @@ -62,9 +62,9 @@ When the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui ### Percentages -When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) will size relative to the browser window. +When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) will size relative to the browser window. -- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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. +- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#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-100p-v2 @@ -72,7 +72,7 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ty width-percent-parent-100p-v2 -- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. +- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. width-percent-150p-parent-noscroll-v2 width-percent-150p-parent-scroll-v2 @@ -82,11 +82,11 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ty By default if no height is defined for the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html), it will be set to `100%`. You can check how the grid reacts depending on the DOM structure in the `Percentages` section. > [!Note] -> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) style of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) itself will result in an unexpected behavior. +> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) style of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) itself will result in an unexpected behavior. ### Null -The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway. - If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. @@ -96,7 +96,7 @@ The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-reac height-null-24rows-v2 -- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: +- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: height-null-24rows-parent-noscroll-v2 height-null-24rows-parent-scroll-v2 @@ -106,28 +106,28 @@ The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-reac ### Pixels -Setting the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is set in pixels. +Setting the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#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-4rows-v2 -- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: +- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: height-500px-14rows-v2 -- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. +- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. height-700px-14rows-parent-noscroll-v2 height-700px-14rows-parent-scroll-v2 ### Percentages -When the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) input is set to percentages, the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) set in pixels or percentages, the grid will size relative to the size of the parent. +When the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) input is set to percentages, the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `1200px` and the parent element not having any size applied to it: +Let's have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#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. @@ -141,7 +141,7 @@ Let's have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ height-percent-100-parent-800px-v2 -- If the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. height-percent-130p-parent-noscroll-v2 height-percent-130p-parent-scroll-v2 @@ -160,7 +160,7 @@ By default when a column doesn't have a specified width it will try to autosize, 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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) and the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) `null` and 6 columns that don't have width, each column will be sized to `136px`. columns-default-gridWidth-null-v2 @@ -168,15 +168,15 @@ When the grid is resized in these scenarios, the column width is also updated to columns-default-all-row-selectors-v2 -- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `1000px`. +- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) set to `1000px`. columns-default-all-min-136px-v2 -- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `100px`, the first will fill the rest. +- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) of `100px`, the first will fill the rest. columns-default-first-rest-100px-v2 -- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `100px`. +- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) set to `100px`. columns-default-all-first-100px-v2 @@ -185,19 +185,19 @@ When the grid is resized in these scenarios, the column width is also updated to ### Pixels -When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of the columns is static, it can be less than the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) or exceed it. +When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) of the columns is static, it can be less than the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) or exceed it. -- If the combined `width` of all columns is less than the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). In the next example the columns have `150px` width. +- If the combined `width` of all columns is less than the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). In the next example the columns have `150px` width. columns-150px-empty-area-v2 -- If the combined [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of all columns is bigger than the actual [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) of all columns is bigger than the actual [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width), a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. columns-150px-extra-area-v2 ### Percentages -When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. +When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. - If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. @@ -211,7 +211,7 @@ When columns have set [`width`](https://www.infragistics.com/products/ignite-ui- columns-percent-bigger-100p-v2 -- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `50%`: +- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) set to `50%`: columns-percent-gridWidth-null-v2 @@ -219,21 +219,21 @@ When columns have set [`width`](https://www.infragistics.com/products/ignite-ui- ## React Hierarchical Grid Child Sizing -Because the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) usually contains children, they can also have their [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) specified, in order to accommodate different scenarios. Since the children are defined using [`IgrRowIsland`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrrowisland.html) template, this means that all children in the same level and island will have the same [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrrowisland.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrrowisland.html#height) property applied to them. +Because the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) usually contains children, they can also have their [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) specified, in order to accommodate different scenarios. Since the children are defined using [`IgrRowIsland`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrrowisland.html) template, this means that all children in the same level and island will have the same [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrrowisland.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrrowisland.html#height) property applied to them. ### Width The [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrrowisland.html#width) for the children does not behave much different than the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) itself, since each child grid is instance of [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) as well. -The only difference is that the user cannot change the parent element of the child grid. That's why when the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is set to percentages, the `100%` width allocated for the child is smaller than the parent grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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. +The only difference is that the user cannot change the parent element of the child grid. That's why when the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) is set to percentages, the `100%` width allocated for the child is smaller than the parent grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#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. hgrid-width-percentages-v2 ### Height -The [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) of each child in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) behaves also similarly to the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) of the root level grid. +The [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) of each child in the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) behaves also similarly to the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) of the root level grid. -The difference is that for the child grid, when [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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. +The difference is that for the child grid, when [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#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. hgrid-height-percentages-v2 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-sorting.md index d2da238a4..2594714d3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-sorting.md @@ -214,7 +214,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - This is done via the [`sortable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortable) input. With the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) sorting, you can also set the [`sortingIgnoreCase`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortingIgnoreCase) property to perform case sensitive sorting: ```tsx @@ -436,10 +435,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Sorting through the API -You can sort any column or a combination of columns through the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) API using the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`sort`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sort) method: +You can sort any column or a combination of columns through the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) API using the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) [`sort`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#sort) method: ```tsx import { SortingDirection } from "igniteui-react-grids"; @@ -461,7 +459,7 @@ hierarchicalGridRef.current.sort([ > [!Note] > Sorting is performed using our `DefaultSortingStrategy` algorithm. Any [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) or `ISortingExpression` can use a custom implementation of the `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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clearSort) method: +As with the filtering behavior, you can clear the sorting state by using the [`clearSort`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#clearSort) method: @@ -476,14 +474,14 @@ hierarchicalGridRef.current.clearSort(); > [!Note] -> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortStrategy) of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortStrategy) of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html), since they work in different scopes and expose different parameters. +> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortStrategy) of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#sortStrategy) of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html), since they work in different scopes and expose different parameters. > [!Note] > The sorting operation **DOES NOT** change the underlying data source of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). ## Initial Sorting State -It is possible to set the initial sorting state of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortingExpressions) property of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). +It is possible to set the initial sorting state of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#sortingExpressions) property of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html). ```tsx const sortingExpressions: IgrSortingExpression[] = [ @@ -507,7 +505,7 @@ const sortingExpressions: IgrSortingExpression[] = [ The sorting indicator icon in the column header can be customized using a template. The following properties are available for templating the sorting indicator for any sorting state (ascending, descending, none): -- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. +- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. @@ -525,7 +523,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { -- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. +- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. @@ -543,7 +541,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { -- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. +- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. @@ -778,7 +776,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrSortingExpression`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrsortingexpression.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-state-persistence.md index 1c247943c..fc7c42f4a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-state-persistence.md @@ -584,7 +584,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Limitations diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-summaries.md index 0622f9585..f6b065fbc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-summaries.md @@ -181,7 +181,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - > [!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** @@ -600,7 +599,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Disabled Summaries The [`disabledSummaries`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#disabledSummaries) property provides precise per-column control over the React Hierarchical Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgrHierarchicalGrid, 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. @@ -1116,7 +1114,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs). When using custom operands, the [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) and [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#summaryFormatter) property. @@ -1324,7 +1321,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Keyboard Navigation The summary rows can be navigated with the following keyboard interactions: @@ -1530,7 +1526,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-toolbar.md index dbbaba8d0..c70e368fc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-toolbar.md @@ -448,7 +448,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## 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. @@ -2180,7 +2179,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -2389,7 +2387,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Known Limitations diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-virtualization.md index de706010a..3eaa146f6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/hierarchical-grid-virtualization.md @@ -142,19 +142,18 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Enabling Virtualization -The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) 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. The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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. +The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html) 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. The [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) is `null`). +However, it is also possible to explicitly set the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#height) is `null`). The size of the data chunks is determined by: -- The row height for the vertical (row) virtualization. This is determined by the [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.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 [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html#columnWidth) option, which will be applied to all columns that don't have explicit width set. In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the [`IgrHierarchicalGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrhierarchicalgrid.html)'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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/icon-button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/icon-button.md index 7a93b3e8e..c1a2ff955 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/icon-button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/icon-button.md @@ -82,7 +82,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Usage @@ -166,7 +165,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ```tsx ``` @@ -244,7 +242,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ```tsx ``` @@ -341,7 +338,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrButtonBase`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbuttonbase.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/icon.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/icon.md index 97a1dce16..e013bc7f7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/icon.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/icon.md @@ -69,7 +69,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Usage @@ -208,7 +207,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - You can also set a custom size for the icon component. The best way to do this is by using the `--size` CSS variable. ```css @@ -283,7 +281,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrIcon`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igricon.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/input.md index 8c8ebecea..cf633639e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/input.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/input.md @@ -48,7 +48,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - First, you need to the install the corresponding Ignite UI for React npm package by running the following command: ```cmd @@ -111,7 +110,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Helper Text The `helper-text` slot provides a hint placed below the Input. Let's add some helper text to our phone Input: @@ -156,7 +154,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Input Sizing We can allow the user to change the size of the [`IgrInput`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html) using the `--ig-size` CSS variable. То do this, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the Input: @@ -236,7 +233,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - In the sample above we have demonstrated the use of the following attributes: - `required` - Used to mark the input as required @@ -332,7 +328,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/line-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/line-chart.md index 7a5fd2c0b..588e52a2c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/line-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/line-chart.md @@ -134,7 +134,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Line Chart Recommendations @@ -290,7 +289,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Line Chart with Multiple Series @@ -416,7 +414,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Line Chart with Live Data @@ -677,7 +674,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Styling Line Chart @@ -806,10 +802,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` +You can also create a dashed line within the [`IgrLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrlineseries.html) by using the [`IgrDataChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatachart.html) and setting the [`dashArray`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpolarlineseries.html#dashArray) property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line. -You can also create a dashed line within the [`IgrLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrlineseries.html) by using the [`IgrDataChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatachart.html) and setting the [`dashArray`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseries.html#dashArray) property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line. - -The following example demonstrates usage of the [`dashArray`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseries.html#dashArray) in a [`IgrLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrlineseries.html) in [`IgrDataChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatachart.html): +The following example demonstrates usage of the [`dashArray`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpolarlineseries.html#dashArray) in a [`IgrLineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrlineseries.html) in [`IgrDataChart`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrdatachart.html): ```typescript export class CountryRenewableElectricityItem { @@ -984,7 +979,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Advanced Types of Line Charts @@ -1173,7 +1167,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100% Line Chart @@ -1356,7 +1349,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Radial Line Chart @@ -1521,7 +1513,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Polar Line Chart @@ -1689,7 +1680,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/linear-gauge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/linear-gauge.md index bd467bc51..42a45a071 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/linear-gauge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/linear-gauge.md @@ -329,7 +329,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Dependencies @@ -447,7 +446,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Highlight Needle The linear gauge can be modified to show a second needle. This will make the main needle's [`value`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrlineargauge.html#value) appear with a lower opacity. To enable this first set [`highlightValueDisplayMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrlineargauge.html#highlightValueDisplayMode) to Overlay and then apply a [`highlightValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrlineargauge.html#highlightValue). @@ -511,7 +509,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same times the degree to which it resides within that state. @@ -576,7 +573,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the linear gauge. @@ -646,7 +642,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Labels The labels indicate the measures on the scale. @@ -699,7 +694,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Backing The backing element represents background and border of the linear gauge component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. @@ -751,7 +745,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Scale The scale is a visual element that highlights the full range of values in the linear gauge. You can customize the appearance and the shape of the scale. It can also be inverted (using [`isScaleInverted`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrlineargauge.html#isScaleInverted) property) and all labels will be rendered from right-to-left instead of left-to-right. @@ -808,7 +801,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the linear gauge with all features and visuals enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/linear-progress.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/linear-progress.md index a8e463529..395702fd1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/linear-progress.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/linear-progress.md @@ -46,7 +46,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Usage @@ -73,7 +72,7 @@ The simplest way to start using the [`IgrLinearProgress`](https://www.infragisti ### Progress Types -You can set the type of your indicator, using the [`variant`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrprogressbase.html#variant) attribute. There are five types of linear progress indicators - **primary** (default), **error**, **success**, **info**, and **warning**. +You can set the type of your indicator, using the [`variant`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlinearprogress.html#variant) attribute. There are five types of linear progress indicators - **primary** (default), **error**, **success**, **info**, and **warning**. ```tsx @@ -121,16 +120,15 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
### 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-react/docs/typescript/latest/classes/igniteui-react.igrprogressbase.html#indeterminate) property. +If you want to track a process that is not determined precisely, you can set the [`indeterminate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlinearprogress.html#indeterminate) property. ### Animation Duration -The [`animationDuration`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrprogressbase.html#animationDuration) property is used to specify how long the animation cycle should take. It takes as value a number which represents the animation duration in milliseconds. +The [`animationDuration`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlinearprogress.html#animationDuration) property is used to specify how long the animation cycle should take. It takes as value a number which represents the animation duration in milliseconds. ```tsx @@ -140,9 +138,9 @@ The [`animationDuration`](https://www.infragistics.com/products/ignite-ui-react/ You can align the default value, using the [`labelAlign`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlinearprogress.html#labelAlign) property. Permitted values are **top**, **bottom**, **top-start**, **top-end**, **bottom-start** and **bottom-end**. -To hide the default label of the progress indicator, use the [`hideLabel`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrprogressbase.html#hideLabel) attribute. +To hide the default label of the progress indicator, use the [`hideLabel`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlinearprogress.html#hideLabel) attribute. -The [`labelFormat`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrprogressbase.html#labelFormat) property can be used to customize the [`IgrLinearProgress`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlinearprogress.html) default label. +The [`labelFormat`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlinearprogress.html#labelFormat) property can be used to customize the [`IgrLinearProgress`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlinearprogress.html) default label. The following sample demonstrates the above configuration: @@ -183,7 +181,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
### Dynamic Progress @@ -268,7 +265,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Styling @@ -338,7 +334,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ```css igc-linear-progress::part(track){ background-color: var(--ig-gray-300) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/list.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/list.md index fe300efbd..d6b9411c3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/list.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/list.md @@ -130,7 +130,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Usage @@ -217,7 +216,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - Let's up our game a bit and enhance our list items. Say we want to create a list of contacts with a name and a phone number displayed under the name. To achieve that we can use some of the slots that come with the list items as demonstrated in the next example: ```tsx @@ -285,7 +283,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Adding Avatar and Buttons We can use some of our other components in conjunction with the [`IgrList`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlist.html) component to enrich the experience and add some functionality. We can have a nice picture avatar to the left of the name and phone values. Additionally, we can add some buttons to the right of them to allow the user to text and call contacts, so let's update our contacts list component to show the avatar and the buttons. We can do that by using some of the list item's slots. @@ -494,7 +491,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling The [`IgrList`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlist.html) exposes several CSS parts, giving you full control over its style: @@ -628,7 +624,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - In this article we covered a lot of ground with the [`IgrList`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrlist.html) component. First, we created a simple list with text items. Then, we created a list of contact items and added functionality to them by using some additional Ignite UI for React components, like the [`IgrAvatar`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igravatar.html) and [`IgrButton`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbutton.html). Finally, we changed the component's appearance through the exposed CSS parts.
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/localization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/localization.md index 780380806..25d173518 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/localization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/localization.md @@ -175,7 +175,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - > Note: Hindi (HI) included in the sample is for illustrative purposes only, to demonstrate the possibility of passing a custom localization object. In this sample, it contains only a few localized strings for the summary. For more details, see the [Custom localized resource strings](#custom-localized-resource-strings) section below. ## Locale diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/maker-framework.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/maker-framework.md new file mode 100644 index 000000000..3339c0ab2 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/maker-framework.md @@ -0,0 +1,239 @@ +--- +title: MAKER Framework | Ignite UI AI Orchestration +_description: The MAKER Framework is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated step plans using consensus-based voting across OpenAI, Anthropic, and Google AI providers. +_keywords: React, Ignite UI for React, Infragistics, MAKER, multi-agent, AI orchestration, MCP, Model Context Protocol, consensus voting, plan and execute, task decomposition +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/maker-framework" +namespace: Infragistics.Controls +mentionedTypes: [] +_tocName: Maker Framework +--- + + + + + +# MAKER Framework + +The MAKER Framework (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction. + +The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry. + +## How MAKER Works + +The MAKER Framework operates in two sequential phases: planning and execution. Each phase uses a dedicated set of internal AI clients and applies the same consensus-based voting mechanism to validate outputs before advancing. + +In the **planning phase**, a planning client proposes batches of steps (configurable batch size, default 3). A separate plan-voting client then runs a "first-to-ahead-by-K" vote: multiple AI agents vote "Yes", "No", or "End" on the proposed steps. A proposal is accepted when one outcome leads the others by K votes. Rejected proposals include the rejection reasons in the next retry, driving continuous refinement until the plan is complete or the retry limit is reached. + +In the **execution phase**, the framework processes the validated step plan in configurable batches. An execution client runs each batch and produces an updated state. An execution-voting client validates the new state against the previous state and the original task, using the same K-margin voting algorithm. Rejected executions retry with feedback. The final accumulated state is the task result. + +The red-flag validation layer operates throughout both phases. Every AI client request is wrapped in a guarded call that runs configurable validators on the response before it enters the voting system. Malformed or too-short responses are retried with the failure message appended to the prompt. Custom validators can be added by implementing `IAIRedFlagValidator`. + +## Install the MAKER MCP Server + +MAKER is published on GitHub Packages under the `@igniteui` scope and requires a one-time registry setup. Run the following command once on your machine: + +```bash +npm config set @igniteui:registry https://npm.pkg.github.com +``` + +Then open `~/.npmrc` (Windows: `%USERPROFILE%\.npmrc`) and add your GitHub Personal Access Token with `read:packages` scope: + +After the registry is configured, the MCP server runs via `npx` without a separate global install. The native binary (~50 MB) is downloaded and cached on first run. Subsequent starts are instant. + +## Connect to Your AI Client + +Add the `maker` server entry to the MCP configuration file for your AI client. The `env` block passes your AI provider key; only set keys for the providers you use. + +### VS Code (GitHub Copilot) + +Add to `.vscode/mcp.json` in your workspace: + +```json +{ + "servers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +Switch Copilot Chat to Agent mode and confirm that `plan`, `execute`, and `plan_and_execute` appear in the tools list. + +### Claude Desktop + +1. Open your Claude Desktop configuration file: + - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` + - Windows: `%APPDATA%\Claude\claude_desktop_config.json` +2. Add the `maker` entry to the `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__Anthropic": "" + } + } + } +} +``` + +3. Restart Claude Desktop. The first start downloads the native binary (~30 s on a typical connection). + +### Cursor, Claude Code, JetBrains, and Other MCP Clients + +Any client that supports MCP with STDIO transport uses the same `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +## Configure the MAKER MCP Server + +All MAKER configuration is supplied through environment variables. The naming convention uses double underscore (`__`) as the section separator. Pass variables in the `env` block of your MCP client configuration. + +### AI Provider Keys + +Set at least one provider key. You can set keys for multiple providers simultaneously and assign different providers to different internal clients. + +| Environment Variable | Description | +| ------------------------------------- | ----------------- | +| `Executor__AIProviderKeys__OpenAI` | OpenAI API key | +| `Executor__AIProviderKeys__Anthropic` | Anthropic API key | +| `Executor__AIProviderKeys__Google` | Google AI API key | + +### Select Models per Internal Client + +MAKER uses four internal AI clients: `Planning`, `PlanVoting`, `Execution`, and `ExecutionVoting`. Each client can target a different provider and model. The defaults use `gpt-5.1` on OpenAI for all four clients. + +To mix providers for cost and quality balance, set the `Provider` and `Model` variables per client: + +```json +"env": { + "Executor__AIProviderKeys__OpenAI": "", + "Executor__AIProviderKeys__Anthropic": "", + "Executor__Clients__Planning__Provider": "Anthropic", + "Executor__Clients__Planning__Model": "claude-opus-4-5", + "Executor__Clients__PlanVoting__Provider": "OpenAI", + "Executor__Clients__PlanVoting__Model": "gpt-4.1-mini", + "Executor__Clients__Execution__Provider": "Anthropic", + "Executor__Clients__Execution__Model": "claude-opus-4-5", + "Executor__Clients__ExecutionVoting__Provider": "OpenAI", + "Executor__Clients__ExecutionVoting__Model": "gpt-4.1-mini" +} +``` + +Valid `Provider` values: `OpenAI`, `Anthropic`, `Google`. + +### Connect External MCP Servers + +MAKER can connect to external MCP servers as tool providers, making their tools available to the execution client. Configure each server with a name, description, URL, and optional API key using indexed environment variables: + +```json +"env": { + "Executor__McpServers__0__Name": "igniteui-cli", + "Executor__McpServers__0__Description": "Ignite UI CLI scaffolding and documentation tools", + "Executor__McpServers__0__Url": "https://mcp.example.com/igniteui-cli" +} +``` + +Increment the index (`0`, `1`, `2`, ...) to register additional servers. + +### Tune Batch Size and Voting Threshold + +Each MCP tool call accepts `batchSize` and `k` parameters in natural language. Set them in your prompt when invoking the tools. + +| Parameter | Default | Description | +| ----------- | ------- | ---------------------------------------------------------------------------------------------------------------------- | +| `batchSize` | `3` | Steps proposed or executed per voting round. Lower values give more control; higher values improve throughput. | +| `k` | `10` | Consensus margin threshold. Higher values require stronger agreement across voting agents before a result is accepted. | + +Lower `k` (3-5) for faster, exploratory tasks. Raise `k` (15-20) for critical tasks where correctness is more important than token cost. + +## Available Tools + +The MAKER MCP server exposes three tools to the connected AI agent. + +| Tool | Description | +| ------------------ | ------------------------------------------------------------------------- | +| `plan` | Decompose a task into a validated, ordered step list without executing it | +| `execute` | Execute a step list produced by `plan`, with consensus voting per batch | +| `plan_and_execute` | Plan and execute in one call with live progress events between phases | + +Use `plan` followed by `execute` when you want to inspect and validate the step plan before execution. Use `plan_and_execute` for unattended runs where inspection is not required. + +## Common Workflows + +### One-Shot Task + +Invoke `plan_and_execute` directly with default settings: + +> Use plan_and_execute to write a detailed comparison of REST vs GraphQL for a technical blog post. + +### Inspect the Plan Before Executing + +Use `plan` to review steps, then pass them to `execute`: + +> 1. Use plan to create a plan for migrating a PostgreSQL schema to a multi-tenant design. +> 2. Show me the steps. +> 3. Use execute with those steps to carry out the migration script. + +### High-Confidence Execution for Critical Tasks + +Raise `k` to require stronger consensus: + +> Use plan_and_execute with batchSize=3 and k=15 to review this smart contract for security vulnerabilities. + +### Low-Cost Exploratory Task + +Reduce both parameters to minimize token usage: + +> Use plan_and_execute with batchSize=3 and k=3 to draft a project README for a Node.js CLI tool. + +## Supported Platforms + +The native binary is distributed for four platforms. The correct binary is selected and cached automatically on first run. + +| Platform | Architecture | RID | +| -------- | --------------------- | ----------- | +| Windows | x64 | `win-x64` | +| macOS | x64 (Intel) | `osx-x64` | +| macOS | arm64 (Apple Silicon) | `osx-arm64` | +| Linux | x64 | `linux-x64` | + +ARM Linux is not currently packaged. To request additional platform support, open an issue at [github.com/IgniteUI/MAKER](https://github.com/IgniteUI/MAKER). + +The binary cache location can be overridden with the `MAKER_MCP_CACHE` environment variable. The default cache paths are `%LOCALAPPDATA%\maker-mcp\{version}\{rid}\` on Windows and `~/.cache/maker-mcp/{version}/{rid}/` on macOS and Linux. + +## Additional Resources + +- [AI-Assisted Development Overview](ai-assisted-development-overview.md) +- [Agent Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for React **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-react) +- [Ignite UI for React **GitHub**](https://github.com/IgniteUI/igniteui-react) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/map-api.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/map-api.md index e4ae3628b..7bb9b9eb5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/map-api.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/map-api.md @@ -16,7 +16,7 @@ The React [`IgrGeographicMap`](https://www.infragistics.com/products/ignite-ui-r - [`zoomable`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#zoomable) - [`zoomToGeographic`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#zoomToGeographic) - [`worldRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#worldRect) -- [`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrseriesviewer.html#windowRect) +- [`windowRect`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowRect) - [`windowScale`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#windowScale) - [`getGeographicFromZoom`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#getGeographicFromZoom) - [`getGeographicPoint`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmap.html#getGeographicPoint) @@ -42,9 +42,9 @@ The React [`IgrGeographicSymbolSeries`](https://www.infragistics.com/products/ig - [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html#latitudeMemberPath) - [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html#longitudeMemberPath) -- [`markerType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmarkerseries.html#markerType) -- [`markerBrush`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmarkerseries.html#markerBrush) -- [`markerOutline`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicmarkerseries.html#markerOutline) +- [`markerType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html#markerType) +- [`markerBrush`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html#markerBrush) +- [`markerOutline`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html#markerOutline) ## React Geographic Bubble Series API @@ -61,10 +61,10 @@ The React [`IgrGeographicProportionalSymbolSeries`](https://www.infragistics.com The React [`IgrGeographicShapeSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseries.html) and [`IgrGeographicPolylineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicpolylineseries.html) have the same API members: -- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseriesbase.html#shapeMemberPath) -- `Thickness` -- `Brush` -- `Outline` +- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicshapeseries.html#shapeMemberPath) +- [`thickness`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html#thickness) +- [`brush`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html#brush) +- [`outline`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_maps.igrgeographicsymbolseries.html#outline) ## React Geographic Area Series API diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/mask-input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/mask-input.md index 0b94e652e..ad4a58744 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/mask-input.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/mask-input.md @@ -52,7 +52,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage First, you need to the install the corresponding Ignite UI for React npm package by running the following command: @@ -154,10 +153,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Prompt Character -Developers can customize the prompt symbol used for unfilled parts of the mask. To do this, simply provide any character to the [`prompt`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrmaskinputbase.html#prompt) property: +Developers can customize the prompt symbol used for unfilled parts of the mask. To do this, simply provide any character to the [`prompt`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrmaskinput.html#prompt) property: ```tsx @@ -167,7 +165,7 @@ By default, the `prompt` character is **underscore**. ### Placeholder -Developers can also take advantage of the [`placeholder`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinputbase.html#placeholder) property, which serves the purpose of the native input placeholder attribute. If no value is provided for the placeholder, the value of the mask is used as such. +Developers can also take advantage of the [`placeholder`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrmaskinput.html#placeholder) property, which serves the purpose of the native input placeholder attribute. If no value is provided for the placeholder, the value of the mask is used as such. ```tsx @@ -251,7 +249,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling The [`IgrMaskInput`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrmaskinput.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -279,7 +276,6 @@ igc-mask-input::part(input)::placeholder { - ## Assumptions and limitations - The masked input does not expose a _type_ attribute since it is always an input of type **text**. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/multi-column-combobox.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/multi-column-combobox.md deleted file mode 100644 index af76b377b..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/multi-column-combobox.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -title: React Combo | Data Visualization Tools | Infragistics -_description: Infragistics' React combo component helps you select the best chart to display your data. Improve your graphs and visualization with Ignite UI for React! -_keywords: React combo, drop down, Ignite UI for React, Infragistics -mentionedTypes: [] -_tocName: Multi-Column Combo Box -_premium: true ---- - -# React Multi-Column Combo Box Overview - -The Multi-Column Combo Box automatically generates columns for properties on the data object. This component is unique in that it's a combo box that visualizes large amounts of data similar to a data grid embedded in the dropdown. - -## React Multi-Column Combo Box Example - -This sample demonstrates how to create [`IgrMultiColumnComboBox`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html) that displays data in multiple columns in a popup window. - -```typescript -export class SampleComboData { - - public static getPopulation(): any[] { - const data = [ - { country: "Afghanistan", pop: 35320445, id: "Afghanistan", continent: "Middle_East" }, - { country: "Albania", pop: 3215988, id: "Albania", continent: "Europe" }, - { country: "Algeria", pop: 35980193, id: "Algeria", continent: "Middle_East" }, - { country: "American Samoa", pop: 69543, id: "American_Samoa", continent: "Oceania" }, - { country: "Andorra", pop: 86165, id: "Andorra", continent: "Europe" }, - { country: "Angola", pop: 19618432, id: "Angola", continent: "Africa" }, - { country: "Antigua and Barbuda", pop: 89612, id: "Antigua_and_Barbuda", continent: "Central_America" }, - { country: "Argentina", pop: 40764561, id: "Argentina", continent: "South_America" }, - { country: "Armenia", pop: 3100236, id: "Armenia", continent: "Europe" }, - { country: "Aruba", pop: 108141, id: "Aruba", continent: "Central_America" }, - { country: "Australia", pop: 22323900, id: "Australia", continent: "Oceania" }, - { country: "Austria", pop: 8423635, id: "Austria", continent: "Europe" }, - { country: "Azerbaijan", pop: 9173082, id: "Azerbaijan", continent: "Middle_East" }, - { country: "Bahamas", pop: 347176, id: "Bahamas", continent: "Central_America" }, - { country: "Bahrain", pop: 1323535, id: "Bahrain", continent: "Middle_East" }, - { country: "Bangladesh", pop: 150493658, id: "Bangladesh", continent: "Asia" }, - { country: "Barbados", pop: 273925, id: "Barbados", continent: "Central_America" }, - { country: "Belarus", pop: 9473000, id: "Belarus", continent: "Europe" }, - { country: "Belgium", pop: 11020952, id: "Belgium", continent: "Europe" }, - { country: "Belize", pop: 356600, id: "Belize", continent: "Central_America" }, - { country: "Benin", pop: 9099922, id: "Benin", continent: "Africa" }, - { country: "Bermuda", pop: 64700, id: "Bermuda", continent: "Central_America" }, - { country: "Bhutan", pop: 738267, id: "Bhutan", continent: "Asia" }, - { country: "Bolivia", pop: 10088108, id: "Bolivia", continent: "South_America" }, - { country: "Bosnia and Herzegovina", pop: 3752228, id: "Bosnia_and_Herzegovina", continent: "Europe" }, - { country: "Botswana", pop: 2030738, id: "Botswana", continent: "Africa" }, - { country: "Brazil", pop: 196655014, id: "Brazil", continent: "South_America" }, - { country: "Brunei", pop: 405938, id: "Brunei", continent: "Asia" }, - { country: "Bulgaria", pop: 7348328, id: "Bulgaria", continent: "Europe" }, - { country: "Burkina Faso", pop: 16967845, id: "Burkina_Faso", continent: "Africa" }, - { country: "Burundi", pop: 8575172, id: "Burundi", continent: "Africa" }, - { country: "Cambodia", pop: 14305183, id: "Cambodia", continent: "Asia" }, - { country: "Cameroon", pop: 20030362, id: "Cameroon", continent: "Africa" }, - { country: "Canada", pop: 34483975, id: "Canada", continent: "North_America" }, - { country: "Cape Verde", pop: 500585, id: "Cape_Verde", continent: "Africa" }, - { country: "Cayman Islands", pop: 56729, id: "Cayman_Islands", continent: "Central_America" }, - { country: "Central African Republic", pop: 4486837, id: "Central_African_Republic", continent: "Africa" }, - { country: "Chad", pop: 11525496, id: "Chad", continent: "Africa" }, - { country: "Channel Islands", pop: 153876, id: "Channel_Islands", continent: "Europe" }, - { country: "Chile", pop: 17269525, id: "Chile", continent: "South_America" }, - { country: "China", pop: 1344130000, id: "China", continent: "Asia" }, - { country: "Colombia", pop: 46927125, id: "Colombia", continent: "South_America" }, - { country: "Comoros", pop: 753943, id: "Comoros", continent: "Africa" }, - { country: "Congo, Dem. Rep.", pop: 67757577, id: "Congo__Dem__Rep_", continent: "Africa" }, - { country: "Congo, Rep.", pop: 4139748, id: "Congo__Rep_", continent: "Africa" }, - { country: "Costa Rica", pop: 4726575, id: "Costa_Rica", continent: "Central_America" }, - { country: "Cote d'Ivoire", pop: 20152894, id: "Cote_d_Ivoire", continent: "Africa" }, - { country: "Croatia", pop: 4403000, id: "Croatia", continent: "Europe" }, - { country: "Cuba", pop: 11253665, id: "Cuba", continent: "Central_America" }, - { country: "Curacao", pop: 145619, id: "Curacao", continent: "Central_America" }, - { country: "Cyprus", pop: 1116564, id: "Cyprus", continent: "Europe" }, - { country: "Czechia", pop: 10496088, id: "Czech_Republic", continent: "Europe" }, - { country: "Denmark", pop: 5570572, id: "Denmark", continent: "Europe" }, - { country: "Djibouti", pop: 905564, id: "Djibouti", continent: "Africa" }, - { country: "Dominica", pop: 67675, id: "Dominica", continent: "Central_America" }, - { country: "Dominican Republic", pop: 10056181, id: "Dominican_Republic", continent: "Central_America" }, - { country: "Ecuador", pop: 14666055, id: "Ecuador", continent: "South_America" }, - { country: "Egypt, Arab Rep.", pop: 82536770, id: "Egypt__Arab_Rep_", continent: "Middle_East" }, - { country: "El Salvador", pop: 6227491, id: "El_Salvador", continent: "Central_America" }, - { country: "Equatorial Guinea", pop: 720213, id: "Equatorial_Guinea", continent: "Africa" }, - { country: "Eritrea", pop: 5415280, id: "Eritrea", continent: "Africa" }, - { country: "Estonia", pop: 1339928, id: "Estonia", continent: "Europe" }, - { country: "Ethiopia", pop: 84734262, id: "Ethiopia", continent: "Africa" }, - { country: "Faeroe Islands", pop: 48863, id: "Faeroe_Islands", continent: "Central_America" }, - { country: "Fiji", pop: 868406, id: "Fiji", continent: "Oceania" }, - { country: "Finland", pop: 5388272, id: "Finland", continent: "Europe" }, - { country: "France", pop: 65433714, id: "France", continent: "Europe" }, - { country: "French Polynesia", pop: 273777, id: "French_Polynesia", continent: "Oceania" }, - { country: "Gabon", pop: 1534262, id: "Gabon", continent: "Africa" }, - { country: "Gambia", pop: 1776103, id: "Gambia", continent: "Africa" }, - { country: "Georgia", pop: 4486000, id: "Georgia", continent: "Europe" }, - { country: "Germany", pop: 81797673, id: "Germany", continent: "Europe" }, - { country: "Ghana", pop: 24965816, id: "Ghana", continent: "Africa" }, - { country: "Greece", pop: 11300410, id: "Greece", continent: "Europe" }, - { country: "Greenland", pop: 56840, id: "Greenland", continent: "North_America" }, - { country: "Grenada", pop: 104890, id: "Grenada", continent: "Central_America" }, - { country: "Guam", pop: 182111, id: "Guam", continent: "Central_America" }, - { country: "Guatemala", pop: 14757316, id: "Guatemala", continent: "Central_America" }, - { country: "Guinea", pop: 10221808, id: "Guinea", continent: "Africa" }, - { country: "Guinea-Bissau", pop: 1547061, id: "Guinea-Bissau", continent: "Africa" }, - { country: "Guyana", pop: 756040, id: "Guyana", continent: "South_America" }, - { country: "Haiti", pop: 10123787, id: "Haiti", continent: "Central_America" }, - { country: "Honduras", pop: 7754687, id: "Honduras", continent: "Central_America" }, - { country: "Hong Kong SAR, China", pop: 7071600, id: "Hong_Kong_SAR__China", continent: "Asia" }, - { country: "Hungary", pop: 9971727, id: "Hungary", continent: "Europe" }, - { country: "Iceland", pop: 319014, id: "Iceland", continent: "Europe" }, - { country: "India", pop: 1241491960, id: "India", continent: "Asia" }, - { country: "Indonesia", pop: 242325638, id: "Indonesia", continent: "Asia" }, - { country: "Iran, Islamic Rep.", pop: 74798599, id: "Iran__Islamic_Rep_", continent: "Middle_East" }, - { country: "Iraq", pop: 32961959, id: "Iraq", continent: "Middle_East" }, - { country: "Ireland", pop: 4576317, id: "Ireland", continent: "Europe" }, - { country: "Isle of Man", pop: 83327, id: "Isle_of_Man", continent: "Europe" }, - { country: "Israel", pop: 7765900, id: "Israel", continent: "Middle_East" }, - { country: "Italy", pop: 60723603, id: "Italy", continent: "Europe" }, - { country: "Jamaica", pop: 2706500, id: "Jamaica", continent: "Central_America" }, - { country: "Japan", pop: 127817277, id: "Japan", continent: "Asia" }, - { country: "Jordan", pop: 6181000, id: "Jordan", continent: "Middle_East" }, - { country: "Kazakhstan", pop: 16558676, id: "Kazakhstan", continent: "Asia" }, - { country: "Kenya", pop: 41609728, id: "Kenya", continent: "Africa" }, - { country: "Kiribati", pop: 101093, id: "Kiribati", continent: "Oceania" }, - { country: "Korea, Dem. Rep.", pop: 24451285, id: "Korea__Dem__Rep_", continent: "Asia" }, - { country: "Korea, Rep.", pop: 49779000, id: "Korea__Rep_", continent: "Asia" }, - { country: "Kosovo", pop: 1802765, id: "Kosovo", continent: "Europe" }, - { country: "Kuwait", pop: 2818042, id: "Kuwait", continent: "Middle_East" }, - { country: "Kyrgyz Republic", pop: 5514600, id: "Kyrgyz_Republic", continent: "Asia" }, - { country: "Lao PDR", pop: 6288037, id: "Lao_PDR", continent: "Asia" }, - { country: "Latvia", pop: 2058184, id: "Latvia", continent: "Europe" }, - { country: "Lebanon", pop: 4259405, id: "Lebanon", continent: "Middle_East" }, - { country: "Lesotho", pop: 2193843, id: "Lesotho", continent: "Africa" }, - { country: "Liberia", pop: 4128572, id: "Liberia", continent: "Africa" }, - { country: "Libya", pop: 6422772, id: "Libya", continent: "Middle_East" }, - { country: "Liechtenstein", pop: 36304, id: "Liechtenstein", continent: "Europe" }, - { country: "Lithuania", pop: 3030173, id: "Lithuania", continent: "Europe" }, - { country: "Luxembourg", pop: 518252, id: "Luxembourg", continent: "Europe" }, - { country: "Macao SAR, China", pop: 555731, id: "Macao_SAR__China", continent: "Asia" }, - { country: "Macedonia, FYR", pop: 2063893, id: "Macedonia__FYR", continent: "Europe" }, - { country: "Madagascar", pop: 21315135, id: "Madagascar", continent: "Africa" }, - { country: "Malawi", pop: 15380888, id: "Malawi", continent: "Africa" }, - { country: "Malaysia", pop: 28859154, id: "Malaysia", continent: "Asia" }, - { country: "Maldives", pop: 320081, id: "Maldives", continent: "Asia" }, - { country: "Mali", pop: 15839538, id: "Mali", continent: "Africa" }, - { country: "Malta", pop: 415654, id: "Malta", continent: "Europe" }, - { country: "Marshall Islands", pop: 54816, id: "Marshall_Islands", continent: "Oceania" }, - { country: "Mauritania", pop: 3541540, id: "Mauritania", continent: "Africa" }, - { country: "Mauritius", pop: 1286051, id: "Mauritius", continent: "Africa" }, - { country: "Mexico", pop: 114793341, id: "Mexico", continent: "North_America" }, - { country: "Micronesia, Fed. Sts.", pop: 111542, id: "Micronesia__Fed__Sts_", continent: "Oceania" }, - { country: "Moldova", pop: 3559000, id: "Moldova", continent: "Europe" }, - { country: "Monaco", pop: 35427, id: "Monaco", continent: "Europe" }, - { country: "Mongolia", pop: 2800114, id: "Mongolia", continent: "Asia" }, - { country: "Montenegro", pop: 632261, id: "Montenegro", continent: "Europe" }, - { country: "Morocco", pop: 32272974, id: "Morocco", continent: "Middle_East" }, - { country: "Mozambique", pop: 23929708, id: "Mozambique", continent: "Africa" }, - { country: "Myanmar", pop: 48336763, id: "Myanmar", continent: "Asia" }, - { country: "Namibia", pop: 2324004, id: "Namibia", continent: "Africa" }, - { country: "Nepal", pop: 30485798, id: "Nepal", continent: "Asia" }, - { country: "Netherlands", pop: 16693074, id: "Netherlands", continent: "Europe" }, - { country: "New Caledonia", pop: 254024, id: "New_Caledonia", continent: "Oceania" }, - { country: "New Zealand", pop: 4405200, id: "New_Zealand", continent: "Oceania" }, - { country: "Nicaragua", pop: 5869859, id: "Nicaragua", continent: "Central_America" }, - { country: "Niger", pop: 16068994, id: "Niger", continent: "Africa" }, - { country: "Nigeria", pop: 162470737, id: "Nigeria", continent: "Africa" }, - { country: "Northern Mariana Islands", pop: 61174, id: "Northern_Mariana_Islands", continent: "Central_America" }, - { country: "Norway", pop: 4953088, id: "Norway", continent: "Europe" }, - { country: "Oman", pop: 2846145, id: "Oman", continent: "Middle_East" }, - { country: "Pakistan", pop: 176745364, id: "Pakistan", continent: "Middle_East" }, - { country: "Palau", pop: 20609, id: "Palau", continent: "Oceania" }, - { country: "Panama", pop: 3571185, id: "Panama", continent: "Central_America" }, - { country: "Papua New Guinea", pop: 7013829, id: "Papua_New_Guinea", continent: "Oceania" }, - { country: "Paraguay", pop: 6568290, id: "Paraguay", continent: "South_America" }, - { country: "Peru", pop: 29399817, id: "Peru", continent: "South_America" }, - { country: "Philippines", pop: 94852030, id: "Philippines", continent: "Asia" }, - { country: "Poland", pop: 38534157, id: "Poland", continent: "Europe" }, - { country: "Portugal", pop: 10556999, id: "Portugal", continent: "Europe" }, - { country: "Puerto Rico", pop: 3706690, id: "Puerto_Rico", continent: "Central_America" }, - { country: "Qatar", pop: 1870041, id: "Qatar", continent: "Middle_East" }, - { country: "Romania", pop: 21384832, id: "Romania", continent: "Europe" }, - { country: "Russian Federation", pop: 142960000, id: "Russian_Federation", continent: "Europe" }, - { country: "Rwanda", pop: 10942950, id: "Rwanda", continent: "Africa" }, - { country: "Samoa", pop: 183874, id: "Samoa", continent: "Oceania" }, - { country: "San Marino", pop: 31735, id: "San_Marino", continent: "Europe" }, - { country: "Sao Tome and Principe", pop: 168526, id: "Sao_Tome_and_Principe", continent: "Africa" }, - { country: "Saudi Arabia", pop: 28082541, id: "Saudi_Arabia", continent: "Middle_East" }, - { country: "Senegal", pop: 12767556, id: "Senegal", continent: "Africa" }, - { country: "Serbia", pop: 7258745, id: "Serbia", continent: "Europe" }, - { country: "Seychelles", pop: 86000, id: "Seychelles", continent: "Africa" }, - { country: "Sierra Leone", pop: 5997486, id: "Sierra_Leone", continent: "Africa" }, - { country: "Singapore", pop: 5183700, id: "Singapore", continent: "Asia" }, - { country: "Sint Maarten", pop: 36609, id: "Sint_Maarten", continent: "Europe" }, - { country: "Slovak Republic", pop: 5398384, id: "Slovak_Republic", continent: "Europe" }, - { country: "Slovenia", pop: 2052843, id: "Slovenia", continent: "Europe" }, - { country: "Solomon Islands", pop: 552267, id: "Solomon_Islands", continent: "Oceania" }, - { country: "Somalia", pop: 9556873, id: "Somalia", continent: "Middle_East" }, - { country: "South Africa", pop: 50586757, id: "South_Africa", continent: "Africa" }, - { country: "South Sudan", pop: 10314021, id: "South_Sudan", continent: "Africa" }, - { country: "Spain", pop: 46174601, id: "Spain", continent: "Europe" }, - { country: "Sri Lanka", pop: 20869000, id: "Sri_Lanka", continent: "Asia" }, - { country: "St. Kitts and Nevis", pop: 53051, id: "St__Kitts_and_Nevis", continent: "Central_America" }, - { country: "St. Lucia", pop: 176000, id: "St__Lucia", continent: "Central_America" }, - { country: "St. Martin (French part)", pop: 30615, id: "St__Martin__French_part_", continent: "Europe" }, - { country: "St. Vincent and the Grenadines", pop: 109365, id: "St__Vincent_and_the_Grenadines", continent: "Central_America" }, - { country: "Sudan", pop: 34318385, id: "Sudan", continent: "Africa" }, - { country: "Suricountry", pop: 529419, id: "Suricountry", continent: "South_America" }, - { country: "Swaziland", pop: 1067773, id: "Swaziland", continent: "Africa" }, - { country: "Sweden", pop: 9449213, id: "Sweden", continent: "Europe" }, - { country: "Switzerland", pop: 7912398, id: "Switzerland", continent: "Europe" }, - { country: "Syrian Arab Republic", pop: 20820311, id: "Syrian_Arab_Republic", continent: "Middle_East" }, - { country: "Tajikistan", pop: 6976958, id: "Tajikistan", continent: "Asia" }, - { country: "Tanzania", pop: 46218486, id: "Tanzania", continent: "Africa" }, - { country: "Thailand", pop: 69518555, id: "Thailand", continent: "Asia" }, - { country: "Timor-Leste", pop: 1175880, id: "Timor-Leste", continent: "Oceania" }, - { country: "Togo", pop: 6154813, id: "Togo", continent: "Africa" }, - { country: "Tonga", pop: 104509, id: "Tonga", continent: "Oceania" }, - { country: "Trinidad and Tobago", pop: 1346350, id: "Trinidad_and_Tobago", continent: "Central_America" }, - { country: "Tunisia", pop: 10673800, id: "Tunisia", continent: "Middle_East" }, - { country: "Turkey", pop: 73639596, id: "Turkey", continent: "Middle_East" }, - { country: "Turkmenistan", pop: 5105301, id: "Turkmenistan", continent: "Asia" }, - { country: "Turks and Caicos Islands", pop: 39184, id: "Turks_and_Caicos_Islands", continent: "Central_America" }, - { country: "Tuvalu", pop: 9847, id: "Tuvalu", continent: "Oceania" }, - { country: "Uganda", pop: 34509205, id: "Uganda", continent: "Africa" }, - { country: "Ukraine", pop: 45706100, id: "Ukraine", continent: "Europe" }, - { country: "United Arab Emirates", pop: 7890924, id: "United_Arab_Emirates", continent: "Middle_East" }, - { country: "United Kingdom", pop: 62744081, id: "United_Kingdom", continent: "Europe" }, - { country: "United States", pop: 311591917, id: "United_States", continent: "North_America" }, - { country: "Uruguay", pop: 3368595, id: "Uruguay", continent: "South_America" }, - { country: "Uzbekistan", pop: 29341200, id: "Uzbekistan", continent: "Asia" }, - { country: "Vanuatu", pop: 245619, id: "Vanuatu", continent: "Oceania" }, - { country: "Venezuela, RB", pop: 29278000, id: "Venezuela__RB", continent: "South_America" }, - { country: "Vietnam", pop: 87840000, id: "Vietnam", continent: "Asia" }, - { country: "Virgin Islands (U.S.)", pop: 109666, id: "Virgin_Islands__U_S__", continent: "Central_America" }, - { country: "West Bank and Gaza", pop: 3927051, id: "West_Bank_and_Gaza", continent: "Middle_East" }, - { country: "Yemen, Rep.", pop: 24799880, id: "Yemen__Rep_", continent: "Middle_East" }, - { country: "Zambia", pop: 13474959, id: "Zambia", continent: "Africa" }, - { country: "Zimbabwe", pop: 12754378, id: "Zimbabwe", continent: "Africa" } - ]; - return data; - } -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { SampleComboData } from './SampleComboData'; -import { IgrMultiColumnComboBoxModule } from 'igniteui-react-data-grids'; -import { IgrMultiColumnComboBox, SortMode } from 'igniteui-react-data-grids'; -import { IgrColumnWidth } from 'igniteui-react-data-grids'; - -IgrMultiColumnComboBoxModule.register(); - -export default class MultiColumnComboBoxOverview extends React.Component { - public multiColumnComboBox!: IgrMultiColumnComboBox; - public countryData: any[]; - - constructor(props: any) { - super(props); - this.onMultiColumnComboBoxRef = this.onMultiColumnComboBoxRef.bind(this); - this.countryData = SampleComboData.getPopulation(); - } - - public onMultiColumnComboBoxRef(multiColumnComboBox: IgrMultiColumnComboBox) { - if (!multiColumnComboBox) { return; } - this.multiColumnComboBox = multiColumnComboBox; - this.multiColumnComboBox.dataSource = this.countryData; - this.multiColumnComboBox.textField = "country"; - this.multiColumnComboBox.fields = ["country", "continent", "pop"]; - this.multiColumnComboBox.placeholder = "Choose a country"; - this.multiColumnComboBox.sortMode = SortMode.SortByOneColumnOnly; - } - - public render(): JSX.Element { - return ( -
-
- - -
-
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -## Dependencies - -When installing the charts component, the core package must also be installed. - -```cmd -npm install --save igniteui-react-core -npm install --save igniteui-react-data-grids -npm install --save igniteui-react-inputs -npm install --save igniteui-react-layouts -``` - -## Component Modules - -The Multi-Column Combo Box requires the following modules: - -```ts -import { IgrMultiColumnComboBoxModule } from 'igniteui-react-data-grids'; -import { IgrMultiColumnComboBox } from 'igniteui-react-data-grids'; - -IgrMultiColumnComboBoxModule.register(); -``` - -## Usage - -### Binding a Data Source - -In order to display your objects in the Multi-Column Combo Box component, you will need to bind the `DataSource` property. This can be bound in the form of an array of complex objects. The following code demonstrates how to bind the data source property. - -In the below code snippet, the "countryNames" collection is an any\[] full of custom objects. - -```tsx - -``` - -### Setting Display Value and Data Value - -You can configure different properties of the Multi-Column Combo Box's bound `DataSource` to act as the display text for the control as well as the underlying value when a selection is made. This is done by setting the [`textField`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html#textField) and [`valueField`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html#valueField) properties of the control, respectively, to the name of the property on the data item that you want to represent these things. - -The following code snippet shows how to set these properties, given that the underlying data item has a "Country" and "ID" property: - -```tsx - -``` - -### Setting Fields - -By default, the Multi-Column Combo Box will show all of the properties on the underlying data item, but this can be controlled by setting the [`fields`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html#fields) property on the component. This property takes a `string[]` of property paths on the underlying data item to determine which properties are shown. - -The following code snippet shows how to set this, and the resulting drop-down would only show the ID and Country columns: - -```tsx - -``` - -### Setting Placeholder Text - -It is possible to configure the text that shows as a placeholder for when there is no selection in the Multi-Column Combo Box component. This is done by setting the [`placeholder`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html#placeholder) property to the string you would like to be displayed. The following code demonstrates how to set this: - -```tsx - -``` - -### Configuring Sorting Mode - -The user has the ability to sort the columns that are displayed in the Multi-Column Combo Box by clicking the header of the column in the drop-down. The way the sorting is configured can be modified as well, as the columns can be sorted by only a single column or multiple columns, and they can be limited to either ascending and descending, or they can be tri-state. This is done by setting the [`sortMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html#sortMode) property of the component. - -Note, the TriState sort options will allow sorted columns to be unsorted. - -The following code demonstrates how to set the Multi-Column Combo Box to be able to sort by multiple columns tri-state. - -```tsx - -``` - -## API References - -- `DataSource` -- [`fields`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html#fields) -- `GetValueAsync` -- `GetValue` -- [`IgrMultiColumnComboBox`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html) -- [`placeholder`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html#placeholder) -- [`sortMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html#sortMode) -- [`textField`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html#textField) -- `ValueChanged` -- [`valueField`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_grids.igrmulticolumncombobox.html#valueField) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/navbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/navbar.md index a0907ea89..c5002920f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/navbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/navbar.md @@ -65,7 +65,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage Before using the [`IgrNavbar`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrnavbar.html), you need to register it as follows: @@ -215,7 +214,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/navigation-drawer.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/navigation-drawer.md index 89c00a430..4b97c7b99 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/navigation-drawer.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/navigation-drawer.md @@ -106,7 +106,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage First, you need to the install the corresponding Ignite UI for React npm package by running the following command: @@ -243,7 +242,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Navbar Integration While any content can be provided in the drawer, the [`IgrNavDrawerItem`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrnavdraweritem.html) is available to apply out-of-the-box styling to the items. @@ -435,7 +433,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Mini Variant With the mini variant, the Navigation Drawer changes its width instead of closing. It is used to maintain quick navigation, available at all times, leaving just the icons. To achieve that, you only need to set up the `mini` slot of the drawer. @@ -586,7 +583,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling The [`IgrNavDrawer`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrnavdrawer.html) exposes several CSS parts - `base`, `main`, and `mini`, giving you full control over their styling. @@ -735,7 +731,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrButton`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbutton.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/overview.md index 031fc0a1d..178262484 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/overview.md @@ -1,459 +1,463 @@ --- -title: Free React Data Grid Lite (Open Source) - Ignite UI Grid Lite | MIT license -_description: Create apps with our open-source Grid Lite. It’s lightweight and packed with essential features - filtering, hiding, sorting, and more. Try now. -_keywords: overview, React, {ComponentKeywords}, Ignite UI for React, Infragistics -mentionedTypes: [{ComponentApiMembers}] -namespace: Infragistics.Controls +title: React ComboBox Component – Ignite UI for React +_description: React Combo component provides a powerful input, combining features of the basic HTML input, select, filtering and custom drop-down lists. Try it for FREE +_keywords: Ignite UI for React, UI controls, React widgets, web widgets, UI widgets, React, Native React Components Suite, Native React Controls, Native React Components Library, React ComboBox component _license: MIT -_tocName: Grid Lite +mentionedTypes: ["Combo", "ComboItem", "ComboHeader", "ComboList"] +_tocName: Combo Box --- -# Free & Open-Source React Data Grid (Grid Lite) +# React ComboBox Overview -The Ignite UI for React Grid Lite is a lightweight, high-performance React data grid that’s free to use, open-source, and built for modern React applications. +React ComboBox is a lightweight editor that enables users to easily select, filter, and group different predefined options in a provided list. The component also supports options for React ComboBox keyboard navigation, templates to customize how the items, header, and footer are displayed. -This free React data grid is open-source JavaScript data grid built as a Web Component, which means you can use it dependency-free with or without a web framework. It delivers essential data-display functionality with minimal overhead and the performance users expect. The React Grid Lite is designed for developers who need fast and lightweight data presentation. +The Ignite UI for React ComboBox component provides a list of options from which users can make a selection. It displays all options in a virtualized list of items, meaning the ComboBox can simultaneously show thousands of records, where one or more options can be selected. Additionally, the component features case-sensitive filtering, grouping, complex data binding and more. -## What You Get with our Free React Data Grid +## React ComboBox Example -Our free, open-source React Grid Lite comes with the following column-based features: sorting, filtering, hiding, resizing and a variety of pre-defined data types. Blazing-fast performance is delivered with the use of row virtualization. In addition, the component supports keyboard navigation and theming through the [Ignite UI Theming Framework](../themes/overview.md). +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +``` +```tsx +import React from "react"; +import ReactDOM from "react-dom/client"; +import { IgrCombo } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +interface City { + id: string; + name: string; +} + +const cities: City[] = [ + { name: "London", id: "UK01" }, + { name: "Sofia", id: "BG01" }, + { name: "New York", id: "NY01" }, +]; + +export default function ComboOverview() { + return ( +
+ +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); +``` -## Installation and Setup +
-### Installation +## Getting Started with React ComboBox -To install Grid Lite, go to the root folder of your project (where `package.json` is located) and run the following command using npm: +First, you need to the install the corresponding Ignite UI for React npm package by running the following command: ```cmd npm install igniteui-react -npm install igniteui-grid-lite ``` -Or using yarn: +You will then need to import the React [`IgrCombo`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html) and its necessary CSS: -```cmd -yarn add igniteui-react -yarn add igniteui-grid-lite +```tsx +import { IgrCombo } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + +> [!WARNING] +> The [`IgrCombo`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html) component doesn't work with the standard `` element. Use `Form` instead. + +Then, we will bind an array of objects to the combo data source used for building the list of options. + +```tsx +interface City { + id: string; + name: string; +} + +const cities: City[] = [ + { name: "London", id: "UK01" }, + { name: "Sofia", id: "BG01" }, + { name: "New York", id: "NY01" }, +]; + + ``` -### Using the Grid Lite in your React code +### Data value and display properties + +When the combo is bound to a list of complex data (i.e. objects), we need to specify a property that the control will use to handle item selection. The component exposes the following properties: + + + +- `T` - **required**, if [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey) is omitted, this should be set to "object", otherwise this needs to match the property type of [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey). + + + +- [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey) - **Optional**, **required** for complex data object - Determines which field of the data source will be used to make selections. If [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey) is omitted, the selection API will use object references to select items. +- [`displayKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#displayKey) - **Optional**, **recommended** for complex data objects - Determines which field in the data source is used as the display value. If no value is specified for [`displayKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#displayKey), the combo will use the specified [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey) (if any). + In our case, we want the combo to display the `name` of each city and use the `id` field for item selection and as the underlying value for each item. Therefore, we provide these properties to the combo's [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey) and [`displayKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#displayKey) respectively. + +> [!Note] +> When the data source consists of primitive types (e.g. `strings`, `numbers`, etc.), **do not** specify a [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey) and/or [`displayKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#displayKey). -In the file where you want to use Grid Lite, first we need to import it: +### Setting Value + +The ComboBox component exposes a [`value`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#value) getter and setter in addition to an attribute, which is also called value. You can use the value attribute to set the selected items on component initialization. + +If you want to read the value, i.e. the list of currently selected items, or to update the value use the value getter and setter respectively. The value getter will return a list of all selected items as represented by the [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey). Likewise, if you want to update the list of selected items by using the value setter, you should provide a list of items by their [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey). + +Example: ```tsx -import { IgrGridLite } from 'igniteui-react/grid-lite'; +const comboRef = useRef(null); + +// Given the overview example from above this will return ['BG01'] +console.log(comboRef.current.value); + +// Change the selected items to New York and London +comboRef.current.value = ['NY01', 'UK01']; ``` - +### Selection API + +The combo component exposes APIs that allow you to change the currently selected items. + +Besides selecting items from the list of options by user interaction, you can select items programmatically. This is done via the [`select`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#select) and [`deselect`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#deselect) methods. You can pass an array of items to both methods. If the methods are called with no arguments all items will be selected/deselected depending on which method is called. If you have specified a [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey) for your combo component, then you should pass the value keys of the items you would like to select/deselect: -Add the `` component to your markup: +#### Select/deselect some items ```tsx -return ( -
-
- -
-
-); +// Select/deselect items by their IDs as valueKey is set to 'id' +comboRef.current.select(["UK01", "UK02", "UK03", "UK04", "UK05"]); +comboRef.current.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]); ``` -## Grid Lite in Action +#### Select/deselect all items -```typescript -export type UserSimple = { - id: string; - username: string; - email: string; - subscribed: boolean; -}; +```tsx +// Select/deselect all items +comboRef.current.select([]); +comboRef.current.deselect([]); +``` -export type ProductInfo = { - id: string; - name: string; - price: number; - sold: number; - rating: number; - total: number; -}; +If the [`valueKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#valueKey) property is omitted, you will have to list the items you wish to select/deselect as objects references: -export type User = { +```tsx +// Select/deselect values by object references when no valueKey is provided +comboRef.current.select([cities[1], cities[5]]); +comboRef.current.deselect([cities[1], cities[5]]); +``` + +```typescript +interface City { id: string; - firstName: string; - lastName: string; - age: number; - email: string; - avatar: string; - active: boolean; - priority: 'Low' | 'Standard' | 'High'; - employmentType: 'Full-Time' | 'Part-Time' | 'Contract'; - department: 'Engineering' | 'Marketing' | 'Sales' | 'Finance'; - satisfaction: number; - registeredAt: Date; -}; - -export class GridLiteDataService { - private counter = 0; - - private namesMen = ['John', 'Bob', 'Mark', 'Charlie', 'Martin', 'Bill', 'Frank', 'Larry', 'Henry', 'Steve', 'Mike', 'Andrew']; - private namesWomen = ['Jane', 'Alice', 'Diana', 'Eve', 'Grace' , 'Katie', 'Irene', 'Liz', 'Fiona', 'Pam', 'Val', 'Mindy']; - private lastNames = ['Smith', 'Johnson', 'Mendoza', 'Brown', 'Spencer', 'Stone', 'Stark', 'Rooney']; - private productNames = ['Widget', 'Gadget', 'Gizmo', 'Device', 'Tool', 'Instrument', 'Machine', 'Equipment']; - private productModels = ['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite']; - private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High']; - private employmentTypes: ('Full-Time' | 'Part-Time' | 'Contract')[] = ['Full-Time', 'Part-Time', 'Contract']; - private departments: ('Engineering' | 'Marketing' | 'Sales' | 'Finance')[] = ['Engineering', 'Marketing', 'Sales', 'Finance']; - - private randomInt(min: number, max: number): number { - return Math.floor(Math.random() * (max - min + 1)) + min; - } - - private randomFloat(min: number, max: number, precision = 2): number { - const array = new Uint32Array(1); - window.crypto.getRandomValues(array); - const random01 = array[0] / 2 ** 32; - return parseFloat((random01 * (max - min) + min).toFixed(precision)); - } - - private randomElement(array: T[]): T { - return array[this.randomInt(0, array.length - 1)]; - } - - private randomBoolean(): boolean { - const array = new Uint8Array(1); - window.crypto.getRandomValues(array); - return (array[0] & 1) === 0; - } - - private generateId(): string { - return `1000-${this.counter++}-${this.randomInt(1000, 9999)}`; - } - - createProductInfo(): ProductInfo { - const price = this.randomFloat(50, 500, 2); - const sold = this.randomInt(10, 100); - const total = parseFloat((price * sold).toFixed(2)); - const product = this.randomElement(this.productNames) + ' ' + this.randomElement(this.productModels); - - return { - price, - sold, - total, - id: this.generateId(), - name: product, - rating: this.randomFloat(0, 5, 1) - }; - } - - createUserSimple(): UserSimple { - const firstName = this.randomElement(this.namesMen.concat(this.namesWomen)).toLowerCase(); - const lastName = this.randomElement(this.lastNames).toLowerCase(); - const email = firstName + '.' + lastName + '@example.com'; - const username = firstName + '.' + lastName + this.randomInt(1, 99); - return { - id: this.generateId(), - username: username, - email: email, - subscribed: this.randomBoolean() - }; - } - - createUser(): User { - let imagePath: string = ""; - let firstName: string = ""; - const gender = this.randomInt(0, 1); - if (gender === 0) { - imagePath = "https://dl.infragistics.com/x/img/people/men/" + this.randomInt(10, 40) + ".png"; - firstName = this.randomElement(this.namesMen); - } else { - imagePath = "https://dl.infragistics.com/x/img/people/women/" + this.randomInt(10, 40) + ".png"; - firstName = this.randomElement(this.namesWomen); - } - const lastName = this.randomElement(this.lastNames); - const email = firstName.toLowerCase() + '.' + lastName.toLowerCase() + '@example.com'; - - return { - id: this.generateId(), - firstName, - lastName, - age: this.randomInt(18, 90), - email, - avatar: imagePath, - active: this.randomBoolean(), - priority: this.randomElement(this.priorities), - employmentType: this.randomElement(this.employmentTypes), - department: this.randomElement(this.departments), - satisfaction: this.randomInt(0, 5), - registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000)) - }; - } - - generateUsers(count: number): User[] { - return Array.from({ length: count }, () => this.createUser()); - } - - generateProducts(count: number): ProductInfo[] { - return Array.from({ length: count }, () => this.createProductInfo()); - } - - generateSimpleUsers(count: number): UserSimple[] { - return Array.from({ length: count }, () => this.createUserSimple()); - } + name: string; + country: string; } + +export const Cities: City[] = [ + { name: "London", id: "UK01", country: "UK" }, + { name: "Manchester", id: "UK02", country: "UK" }, + { name: "Birmingham", id: "UK03", country: "UK" }, + { name: "Glasgow", id: "UK04", country: "UK" }, + { name: "Liverpool", id: "UK05", country: "UK" }, + { name: "New York", id: "US01", country: "USA" }, + { name: "Miami", id: "US02", country: "USA" }, + { name: "Philadelphia", id: "US03", country: "USA" }, + { name: "Chicago", id: "US04", country: "USA" }, + { name: "Springfield", id: "US05", country: "USA" }, + { name: "Los Angeles", id: "US06", country: "USA" }, + { name: "Houston", id: "US07", country: "USA" }, + { name: "Phoenix", id: "US08", country: "USA" }, + { name: "San Diego", id: "US09", country: "USA" }, + { name: "Dallas", id: "US010", country: "USA" }, + { name: "Sofia", id: "BG01", country: "Bulgaria" }, + { name: "Plovdiv", id: "BG02", country: "Bulgaria" }, + { name: "Varna", id: "BG03", country: "Bulgaria" }, + { name: "Burgas", id: "BG04", country: "Bulgaria" }, + { name: "Rome", id: "IT01", country: "Italy" }, + { name: "Milan", id: "IT02", country: "Italy" }, + { name: "Naples", id: "IT03", country: "Italy" }, + { name: "Turin", id: "IT04", country: "Italy" }, + { name: "Palermo", id: "IT05", country: "Italy" }, + { name: "Florence", id: "IT06", country: "Italy" }, +]; ``` ```css -.grid-lite-wrapper { - width: 100%; - height: 100%; +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.button-container { + display: flex; + margin-top: 16px; + gap: 8px; } +``` +```tsx +import React, { useRef } from "react"; +import ReactDOM from "react-dom/client"; +import { IgrCombo, IgrButton } from "igniteui-react"; +import "./index.css"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { Cities } from "./ComboData"; + +export default function ComboSelection() { + const comboRef = useRef(null); + + const selectCities = () => { + comboRef.current.select(["UK01", "UK02", "UK03", "UK04", "UK05"]); + }; -igc-grid-lite { - min-height: 75vh; - --ig-size: 1; + const deselectCities = () => { + comboRef.current.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]); + }; + + const selectAll = () => { + comboRef.current.select([]); + }; + + const deselectAll = () => { + comboRef.current.deselect([]); + }; + + return ( +
+ +
+ + Select UK Cities + + + Deselect UK Favorites + + + Select All + + + Deselect All + +
+
+ ); } -/* Badge spacing tokens are scale multipliers; 2.6667 = 0.5rem target inline padding / 0.1875rem base spacing unit. */ -.badge-padded { - --ig-spacing-inline: 2.6667; +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); +``` + +### Validation + +The Ignite UI for React Combo component supports most of the [`IgrInput`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html) properties, such as [`required`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#required), [`disabled`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#disabled), [`autofocus`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html#autofocus), [`invalid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#invalid), etc. The component also exposes two methods bound to its validation: + +- [`reportValidity`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#reportValidity) - checks for validity and returns true if the component satisfies the validation constraints. +- [`checkValidity`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html#checkValidity) - a wrapper around reportValidity to comply with the native input API. + +## Keyboard Navigation + +When the combo component is focused and the list of options is **not visible**: + +- Open the list of options using Down/Alt + Down keys. + +When the combo component is focused and the list of options is **visible**: + +- Using the Down key will activate the next item in the list. +- Using the Up key will activate the previous item in the list. If the first item is already active it will focus the input. +- Using the HOME or END keys will activate the first or the last item in the list. +- Using the SPACE key will select the active item. +- Using the ENTER key will select the active item and close the list of options. +- Using the ESC or TAB/SHIFT + TAB keys will close the list of options. + +## Styling + +You can change the appearance of the [`IgrCombo`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html) component and its items, by using the exposed CSS parts listed below: + +| Part name | Description | +| -------------------- | ------------------------------------------------------------------------------- | +| `label` | The encapsulated text label. | +| `input` | The main input field. | +| `native-input` | The native input of the main input field. | +| `prefix` | The prefix wrapper. | +| `suffix` | The suffix wrapper. | +| `toggle-icon` | The toggle icon wrapper. | +| `clear-icon` | The clear icon wrapper. | +| `case-icon` | A case-icon wrapper that renders content inside the suffix of the filter-input. | +| `helper-text` | The helper text wrapper. | +| `search-input` | The search input field. | +| `list-wrapper` | The list of options wrapper. | +| `list` | The list of options box. | +| `item` | Represents each item in the list of options. | +| `group-header` | Represents each header in the list of options. | +| `active` | Appended to the item parts list when the item is active. | +| `selected` | Appended to the item parts list when the item is selected. | +| `checkbox` | Represents each checkbox of each list item. | +| `checkbox-indicator` | Represents the checkbox indicator of each list item. | +| `checked` | Appended to checkbox parts list when checkbox is checked. | +| `header` | The container holding the header content. | +| `footer` | The container holding the footer content. | +| `empty` | The container holding the empty content. | + +Using the CSS parts we have full control over the Combo styling. + +```css +igc-combo::part(search-input) { + background-color: var(--ig-gray-100); + border-radius: 2px; } -.badge-padded::part(base) { - padding-block: 0.125rem; - color: var(--ig-gray-900) !important; +igc-combo::part(input) { + background-color: var(--ig-gray-100); } -/* Use lighter variant shades across both department (filled) and employment (outlined) badges. */ -.badge-padded[variant="success"] { - --ig-badge-border-color: var(--ig-success-300); +igc-combo::part(prefix) { + background-color: var(--ig-secondary-50); + color: var(--ig-primary-500); } -.badge-padded[variant="warning"] { - --ig-badge-border-color: var(--ig-warn-300); +igc-combo::part(toggle-icon) { + color: var(--ig-primary-500); } +``` -.badge-padded[variant="primary"] { - --ig-badge-border-color: var(--ig-primary-300); +```typescript +interface City { + id: string; + name: string; + country: string; } -.badge-padded[variant="danger"] { - --ig-badge-border-color: var(--ig-error-300); +export const Cities: City[] = [ + { name: "London", id: "UK01", country: "UK" }, + { name: "Manchester", id: "UK02", country: "UK" }, + { name: "Birmingham", id: "UK03", country: "UK" }, + { name: "Glasgow", id: "UK04", country: "UK" }, + { name: "Liverpool", id: "UK05", country: "UK" }, + { name: "New York", id: "US01", country: "USA" }, + { name: "Miami", id: "US02", country: "USA" }, + { name: "Philadelphia", id: "US03", country: "USA" }, + { name: "Chicago", id: "US04", country: "USA" }, + { name: "Springfield", id: "US05", country: "USA" }, + { name: "Los Angeles", id: "US06", country: "USA" }, + { name: "Houston", id: "US07", country: "USA" }, + { name: "Phoenix", id: "US08", country: "USA" }, + { name: "San Diego", id: "US09", country: "USA" }, + { name: "Dallas", id: "US010", country: "USA" }, + { name: "Sofia", id: "BG01", country: "Bulgaria" }, + { name: "Plovdiv", id: "BG02", country: "Bulgaria" }, + { name: "Varna", id: "BG03", country: "Bulgaria" }, + { name: "Burgas", id: "BG04", country: "Bulgaria" }, + { name: "Rome", id: "IT01", country: "Italy" }, + { name: "Milan", id: "IT02", country: "Italy" }, + { name: "Naples", id: "IT03", country: "Italy" }, + { name: "Turin", id: "IT04", country: "Italy" }, + { name: "Palermo", id: "IT05", country: "Italy" }, + { name: "Florence", id: "IT06", country: "Italy" }, +]; +``` +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-combo::part(label), +igc-combo::part(empty), +igc-combo::part(group-header) { + color: #2b3a55; } -/* Force lighter fills for department (filled) badges. */ -.badge-padded.badge-department[variant="success"]::part(base) { - background: var(--ig-success-300) !important; +igc-combo::part(native-input), +igc-combo::part(list-wrapper) { + background-color: #f2e5e5; } -.badge-padded.badge-department[variant="warning"]::part(base) { - background: var(--ig-warn-300) !important; +igc-combo::part(item selected) { + background: #e8c4c4; } -.badge-padded.badge-department[variant="primary"]::part(base) { - background: var(--ig-primary-300) !important; +igc-combo::part(item selected active), +igc-combo::part(item selected):hover { + background: #ce7777; } -.badge-padded.badge-department[variant="danger"]::part(base) { - background: var(--ig-error-300) !important; +igc-combo::part(prefix), +igc-combo::part(suffix), +igc-combo::part(case-icon) { + color: #f2e5e5; + background-color: #2b3a55; } -/* Employment badges are outline-only. */ -.badge-employment::part(base) { - background: transparent !important; - box-shadow: inset 0 0 0 0.125rem var(--ig-badge-border-color) !important; +igc-combo::part(checkbox checked)::after { + background: #2b3a55; + box-shadow: none; } ``` ```tsx import React, { useEffect } from "react"; import ReactDOM from "react-dom/client"; -import { GridLiteDataService, User } from "./GridLiteDataService"; +import { IgrCombo, IgrIcon, registerIconFromText } from "igniteui-react"; import "./index.css"; -import { - IgrAvatar, - IgrBadge, - IgrRating, - type StyleVariant, -} from "igniteui-react"; -import { - IgrGridLite, - IgrGridLiteColumn, - type IgrCellContext, -} from "igniteui-react/grid-lite"; - import "igniteui-webcomponents/themes/light/bootstrap.css"; -import "./index.css"; +import { Cities } from "./ComboData"; -const avatarCellTemplate = (ctx: IgrCellContext) => ( - -); - -const satisfactionCellTemplate = (ctx: IgrCellContext) => ( - -); - -const getDepartmentBadgeVariant = (value: string): StyleVariant => { - switch (value) { - case "Engineering": - return "primary"; - case "Marketing": - return "warning"; - case "Sales": - return "danger"; - case "Finance": - return "success"; - default: - return "primary"; - } -}; - -const getEmploymentTypeOutline = (value: string): StyleVariant => { - switch (value) { - case "Full-Time": - return "success"; - case "Part-Time": - return "warning"; - case "Contract": - return "primary"; - default: - return "primary"; - } -}; - -const employmentTypeCellTemplate = (ctx: IgrCellContext) => ( - - {ctx.value} - -); - -const departmentCellTemplate = (ctx: IgrCellContext) => ( - - {ctx.value} - -); - -const registeredAtCellTemplate = (ctx: IgrCellContext) => ( - {ctx.value.toLocaleString()} -); - -export default function Sample() { - const [data, setData] = React.useState([]); +const placeSvg = + ''; + +export default function ComboStyling() { useEffect(() => { - const dataService = new GridLiteDataService(); - const data: User[] = dataService.generateUsers(1000); - setData(data); + registerIconFromText("place", placeSvg, "material"); }, []); return ( -
-
- - - - - - - - - - -
+
+ + Choose the desired place + + + +
); } -// rendering above component in the React DOM +// rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById("root")); -root.render(); +root.render(); ``` +## API Reference -Grid Lite is designed to give you the core features that you need to deliver a beautiful data grid / data table experience in your apps. Designed for performance and beauty, the Grid Lite will work in any framework, on any platform. - -## Performance Built In - -Row-level virtualization allows you to render unlimited amounts of data with smooth scrolling. - -## Automatic Column Types - -Column types are automatically generated based on your data source, with built-in filtering tailored to each column type. - -## Interactive Features - -All the core interactive features your users expect: column filtering, column hiding, column resizing, column sorting, and more. - -## Beautiful UX & Branding - -Built-in theme support for Bootstrap, Material & Fluent, plus endless branding options in color palettes, fonts, elevation, display density & more. - -## Rich Keyboard Navigation - -Full Excel-style keyboard navigation gives users the experience they expect, with high performance even on large datasets. - -## Is Grid Lite a Free & Open-Source React Data Grid? - -Yes. Ignite UI Grid Lite is a free, open-source React data grid released under the MIT license. You can use it in commercial or personal projects with no licensing fees. It is part of our initiative to make Ignite UI more open, transparent, and accessible. - -- MIT-licensed - -- Free for commercial use - -- Community-driven development +- [`IgrCombo`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html) +- [`Styling & Themes`](../../themes/overview.md) -- No feature gating +## Additional Resources -However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free React data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster. +- [Ignite UI for React **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-react) +- [Ignite UI for React **GitHub**](https://github.com/IgniteUI/igniteui-react) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pie-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pie-chart.md index 82609adbf..ed615f0a8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pie-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pie-chart.md @@ -129,7 +129,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Pie Chart Recommendations @@ -177,9 +176,9 @@ Do Not Use Pie Chart When: Legends are used to show information about each point, to know about its contribution towards the total sum. You can collapse the point using legend click. -In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`IgrLegend`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrlegend.html) property. The [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#legendLabelMemberPath) can then be used to specify which property on your data model it will use to display inside the legend for each pie slice. +In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`IgrLegend`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrlegend.html) property. The [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#legendLabelMemberPath) can then be used to specify which property on your data model it will use to display inside the legend for each pie slice. -Additionally you can use the [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#legendItemTemplate) and [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#legendItemBadgeTemplate) properties and the various font properties on ItemLegend to further customize the look of the legend items. +Additionally you can use the [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#legendItemTemplate) and [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#legendItemBadgeTemplate) properties and the various font properties on ItemLegend to further customize the look of the legend items. ```typescript export class EnergyGlobalDemandItem { @@ -295,16 +294,15 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Pie Chart Others Category Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice -In the sample below, the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#othersCategoryThreshold) is set to 2, and [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#othersCategoryType) is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category. +In the sample below, the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#othersCategoryThreshold) is set to 2, and [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#othersCategoryType) is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category. -If you set [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#othersCategoryType) to Percent, then [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#othersCategoryThreshold) will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#othersCategoryType) is most appropriate for your application. +If you set [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#othersCategoryType) to Percent, then [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#othersCategoryThreshold) will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#othersCategoryType) is most appropriate for your application. ```typescript export class EnergyGlobalDemandItem { @@ -423,7 +421,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Pie Chart Explosion @@ -524,14 +521,13 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Pie Chart Selection -The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the [`selectedItems`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#selectedItems) property. The selected slices are then highlighted. +The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the [`selectedItems`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#selectedItems) property. The selected slices are then highlighted. -There is a property called [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#selectionMode) which is how you set what mode you want the pie chart to use. The default value is `Single`. In order to disable selection, set the property to `Manual`. +There is a property called [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#selectionMode) which is how you set what mode you want the pie chart to use. The default value is `Single`. In order to disable selection, set the property to `Manual`. The pie chart supports three different selection modes. @@ -644,7 +640,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Pie Chart Animation @@ -765,7 +760,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Pie Chart Styling @@ -888,7 +882,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Radial Pie Chart @@ -1049,7 +1042,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources @@ -1062,12 +1054,12 @@ root.render(); The following table lists API members mentioned in the above sections: -- [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#legendItemBadgeTemplate) -- [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#legendItemTemplate) -- [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#legendLabelMemberPath) -- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#othersCategoryThreshold) -- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#othersCategoryType) -- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechartbase.html#selectionMode) +- [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#legendItemBadgeTemplate) +- [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#legendItemTemplate) +- [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#legendLabelMemberPath) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpiechart.html#selectionMode) |Chart Type | Control Name | API Members | |-----------------|----------------|------------ | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-features.md index 94abfd042..aa47e0d0d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-features.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-features.md @@ -219,7 +219,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Dimensions Sorting Dimension values in the `rows` or `columns` can be sorted via the related chip or the API. This functionality is embedded and enabled by default. @@ -241,7 +240,7 @@ const dimension: IgrPivotDimension = { Row dimensions can be resized similarly to column resizing - via a resizing indicator that can be found on the right edge of the cells. They can also be auto-sized by double clicking the resize indicator, or by using the related API - [`autoSizeRowDimension`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrpivotgrid.html#autoSizeRowDimension). -A different size can also be set initially with the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) property available in the dimension definition: +A different size can also be set initially with the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrid.html#width) property available in the dimension definition: ```tsx const igrPivotDimension2: IgrPivotDimension = { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-overview.md index 6ec9815c4..b2e0d7784 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-overview.md @@ -158,7 +158,6 @@ export const SALES_DATA_NEW = ]; ``` - ## Getting Started With React Pivot Grid The React IgrPivotGrid can be configured via the [`pivotConfiguration`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrpivotgrid.html#pivotConfiguration) property. @@ -560,7 +559,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Auto generate configuration The [`autoGenerateConfig`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrpivotgrid.html#autoGenerateConfig) property automatically generates dimensions and values based on the data source fields: @@ -629,7 +627,7 @@ The default values are: |Limitation|Description| |--- |--- | -| Setting columns declaratively is not supported. | The Pivot grid generates its columns based on the [`columns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columns) configuration, so setting them declaratively, like in the base grid, is not supported. Such columns are disregarded. | +| Setting columns declaratively is not supported. | The Pivot grid generates its columns based on the [`columns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrpivotgrid.html#columns) configuration, so setting them declaratively, like in the base grid, is not supported. Such columns are disregarded. | | Setting duplicate [`memberName`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrpivotdimension.html#memberName) or [`member`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrpivotvalue.html#member) property values for dimensions/values. | These properties should be unique for each dimension/value. Duplication may result in loss of data from the final result. | | Row Selection is only supported in **Single** mode. | Multiple selection is currently not supported. | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-state-persistence.md index 9e4e529db..18019c627 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/pivot-grid-state-persistence.md @@ -609,7 +609,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/point-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/point-chart.md index c7cf0d85b..beb06ac9f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/point-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/point-chart.md @@ -134,7 +134,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Point Chart with Single Series @@ -244,7 +243,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Point Chart with Multiple Series @@ -368,7 +366,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Point Chart Styling @@ -496,7 +493,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Advanced Types of Point Charts diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/polar-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/polar-chart.md index d76d8212c..45a1e9e55 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/polar-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/polar-chart.md @@ -178,7 +178,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Polar Spline Area Chart @@ -331,7 +330,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Polar Marker Chart @@ -480,7 +478,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Polar Line Chart @@ -646,7 +643,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Polar Spline Chart @@ -797,7 +793,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Polar Chart Styling @@ -966,7 +961,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources @@ -992,7 +986,7 @@ The following table lists API members mentioned in the above sections: - [`IgrPolarSplineAreaSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpolarsplineareaseries.html) - [`IgrPolarScatterSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpolarscatterseries.html) - `ItemsSource` -- [`angleMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpolarbase.html#angleMemberPath) -- [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpolarbase.html#radiusMemberPath) +- [`angleMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpolarareaseries.html#angleMemberPath) +- [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrpolarareaseries.html#radiusMemberPath) - [`IgrNumericAngleAxis`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrnumericangleaxis.html) - [`IgrNumericRadiusAxis`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrnumericradiusaxis.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/query-builder.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/query-builder.md index 3ca851154..f26bd5a4b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/query-builder.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/query-builder.md @@ -237,7 +237,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - # Getting started with React Query Builder To start using the `QueryBuilder`, first, you need to install the `Ignite UI for React` package by running the following command: @@ -1101,7 +1100,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API Reference - `QueryBuilder` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radial-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radial-chart.md index 529e4eb7f..b6df46763 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radial-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radial-chart.md @@ -173,7 +173,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Radial Column Chart @@ -334,7 +333,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Radial Line Chart @@ -497,7 +495,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Radial Pie Chart @@ -658,7 +655,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Radial Chart Styling @@ -821,7 +817,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Radial Chart Settings @@ -852,6 +847,6 @@ The following table lists API members mentioned in the above sections: - `ItemsSource` - `AngleAxisName` - `ValueAxisName` -- [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igranchoredradialseries.html#valueMemberPath) +- [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrradiallineseries.html#valueMemberPath) - [`IgrCategoryAngleAxis`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrcategoryangleaxis.html) - [`IgrNumericRadiusAxis`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrnumericradiusaxis.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radial-gauge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radial-gauge.md index 43b423e9d..dc931bf2d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radial-gauge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radial-gauge.md @@ -390,7 +390,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Dependencies @@ -510,7 +509,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Scale The scale is visual element that highlights full range of values in the gauge which can be created by supplying [`minimumValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#minimumValue) and [`maximumValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#maximumValue) values. Together with backing, it defines overall shape of gauge. The [`scaleStartAngle`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#scaleStartAngle) and [`scaleEndAngle`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#scaleEndAngle) properties define bounds of arc of the scale. While, the [`scaleSweepDirection`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#scaleSweepDirection) property specifies whether the scale sweeps in clockwise or counter-clockwise direction. You can customize appearance of the scale by setting [`scaleBrush`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#scaleBrush), [`scaleStartExtent`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#scaleStartExtent), and [`scaleEndExtent`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#scaleEndExtent) properties. @@ -574,7 +572,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Labels and Titles The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the [`minimumValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#minimumValue) and [`maximumValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#maximumValue) properties. You can position labels by setting the [`labelExtent`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#labelExtent) property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as [`fontBrush`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#fontBrush) and [`font`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#font). @@ -632,7 +629,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Title & Subtitle [`titleText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#titleText) and [`subtitleText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#subtitleText) properties are available and can both be used to display custom text for the needle. Alternatively, [`titleDisplaysValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#titleDisplaysValue) and [`subtitleDisplaysValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#subtitleDisplaysValue), when set to true, will let display the needle's value and override [`titleText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#titleText) and [`subtitleText`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#subtitleText). So you can occupy custom text for the title but show the value via the subtitle and vice versa. @@ -730,7 +726,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Tick Marks Tick marks are thin lines radiating from the center of the radial gauge. There are two types of tick marks: major and minor. Major tick marks are displayed at the [`interval`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#interval) between the [`minimumValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#minimumValue) and [`maximumValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#maximumValue) properties. Use the [`minorTickCount`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#minorTickCount) property to specify the number of minor tick marks displayed between each major tick mark. You can control the length of tick marks by setting a fraction (between 0 and 1) to [`tickStartExtent`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#tickStartExtent), [`tickEndExtent`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#tickEndExtent), [`minorTickStartExtent`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#minorTickStartExtent), and [`minorTickEndExtent`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#minorTickEndExtent) properties. @@ -796,7 +791,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Ranges A range highlights a set of continuous values bound by a specified [`minimumValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#minimumValue) and [`maximumValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#maximumValue) properties. You can add multiple ranges to the radial gauge by specifying their starting and ending values. Each range has a few customization properties such as [`brush`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgaugerange.html#brush) and [`outline`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgaugerange.html#outline). Alternatively, you can set [`rangeBrushes`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#rangeBrushes) and [`rangeOutlines`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#rangeOutlines) properties to a list of colors for the ranges. @@ -866,7 +860,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Needle Radial gauge needles are visual elements used to signify a gauge set value. Needles are available in one of the several predefined shapes. The needle can have a pivot shape, which is placed in the center of the gauge. The pivot shape also takes one of the predefined shapes. Pivot shapes that include an overlay or an underlay can have a separate pivot brush applied to the shape. @@ -946,7 +939,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Highlight Needle The radial gauge can be modified to show a second needle. This will make the main needle's [`value`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#value) appear with a lower opacity. To enable this first set [`highlightValueDisplayMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#highlightValueDisplayMode) to Overlay and then apply a [`highlightValue`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_gauges.igrradialgauge.html#highlightValue). @@ -1008,7 +1000,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the radial gauge with all features and visuals enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radio.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radio.md index 7fda9b0b8..e4d3c2c1f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radio.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/radio.md @@ -51,7 +51,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
### Usage @@ -158,7 +157,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Checked You can use the `checked` attribute to toggle on the radio. @@ -210,7 +208,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Invalid You can use the `invalid` attribute to mark the radio as invalid. @@ -252,7 +249,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Disabled You can use the `disabled` attribute to disable the radio. @@ -304,7 +300,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Group Alignment The [`IgrRadioGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrradiogroup.html) allows you to easily change the placement directionality of the radio buttons it contains using the `alignment` attribute. Allowed values are `vertical`(default) and `horizontal`. @@ -356,7 +351,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Forms You can use the `name` and `value` attributes when using the radio with `Form`. @@ -439,7 +433,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/rating.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/rating.md index bd35d1316..2a05f8d24 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/rating.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/rating.md @@ -45,7 +45,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - First, you need to the install the corresponding Ignite UI for React npm package by running the following command: ```cmd @@ -151,7 +150,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - > The number of rating symbols between the opening and closing brackets of the rating component determines the max value. ## Single Selection @@ -235,7 +233,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - > Keep in mind that the `step` attribute doesn't work with single selection mode. ## Empty & Selected @@ -306,7 +303,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Configuration ### Single @@ -448,7 +444,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API Reference - [`IgrRating`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrrating.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/ripple.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/ripple.md index f4f6eaf31..01272da04 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/ripple.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/ripple.md @@ -41,7 +41,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage First, you need to the install the corresponding Ignite UI for React npm package by running the following command: @@ -112,7 +111,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrButton`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbutton.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/scatter-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/scatter-chart.md index 77d1128c5..c07abae30 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/scatter-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/scatter-chart.md @@ -205,7 +205,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Scatter Line Chart @@ -407,7 +406,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Scatter Spline Chart @@ -609,7 +607,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Scatter High Density Chart @@ -755,7 +752,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Scatter Area Chart @@ -892,7 +888,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Scatter Contour Chart @@ -1030,7 +1025,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/select.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/select.md index ae0ebc8c3..5ac9b9a35 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/select.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/select.md @@ -42,7 +42,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` -
## Usage @@ -149,7 +148,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ### Header You can use the [`IgrSelectHeader`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrselectheader.html) to provide a header for a group of items. @@ -187,7 +185,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ```tsx @@ -328,7 +325,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ```tsx @@ -559,7 +555,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## API Reference - [`IgrSelect`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrselect.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/shape-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/shape-chart.md index 7316da6c3..e8d279b01 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/shape-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/shape-chart.md @@ -170,7 +170,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Scatter Polyline Chart @@ -329,7 +328,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources @@ -348,7 +346,7 @@ The following table lists API members mentioned in the above sections: - [`IgrScatterPolygonSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrscatterpolygonseries.html) - [`IgrScatterPolylineSeries`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrscatterpolylineseries.html) - `ItemsSource` -- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrshapeseriesbase.html#shapeMemberPath) +- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrscatterpolygonseries.html#shapeMemberPath) - [`IgrNumericXAxis`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrnumericxaxis.html) - [`IgrNumericYAxis`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrnumericyaxis.html) - `YAxisName` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/single-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/single-selection.md index 1b4b54a8b..c59bf6a0d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/single-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/single-selection.md @@ -110,7 +110,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` -
## Selection API diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/skills.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/skills.md index 747fb3604..7e4bb4df3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/skills.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/skills.md @@ -4,9 +4,12 @@ _description: Learn how to use Agent Skills to supercharge AI-assisted developme _keywords: Ignite UI for React, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie _license: MIT mentionedTypes: [] +last_updated: "2026-04-24" _tocName: Agent Skills --- + + # Ignite UI for React Agent Skills Ignite UI for React ships with **[Agent Skills](https://agentskills.io/)** - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for React. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. @@ -22,7 +25,8 @@ The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-rea |:------|:-----|:------------| | Components | [`skills/igniteui-react-components/SKILL.md`](https://github.com/IgniteUI/igniteui-react/blob/master/skills/igniteui-react-components/SKILL.md) | Identify the right components, install, import, and use them - JSX patterns, event handling, refs, forms, TypeScript | | Theming & Styling | [`skills/igniteui-react-customize-theme/SKILL.md`](https://github.com/IgniteUI/igniteui-react/blob/master/skills/igniteui-react-customize-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | -| Optimization | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`](https://github.com/IgniteUI/igniteui-react/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size +| Optimization | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`](https://github.com/IgniteUI/igniteui-react/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size | +| Generate From Image Design | [`skills/igniteui-react-generate-from-image-design/SKILL.md`](https://github.com/IgniteUI/igniteui-react/blob/master/skills/igniteui-react-generate-from-image-design/SKILL.md) | Build React apps from screenshots, mockups, and wireframes using Ignite UI components | ## Skill Locations @@ -41,6 +45,8 @@ The `.agents/skills/` directory is a cross-agent convention supported by multipl SKILL.md igniteui-react-optimize-bundle-size/ SKILL.md + igniteui-react-generate-from-image-design/ + SKILL.md ``` For user-level (global) skills available across all projects, use `~/.agents/skills/` instead. @@ -54,7 +60,7 @@ For user-level (global) skills available across all projects, use `~/.agents/ski | Project | `.github/skills/`, `.claude/skills/` | | Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | -> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. +> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. ### Claude @@ -109,7 +115,40 @@ For user-level (global) skills available across all projects, use `~/.agents/ski Use one of the options below to download and place the skill files into the appropriate [skill location](#skill-locations) for your AI assistant. -### **Option A - Use the installed npm package** +### **Option A - Use the Ignite UI CLI** + +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files — all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below. + +```bash +ig ai-config --assistants generic --agents claude +``` + +Use `--agents` with multiple values to target several agents at once: + +```bash +ig ai-config --assistants generic vscode --agents claude copilot cursor +``` + +| Flag | Values | Default | +|------|--------|---------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively | + +### **Option B - Use the `GitHub CLI`** + +The GitHub CLI can be used to download skill files directly from the Ignite UI for React repository. Run the following commands in your project root to start the installation process: + +```bash +gh skill install IgniteUI/igniteui-react +``` + +You will be asked to select which skills to install and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents. + +To update skills later, run the following command: + +```bash +gh skill update IgniteUI/igniteui-react +``` If Ignite UI for React is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: @@ -133,6 +172,7 @@ Or copy individual skill directories as needed: cp -r node_modules/igniteui-react/skills/igniteui-react-components .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-customize-theme .agents/skills/ cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .agents/skills/ +cp -r node_modules/igniteui-react/skills/igniteui-react-generate-from-image-design .agents/skills/ ``` **Windows (Command Prompt)** @@ -141,9 +181,10 @@ cp -r node_modules/igniteui-react/skills/igniteui-react-optimize-bundle-size .ag robocopy node_modules\igniteui-react\skills\igniteui-react-components .agents\skills\igniteui-react-components /E robocopy node_modules\igniteui-react\skills\igniteui-react-customize-theme .agents\skills\igniteui-react-customize-theme /E robocopy node_modules\igniteui-react\skills\igniteui-react-optimize-bundle-size .agents\skills\igniteui-react-optimize-bundle-size /E +robocopy node_modules\igniteui-react\skills\igniteui-react-generate-from-image-design .agents\skills\igniteui-react-generate-from-image-design /E ``` -### **Option B - Use the `gemini skills` CLI** +### **Option C - Use the `gemini skills` CLI** The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: @@ -156,6 +197,7 @@ The `gemini skills install` command installs skills directly from a Git reposito gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-components gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-customize-theme gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-optimize-bundle-size +gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-generate-from-image-design ``` **Install to workspace scope:** @@ -164,15 +206,16 @@ gemini skills install https://github.com/IgniteUI/igniteui-react.git --path skil gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-components gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-customize-theme gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-optimize-bundle-size +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-react.git --path skills/igniteui-react-generate-from-image-design ``` Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. -### **Option C - Use the `npx skills` CLI** +### **Option D - Use the `npx skills` CLI** The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: -```shell +```bash npx skills add IgniteUI/igniteui-react ``` @@ -200,9 +243,6 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./ - [Getting Started with Ignite UI for React](../general-getting-started.md) - [Ignite UI CLI](../general-cli-overview.md) - - - - [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) - [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/slider.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/slider.md index a8a3c2e19..4ab6d7212 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/slider.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/slider.md @@ -61,7 +61,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage First, you need to the install the corresponding Ignite UI for React npm package by running the following command: @@ -150,12 +149,11 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - -While dragging a slider thumb, it displays its value in a tooltip. You could hide this tooltip using the [`hideTooltip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#hideTooltip) property. +While dragging a slider thumb, it displays its value in a tooltip. You could hide this tooltip using the [`hideTooltip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#hideTooltip) property. ### Disabled -You can use the [`disabled`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#disabled) property of the sliders to disable their user interactions. +You can use the [`disabled`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#disabled) property of the sliders to disable their user interactions. ```css igc-slider { @@ -188,10 +186,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Constraints -The track of the sliders has a minimum and maximum values which are configured using the [`min`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html#min) and [`max`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html#max) properties. Additionally, you can restrict the thumb dragging using the [`lowerBound`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#lowerBound) and [`upperBound`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#upperBound) properties. +The track of the sliders has a minimum and maximum values which are configured using the [`min`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html#min) and [`max`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html#max) properties. Additionally, you can restrict the thumb dragging using the [`lowerBound`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#lowerBound) and [`upperBound`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#upperBound) properties. ```css igc-slider { @@ -224,10 +221,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Step -The [`step`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html#step) property specifies the granularity of the slider that the value must adhere to. By default, the slider track looks continuous. Setting the [`discreteTrack`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#discreteTrack) property of the slider to **true** will make it to display the steps on the track. +The [`step`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html#step) property specifies the granularity of the slider that the value must adhere to. By default, the slider track looks continuous. Setting the [`discreteTrack`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#discreteTrack) property of the slider to **true** will make it to display the steps on the track. ```css igc-slider { @@ -260,12 +256,11 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - -If the [`step`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html#step) property is set to `0`, no stepping is implied and any value in the slider range is allowed. In this case, the slider will look continuous even if [`discreteTrack`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#discreteTrack) is set to **true**. +If the [`step`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html#step) property is set to `0`, no stepping is implied and any value in the slider range is allowed. In this case, the slider will look continuous even if [`discreteTrack`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#discreteTrack) is set to **true**. ### Tick Marks -The slider components could display tick marks and labels. The slider components support two types of tick marks: primary and secondary. In order to display the primary tick marks, you should set the [`primaryTicks`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#primaryTicks) property to a value greater than `1`. The number of primary ticks will be evenly distributed on the track. In order to display the secondary tick marks, you should set the [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#secondaryTicks) property to a value greater than `0`. The value of [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#secondaryTicks) specifies the number of secondary ticks between every two primary ticks. +The slider components could display tick marks and labels. The slider components support two types of tick marks: primary and secondary. In order to display the primary tick marks, you should set the [`primaryTicks`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#primaryTicks) property to a value greater than `1`. The number of primary ticks will be evenly distributed on the track. In order to display the secondary tick marks, you should set the [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#secondaryTicks) property to a value greater than `0`. The value of [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#secondaryTicks) specifies the number of secondary ticks between every two primary ticks. ```css /* shared styles are loaded from: */ @@ -294,10 +289,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` +Additionally, you could configure the orientation of the tick marks using the [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#tickOrientation) property. By default, the [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#tickOrientation) value is `end` which displays the ticks below the slider track. You could set it to `start` which displays them above the track and `mirror` which mirrors the ticks above and below the track. -Additionally, you could configure the orientation of the tick marks using the [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#tickOrientation) property. By default, the [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#tickOrientation) value is `end` which displays the ticks below the slider track. You could set it to `start` which displays them above the track and `mirror` which mirrors the ticks above and below the track. - -By default, the tick marks display labels with their values. You could modify the rotation of the tick labels using the `SliderTickLabelRotation` property. Additionally, you could hide the labels of the primary and secondary ticks using the [`hidePrimaryLabels`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#hidePrimaryLabels) and [`hideSecondaryLabels`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#hideSecondaryLabels) properties. +By default, the tick marks display labels with their values. You could modify the rotation of the tick labels using the `SliderTickLabelRotation` property. Additionally, you could hide the labels of the primary and secondary ticks using the [`hidePrimaryLabels`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#hidePrimaryLabels) and [`hideSecondaryLabels`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#hideSecondaryLabels) properties. ```css /* shared styles are loaded from: */ @@ -330,10 +324,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Value Format -If you want to format the thumb and tick label values, the slider provides [`valueFormat`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#valueFormat), [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#valueFormatOptions) and [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#locale) properties. Тhe [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#valueFormatOptions) allows you to specify the number of fraction and significant digits, style (decimal, currency, percent, unit), notation and others taking into account the specified [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#locale). The [`valueFormat`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#valueFormat) is a string which may contain the `{0}` identifier which will be replaced by the value with applied format options. +If you want to format the thumb and tick label values, the slider provides [`valueFormat`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#valueFormat), [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#valueFormatOptions) and [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#locale) properties. Тhe [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#valueFormatOptions) allows you to specify the number of fraction and significant digits, style (decimal, currency, percent, unit), notation and others taking into account the specified [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#locale). The [`valueFormat`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#valueFormat) is a string which may contain the `{0}` identifier which will be replaced by the value with applied format options. ```css /* shared styles are loaded from: */ @@ -376,10 +369,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Labels -In some cases you would want to format the values of the slider as string values i.e. map the values **\[0, 1, 2]** to **\['Low', 'Medium', 'High']**. For this scenario the slider allows you to define [`IgrSliderLabel`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderlabel.html) elements inside it. The text content of the slider labels is going to be used for thumb and tick labels. Please note that when slider labels are provided, the [`min`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#min), [`max`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#max) and [`step`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#step) properties are automatically calculated so that they do not allow values that do not map to the provided labels. In the case of 'Low', 'Medium' and 'High' labels, [`min`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#min) is set to `0`, [`max`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#max) is set to `2` and [`step`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#step) is set to `1`. +In some cases you would want to format the values of the slider as string values i.e. map the values **\[0, 1, 2]** to **\['Low', 'Medium', 'High']**. For this scenario the slider allows you to define [`IgrSliderLabel`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderlabel.html) elements inside it. The text content of the slider labels is going to be used for thumb and tick labels. Please note that when slider labels are provided, the [`min`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#min), [`max`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#max) and [`step`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#step) properties are automatically calculated so that they do not allow values that do not map to the provided labels. In the case of 'Low', 'Medium' and 'High' labels, [`min`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#min) is set to `0`, [`max`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#max) is set to `2` and [`step`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#step) is set to `1`. ```css igc-slider { @@ -417,7 +409,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling The [`IgrSlider`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -516,22 +507,21 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References -- [`hidePrimaryLabels`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#hidePrimaryLabels) -- [`hideSecondaryLabels`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#hideSecondaryLabels) -- [`hideTooltip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#hideTooltip) -- [`primaryTicks`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#primaryTicks) +- [`hidePrimaryLabels`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#hidePrimaryLabels) +- [`hideSecondaryLabels`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#hideSecondaryLabels) +- [`hideTooltip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#hideTooltip) +- [`primaryTicks`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#primaryTicks) - [`IgrRangeSlider`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrrangeslider.html) -- [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#secondaryTicks) +- [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#secondaryTicks) - [`IgrSliderLabel`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderlabel.html) - [`IgrSlider`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html) - `SliderTickLabelRotation` -- [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#tickOrientation) -- [`upperBound`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#upperBound) -- [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#valueFormatOptions) -- [`valueFormat`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsliderbase.html#valueFormat) +- [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#tickOrientation) +- [`upperBound`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#upperBound) +- [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#valueFormatOptions) +- [`valueFormat`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrslider.html#valueFormat) - [`Styling & Themes`](../themes/overview.md) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/snackbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/snackbar.md index 0542a0c14..adbb4ea2b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/snackbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/snackbar.md @@ -47,7 +47,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
### Usage @@ -69,7 +68,7 @@ Before using the [`IgrSnackbar`](https://www.infragistics.com/products/ignite-ui For a complete introduction to the Ignite UI for React, read the [**Getting Started**](../general-getting-started.md) topic. -The simplest way to display the snackbar component is to use its [`show`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbasealertlike.html#show) method and call it on a button click. +The simplest way to display the snackbar component is to use its [`show`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html#show) method and call it on a button click. ```tsx @@ -92,7 +91,7 @@ const onShowButtonClicked = () => { ### Display Time -Use the [`displayTime`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbasealertlike.html#displayTime) property to configure how long the snackbar component is visible. By default, it's set to 4000 milliseconds. +Use the [`displayTime`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html#displayTime) property to configure how long the snackbar component is visible. By default, it's set to 4000 milliseconds. ```tsx import React, { useRef } from 'react'; @@ -126,10 +125,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Action Text -By default, the snackbar component is hidden automatically after a period specified by the [`displayTime`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbasealertlike.html#displayTime). You can use [`keepOpen`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbasealertlike.html#keepOpen) property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar [`actionText`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html#actionText) you can display an action button inside the component. +By default, the snackbar component is hidden automatically after a period specified by the [`displayTime`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html#displayTime). You can use [`keepOpen`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html#keepOpen) property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar [`actionText`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html#actionText) you can display an action button inside the component. ```tsx import React, { useRef } from 'react'; @@ -172,7 +170,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling The [`IgrSnackbar`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html) component exposes several CSS parts to give you full control over its styling: @@ -232,15 +229,14 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References - [`actionText`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html#actionText) -- [`displayTime`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbasealertlike.html#displayTime) -- [`keepOpen`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbasealertlike.html#keepOpen) -- [`show`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrbasealertlike.html#show) +- [`displayTime`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html#displayTime) +- [`keepOpen`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html#keepOpen) +- [`show`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html#show) - [`IgrSnackbar`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsnackbar.html) - [`Styling & Themes`](../themes/overview.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/sparkline-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/sparkline-chart.md index 76af1778a..111a1140b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/sparkline-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/sparkline-chart.md @@ -108,7 +108,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
Like this sample? Get access to our complete React toolkit and start building your own apps in minutes. Download it for free. @@ -243,7 +242,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Markers @@ -459,7 +457,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Normal Range @@ -635,7 +632,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Trendlines @@ -783,7 +779,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Unknown Value Interpolation @@ -927,7 +922,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Sparkline in Data Grid @@ -1163,7 +1157,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Additional Resources You can find more information about related chart types in these topics: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spline-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spline-chart.md index e3a2435fc..8c419909c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spline-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spline-chart.md @@ -131,7 +131,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Spline Chart with Single Series @@ -243,7 +242,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Spline Chart with Multiple Series @@ -367,7 +365,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Spline Chart Styling @@ -495,7 +492,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Advanced Types of Spline Charts @@ -686,7 +682,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100% Spline Chart @@ -868,7 +863,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/splitter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/splitter.md new file mode 100644 index 000000000..ada082a0e --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/splitter.md @@ -0,0 +1,402 @@ +--- +title: React Splitter Component | Layout Controls | Infragistics +_description: Use the Ignite UI for React Splitter component to create two resizable panes with horizontal or vertical layouts, collapse and expand behavior, keyboard support, and nested split views. +_keywords: splitter, split panes, resizable panes, web components splitter, React splitter, Ignite UI for React +_license: MIT +mentionedTypes: ["Splitter", "SplitterResizeEventArgs"] +_tocName: Splitter +--- + +# React Splitter Overview + +The Ignite UI for React Splitter provides a resizable split-pane layout that divides content into two areas: `start` and `end`. Users can drag the splitter bar, use keyboard shortcuts, or collapse and expand panes with built-in controls. You can also nest splitters to build complex dashboard-style layouts. + +## React Splitter Example + +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.controls { + display: flex; + flex-wrap: wrap; + gap: 16px; + align-items: center; + padding: 12px 16px; + height: 60px; + box-sizing: border-box; +} + +p { + padding: 0 16px; +} +``` +```tsx +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { + IgrSplitter, + IgrSwitch, + IgrSwitchChangeEventArgs, + SplitterOrientation, +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export interface SplitterOverviewState { + orientation: SplitterOrientation; + disableCollapse: boolean; + disableResize: boolean; + hideDragHandle: boolean; + hideCollapseButtons: boolean; +} + +export default class SplitterOverview extends React.Component { + constructor(props: any) { + super(props); + this.state = { + orientation: 'horizontal', + disableCollapse: false, + disableResize: false, + hideDragHandle: false, + hideCollapseButtons: false, + }; + } + + public render(): JSX.Element { + return ( +
+
+ this.setState({ orientation: e.detail.checked ? 'vertical' : 'horizontal' })}> + Make Splitter Vertical + + this.setState({ disableCollapse: e.detail.checked })}> + Disable Collapse + + this.setState({ disableResize: e.detail.checked })}> + Disable Resize + + this.setState({ hideDragHandle: e.detail.checked })}> + Hide Drag Handle + + this.setState({ hideCollapseButtons: e.detail.checked })}> + Hide Collapse Buttons + +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan. +

+
+
+

+ Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus. +

+
+ +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); +``` + +
+ +## Getting Started with React Splitter + +First, you need to install the corresponding Ignite UI for React npm package by running the following command: + +```cmd +npm install igniteui-react +``` + +You will then need to import the [`IgrSplitter`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html) and its necessary CSS, like so: + +```tsx +import { IgrSplitter } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + +## Using React Splitter + +Use the `start` and `end` slots to place pane content: + +```tsx + +
Start pane content
+
End pane content
+ +``` + +### Orientation + +Set the [`orientation`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#orientation) property to control pane direction: + +- `horizontal` (default): start and end panes are rendered left and right. +- `vertical`: start and end panes are rendered top and bottom. + +```tsx + +
Top pane
+
Bottom pane
+ +``` + +### Pane Size and Constraints + +Use size properties to set initial and constrained pane sizes: + +- [`startSize`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#startSize), [`endSize`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#endSize) +- [`startMinSize`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#startMinSize), [`endMinSize`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#endMinSize) +- [`startMaxSize`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#startMaxSize), [`endMaxSize`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#endMaxSize) + +Values accept CSS length values such as `px` and `%`. + +```tsx + +
Navigation
+
Main content
+ +``` + +### Collapsing and Resizing + +Use these properties to control interactions: + +- [`disableResize`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#disableResize): disables pane resizing. +- [`disableCollapse`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#disableCollapse): disables pane collapsing. +- [`hideDragHandle`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#hideDragHandle): hides the drag handle. +- [`hideCollapseButtons`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#hideCollapseButtons): hides collapse and expand buttons. + +You can also collapse or expand panes programmatically: + +```tsx +import { useRef } from 'react'; + +const splitterRef = useRef(null); + +const toggleStartPane = () => { + splitterRef.current?.toggle('start'); +}; +``` + +### Nested Splitters + +Splitters can be nested to create multi-region layouts. + +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +p { + padding: 0 16px; +} +``` +```tsx +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { + IgrSplitter, +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class SplitterOverview extends React.Component { + constructor(props: any) { + super(props); + } + + public render(): JSX.Element { + return ( +
+ + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan. +

+
+
+

+ Suspendisse potenti. Mauris vehicula neque ullamcorper tortor pulvinar gravida. Integer porttitor orci ex, ac vehicula nisi ultricies vel. Phasellus feugiat, urna eget congue sollicitudin, augue mi vulputate velit, in porttitor lacus orci sit amet eros. Donec mollis tempor mi. Ut sed justo consectetur, laoreet orci id, vestibulum velit. Aliquam ultricies arcu nec placerat eleifend. Integer ornare auctor mauris, vitae placerat est hendrerit ut. +

+
+ + +
+

+ Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus. +

+
+
+

+ Suspendisse potenti. Proin faucibus venenatis purus in pellentesque. Nunc eget justo pretium massa pellentesque sodales. Phasellus orci ligula, condimentum et faucibus id, faucibus sit amet mauris. Praesent consequat cursus mauris, eget tempus lorem. Quisque vel leo nec massa aliquam pellentesque sit amet vel erat. Phasellus at mauris laoreet, egestas magna eget, dignissim nisl. Etiam non nibh nec orci elementum facilisis a vel tortor. Praesent sagittis mattis risus non tincidunt. +

+
+ + +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); +``` + +## Events + +The Splitter emits the following events during resize operations: + +- [`onResizeStart`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#onResizeStart): fired once when resizing starts. +- [`onResizing`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#onResizing): fired continuously while resizing. +- [`onResizeEnd`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html#onResizeEnd): fired once when resizing ends. + +The event detail includes current `StartPanelSize`, `EndPanelSize`, and `Delta` for ongoing and end events. + +```tsx +const handleResizeEnd = (event: CustomEvent) => { + console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta); +}; + + +
Start pane
+
End pane
+ +``` + +## Keyboard Navigation + +When the splitter bar is focused: + +| Keys | Description | +| ---- | ----------- | +| Arrow Left / Arrow Right | Resize panes in horizontal orientation | +| Arrow Up / Arrow Down | Resize panes in vertical orientation | +| Home | Snap start pane to its minimum size | +| End | Snap start pane to its maximum size | +| Ctrl + Arrow Left / Arrow Up | Collapse or expand the start pane | +| Ctrl + Arrow Right / Arrow Down | Collapse or expand the end pane | + +## Styling + +The [`IgrSplitter`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html) component exposes CSS parts for styling: + +| Name | Description | +| ---- | ----------- | +| `splitter-bar` | The draggable separator between panes | +| `drag-handle` | The drag handle element in the splitter bar | +| `start-pane` | The start pane container | +| `end-pane` | The end pane container | +| `start-collapse-btn` | Button that collapses the start pane | +| `end-collapse-btn` | Button that collapses the end pane | +| `start-expand-btn` | Button that expands the start pane | +| `end-expand-btn` | Button that expands the end pane | + +It also supports theme CSS variables, including: + +- `--bar-color` +- `--handle-color` +- `--expander-color` +- `--bar-color-active` +- `--handle-color-active` +- `--expander-color-active` +- `--focus-color` +- `--size` + +```css +igc-splitter { + --bar-color: #011627; + --handle-color: #ecaa53; + --expander-color: #ecaa53; + --bar-color-active: #011627; + --handle-color-active: #ecaa53; + --expander-color-active: #ecaa53; + --focus-color: #ecaa53; +} +``` + +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-splitter { + --bar-color: #011627; + --handle-color: #ecaa53; + --expander-color: #ecaa53; + --bar-color-active: #011627; + --handle-color-active: #ecaa53; + --expander-color-active: #ecaa53; + --focus-color: #ecaa53; +} + +p { + padding: 0 16px; +} +``` +```tsx +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { + IgrSplitter, +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class SplitterOverview extends React.Component { + constructor(props: any) { + super(props); + } + + public render(): JSX.Element { + return ( +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan. Curabitur id tortor laoreet, luctus justo sit amet, viverra mi. Nunc laoreet auctor metus eget suscipit. Vestibulum vestibulum imperdiet pharetra. Sed ac dignissim dui. In vitae suscipit nunc. Praesent vel felis nulla. Nullam non justo elit. Ut quis eleifend libero. Morbi ut maximus dui, non tristique risus. +

+
+
+

+ Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus. Maecenas efficitur nibh elementum, pellentesque sapien sit amet, fermentum sem. Pellentesque nisl mi, porta eget viverra a, tincidunt ac ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. +

+
+ +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); +``` + +## API References + +- [`IgrSplitter`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrsplitter.html) +- [`Styling & Themes`](../themes/overview.md) + +## Additional Resources + +- [Ignite UI for React **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-react) +- [Ignite UI for React **GitHub**](https://github.com/IgniteUI/igniteui-react) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-activation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-activation.md index 516951111..29d011174 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-activation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-activation.md @@ -210,7 +210,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Activation Overview diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-chart-adapter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-chart-adapter.md index 1fcda947f..a5f17fcea 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-chart-adapter.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-chart-adapter.md @@ -216,7 +216,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Chart Adapter Overview diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-clipboard.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-clipboard.md index 5f3f885bf..419d07c17 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-clipboard.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-clipboard.md @@ -199,7 +199,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Dependencies diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-commands.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-commands.md index f6f2ad063..fbc870c2a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-commands.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-commands.md @@ -193,7 +193,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Dependencies diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-conditional-formatting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-conditional-formatting.md index 191712fb9..bc0e6d4d2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-conditional-formatting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-conditional-formatting.md @@ -173,7 +173,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Conditional Formatting Overview diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-configuring.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-configuring.md index c87194e2a..eefdf0aea 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-configuring.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-configuring.md @@ -324,7 +324,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Configuring Cell Editing diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-data-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-data-validation.md index 33464cb74..d90ed5da2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-data-validation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-data-validation.md @@ -139,7 +139,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Dependencies diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-hyperlinks.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-hyperlinks.md index 65dad8a66..65bb9fe7c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-hyperlinks.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-hyperlinks.md @@ -172,7 +172,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Hyperlinks Overview diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-overview.md index d1ec19403..528e84aa5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/spreadsheet-overview.md @@ -186,7 +186,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Functionality diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stacked-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stacked-chart.md index c3b21fa13..7e2276892 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stacked-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stacked-chart.md @@ -352,7 +352,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
The following sections demonstrate individual types of Ignite UI for React Stacked Charts. @@ -541,7 +540,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100 Area Chart @@ -725,7 +723,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked Bar Chart @@ -905,7 +902,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100% Bar Chart @@ -1081,7 +1077,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked Column Chart @@ -1266,7 +1261,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100% Column Chart @@ -1433,7 +1427,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked Line Chart @@ -1618,7 +1611,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100% Line Chart @@ -1801,7 +1793,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked Spline Area Chart @@ -1988,7 +1979,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100% Spline Area Chart @@ -2171,7 +2161,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked Spline Chart @@ -2356,7 +2345,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stacked 100% Spline Chart @@ -2538,7 +2526,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/step-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/step-chart.md index 7c45a1f90..15294fda6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/step-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/step-chart.md @@ -138,7 +138,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Step Line Chart @@ -265,7 +264,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Step Chart Styling @@ -393,7 +391,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stepper.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stepper.md index 54fdb7a83..42b23bb78 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stepper.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stepper.md @@ -312,7 +312,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` -
## Getting Started with React Stepper @@ -515,7 +514,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
### Step States @@ -668,7 +666,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
### Stepper Animations @@ -911,7 +908,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` -
## Keyboard Navigation @@ -1268,7 +1264,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stock-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stock-chart.md index 4b452a16b..d3462ee5c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stock-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/stock-chart.md @@ -178,7 +178,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Stock Chart Recommendations @@ -383,7 +382,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stock Chart @@ -706,7 +704,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Stock Chart Styling @@ -877,7 +874,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Chart Annotations @@ -1227,7 +1223,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## React Chart Panes @@ -1473,7 +1468,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/switch.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/switch.md index 3205fa8cb..a74d3d98e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/switch.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/switch.md @@ -38,7 +38,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Usage @@ -77,7 +76,7 @@ To provide a meaningful label for the switch, simply place some text between the Label ``` -You can specify if the label should be positioned before or after the switch toggle by setting the [`labelPosition`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckboxbase.html#labelPosition) attribute of the switch. Allowed values are `before` and `after`(default): +You can specify if the label should be positioned before or after the switch toggle by setting the [`labelPosition`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrswitch.html#labelPosition) attribute of the switch. Allowed values are `before` and `after`(default): ```tsx Label @@ -126,7 +125,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Checked You can use the `checked` attribute to toggle on the switch. @@ -160,7 +158,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Required You can use the `required` attribute to mark the switch as required. @@ -206,7 +203,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Forms You can use the `name` and `value` attributes when using the switch with `Form`. @@ -269,12 +265,11 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References -- [`labelPosition`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckboxbase.html#labelPosition) +- [`labelPosition`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrswitch.html#labelPosition) - [`IgrSwitch`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrswitch.html) - [`Styling & Themes`](../themes/overview.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tabs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tabs.md index 84568b5a4..6b5bc9b16 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tabs.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tabs.md @@ -69,7 +69,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## How to use Tabs with Ignite UI for React First, you need to the install the corresponding Ignite UI for React npm package by running the following command: @@ -91,17 +90,20 @@ Simple [`IgrTabs`](https://www.infragistics.com/products/ignite-ui-react/docs/ty ```tsx - Panel 1 + Content for tab 1 - Panel 2 + Content for tab 2 - - Panel 3 + +
Tab 3
+ Content for tab 3 ``` +Tab text can be set either as simple string using the [`label`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtab.html#label) property or by assigning children to the `label` slot. Any remaining children in the default slot are rendered as the tab content. + ### Selection The [`IgrTabs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtabs.html) emits `Change` event when the user selects an item either by key press or click. The [`select`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtabs.html#select) method allows you to select a tab by specifying the [`IgrTab`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtab.html) or its id. @@ -115,7 +117,7 @@ The default behavior, which selects a tab when the user is navigating with the a A tab is disabled by setting the [`disabled`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtab.html#disabled) attribute: ```tsx -Tab 1 + ``` ### Alignment @@ -184,7 +186,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ### Scrolling Scroll buttons are shown when the available space is not enough to render all React tabs. The start scroll button is disabled if the first tab is in view. Respectively, when last tab is in view the end scroll button is disabled. By pressing one of the scroll buttons the tabs are scrolled so the tab in that direction is fully visible, or if it is already visible the previous/next tab in that direction is displayed. @@ -223,7 +224,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ### Keyboard Navigation |Keys|Description| @@ -236,7 +236,7 @@ root.render(); ### Prefix / Suffix -Each tab has default slot to display information - icon, text or both and `prefix` and `suffix` slots to show additional content in the beginning and/or in the end. +Besides the `label` slot to display information - icon, text or both, each tab also has `prefix` and `suffix` slots to show additional content in the beginning and/or in the end. ```css /* shared styles are loaded from: */ @@ -313,7 +313,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Styling The [`IgrTabs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtabs.html) component exposes several CSS parts, giving you full control over its style: @@ -458,7 +457,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## API Reference - [`IgrTabs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtabs.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/templates.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/templates.md index 1d0570577..7d9367d07 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/templates.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/templates.md @@ -127,7 +127,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Template Types ### Item Template diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/text-area.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/text-area.md index bb18ac01a..ef10baf43 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/text-area.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/text-area.md @@ -40,7 +40,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Dependencies First, you need to the install the corresponding Ignite UI for React npm package by running the following command: @@ -103,7 +102,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Text Area Resizing There are three different resize options of the [`IgrTextarea`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtextarea.html). When set to `none`, the text area does not resize and uses a scroll bar to show overflow text. When set to `vertical` (the default option), the text area lets the user resize it vertically. When set to `auto`, the text area shows all the user input at once. Overflow text wraps onto a new line and expands the text area automatically. @@ -147,7 +145,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Form Integration The sample below shows how a [`IgrTextarea`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtextarea.html) could be integrated into a form. @@ -218,7 +215,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Styling The [`IgrTextarea`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrtextarea.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -302,7 +298,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-grid.md index ac1659787..3b0d442e6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-grid.md @@ -17,7 +17,6 @@ In addition to predefined themes and palettes, you can further customize the loo - ## Available Theming Properties | Property name | Type | Description | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-mcp.md index 255d01871..5f8fb6714 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-mcp.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/theming-mcp.md @@ -1,25 +1,27 @@ --- -title: React Theming MCP | Infragistics -_description: React works with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Ignite UI for React applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements. +title: React Theming MCP | Infragistics +_description: Use the Ignite UI Theming MCP server to generate Ignite UI for React palettes, themes, typography, and design token overrides through your AI assistant. _keywords: Ignite UI for React controls, React widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations _license: MIT mentionedTypes: [] _tocName: Theming MCP --- + + # Ignite UI Theming MCP -

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe what you want — the assistant does the rest.

+

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe the theme, palette, or component overrides you want generated.

## Overview -Instead of writing styles by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more. +The Ignite UI Theming MCP server gives AI assistants the knowledge and tools to produce accurate theming code, including palettes with proper shade generation, typography, elevations, component design token overrides, and more. -The server supports all four Ignite UI design systems — **Material**, **Bootstrap**, **Fluent**, and **Indigo** — in both light and dark variants. While this guide focuses on React, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. +The server supports all four Ignite UI design systems (**Material**, **Bootstrap**, **Fluent**, and **Indigo**) in both light and dark variants. While this guide focuses on React, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. -Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** — the server compiles it for you. +Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** - the server compiles it for you. The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, the Theming MCP handles palettes, themes, tokens, typography, elevations, and styling workflows, while the CLI MCP handles project creation, project modification, component workflows, and documentation-oriented tasks. Most teams will want both servers connected in the same AI client. @@ -31,7 +33,7 @@ For a concrete combined workflow after setup, see [Build an App End-to-End with > _"What design tokens are available for the button component? Customize it with my brand purple #8b5cf6."_ -> _"My brand guidelines specify exact hex values for every primary shade — create a custom palette with those explicit values."_ +> _"My brand guidelines specify exact hex values for every primary shade - create a custom palette with those explicit values."_ > _"Make the calendar component use smaller spacing."_ @@ -39,9 +41,9 @@ For a concrete combined workflow after setup, see [Build an App End-to-End with Before configuring the MCP server, make sure you have: -- **Node.js** (v18 or later) installed — this provides the `npx` command used to launch the server. +- **Node.js** (v18 or later) installed. This provides the `npx` command used to launch the server. - A project with an **Ignite UI package** listed as a dependency in `package.json`. -- An **AI client with MCP support** — for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. +- An **AI client with MCP support** - for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. If you do not have Ignite UI Theming installed yet, run: @@ -181,11 +183,11 @@ For any other MCP-compatible client, use the STDIO transport with this launch co npx -y igniteui-theming igniteui-theming-mcp ``` -## Customizing AI Behavior with Project Rules +## Customize AI Behavior with Project Rules This section is optional. It is aimed at teams that want to fine-tune _how_ the AI generates theming code to match their existing codebase conventions. -Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI _which tools to call and in what order_ — you do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. +Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI _which tools to call and in what order_. You do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. ### VS Code (`.github/copilot-instructions.md`) @@ -193,12 +195,12 @@ Editors like VS Code and Cursor let you provide project-level instruction files ## Theming Conventions ### Sass Code Style -- Use `@use` / `@forward` — never `@import`. +- Use `@use` / `@forward` - never `@import`. - Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`). - Prefer setting primary design tokens over overriding many dependent tokens. For example, setting `$foreground` on a flat button automatically derives `$hover-background`, `$focus-background`, and `$active-background`. -- Keep component overrides scoped — use the component's default selector +- Keep component overrides scoped - use the component's default selector (e.g., `.igx-button--flat`) unless a narrower scope is needed. ``` @@ -213,12 +215,12 @@ globs: ["**/*.scss", "**/styles/**"] ## Project Theming Rules ### Code conventions -- `@use` / `@forward` only — no `@import`. +- `@use` / `@forward` only - no `@import`. - Extract shared colors into variables; do not repeat hex literals. -- Prefer primary tokens — let dependent tokens derive automatically. +- Prefer primary tokens - let dependent tokens derive automatically. - One component override per file. Name the file after the component. - Comment every override with the design rationale. -- Never hard-code gray shades for text — use palette grays so dark mode works. +- Never hard-code gray shades for text - use palette grays so dark mode works. - For dark mode, only the palette changes. Component overrides stay the same. ``` @@ -227,7 +229,7 @@ globs: ["**/*.scss", "**/styles/**"] ## Available Tools -The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly — just describe what you want. +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly. Just describe what you want. To see the current full list of tools and their parameters at any time, ask your AI assistant: @@ -238,15 +240,15 @@ Here is a brief overview of each tool: | Tool | Description | |------|-------------| | `detect_platform` | Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. | -| `create_palette` | Generates a color palette with automatic shade variants (50–900, A100–A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | -| `create_custom_palette` | Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. | +| `create_palette` | Generates a color palette with automatic shade variants (50-900, A100-A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | +| `create_custom_palette` | Fine-grained palette creation. Specify exact hex values for every shade when automatic generation is not suitable. | | `create_typography` | Sets up a font family and type scale for a given design system. | -| `create_elevations` | Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. | +| `create_elevations` | Configures box-shadow elevation levels (0-24) for Material or Indigo design systems. | | `create_theme` | One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). | | `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). | | `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. | | `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. | -| `get_component_design_tokens` | Returns all available design tokens for a component — always call this before `create_component_theme`. | +| `get_component_design_tokens` | Returns all available design tokens for a component. Always call this before `create_component_theme`. | | `create_component_theme` | Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. | | `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | | `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | @@ -254,7 +256,7 @@ Here is a brief overview of each tool: > [!NOTE] > For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. -## Example Scenarios +## Common Workflows The following scenarios show what you can ask the AI to do once the MCP server is connected. @@ -290,7 +292,7 @@ $my-palette: palette( ### Brand-Exact Color Shades -> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."_ +> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values - create a custom palette."_ The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. @@ -302,7 +304,7 @@ The AI will call `get_component_design_tokens` first to discover valid token nam ### Layout Adjustments -> _"The calendar feels bloated — reduce its spacing, and make all components slightly smaller."_ +> _"The calendar feels bloated - reduce its spacing, and make all components slightly smaller."_ The AI will call `set_spacing` scoped to the calendar component and `set_size` at the `:root` level. @@ -323,12 +325,10 @@ For light themes use a light surface (e.g., `#fafafa`). For dark themes use a da ## Additional Resources - [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md) - - - - [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) - [Ignite UI for React Skills](./skills.md) - [Ignite UI CLI MCP](./cli-mcp.md) +- [MAKER Framework](./maker-framework.md) @@ -192,7 +191,7 @@ To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.inf -The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. +The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. @@ -228,7 +227,7 @@ const filteringTree: IgrFilteringExpressionsTree = { -In case you don't want to show the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. +In case you don't want to show the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. > [!Note] > You can enable both the **QuickFilter**/**ExcelStyleFilter** and the advanced filtering user interfaces in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). Both filtering user interfaces will work independently of one another. The final filtered result in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) is the intersection between the results of the two filters. @@ -412,7 +411,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-editing.md index 486757d87..6b41fbbec 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-editing.md @@ -167,7 +167,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Cell Editing ### Editing through UI @@ -466,7 +465,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## CRUD operations > [!Note] @@ -494,7 +492,7 @@ public addNewChildRow() { ### Updating data in the Tree Grid -Updating data in the Tree Grid is achieved through [`updateRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#updateCell) methods but **only if the PrimaryKey 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 Tree Grid is achieved through [`updateRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#updateCell) methods but **only if the PrimaryKey for the grid is defined**. You can also directly update a cell and/or a row value through their respective **update** methods. @@ -517,7 +515,7 @@ row.update(newData); ### Deleting data from the Tree Grid -Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) is defined. +Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#primaryKey) is defined. @@ -566,6 +564,8 @@ public webTreeGridCellEdit(args: IgrGridEditEventArgs): void { + + The result of the above validation being applied to our [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) can be seen in the below demo: @@ -717,7 +717,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -889,13 +888,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) - - - - [`IgrDatePicker`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrdatepicker.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-merging.md index a55d09250..b2e4fb1c9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-merging.md @@ -228,7 +228,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Enabling and Using Cell Merging @@ -731,7 +730,6 @@ class CustomTreeGridMergeStrategy extends IgrDefaultTreeGridMergeStrategy { } ``` - ## Feature Integration diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-selection.md index f0e2a7ee7..f271edc02 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-cell-selection.md @@ -188,7 +188,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Selection Types ### Tree Grid Multiple-Cell Selection @@ -349,18 +348,17 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Tree Grid Single Selection -When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) to **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. +When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#cellSelection) to **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. > When single cell is selected [`selected`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.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` event is emitted. ### Tree Grid None Selection -If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) to **none**. 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. +If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#cellSelection) to **none**. 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 @@ -389,7 +387,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Select range -[`selectRange`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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. @@ -402,7 +400,7 @@ gridRef.current.selectRange(range) ### Clear cell selection -[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clearCellSelection) will clear the current cell selection. +[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#clearCellSelection) will clear the current cell selection. ```tsx gridRef.current.clearCellSelection(); @@ -480,7 +478,7 @@ The multi-cell selection is index based (DOM elements selection). - `Filtering` - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells. - `Resizing` - On column resizing selected cells will not be cleared. - `Hiding` - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected. -- [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#pinning) - Selected cell will not be cleared. Same as hiding +- [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#pinning) - Selected cell will not be cleared. Same as hiding - `GroupBy` - On column grouping selected cells will not be cleared. @@ -655,7 +653,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-clipboard-interactions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-clipboard-interactions.md index acb05366c..b0d7769c3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-clipboard-interactions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-clipboard-interactions.md @@ -271,7 +271,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Functionality Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are: @@ -298,7 +297,7 @@ Copy behavior is working with the default interaction defined by the browser and ## API Usage -We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clipboardOptions) property, which handles the following options: +We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#clipboardOptions) property, which handles the following options: - `Enabled` Enables/disables copying of selected cells. - `CopyHeaders` Include the associated headers when copying. @@ -308,7 +307,7 @@ We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-r > [!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` Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clipboardOptions). +- `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-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#clipboardOptions). ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-collapsible-column-groups.md index 684f59192..fca29549a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-collapsible-column-groups.md @@ -248,7 +248,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Setup To get started with the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) and the **Collapsible multi-column headers** feature, first you need to install Ignite UI for React by typing the following command: @@ -265,9 +264,9 @@ Also, we strongly suggest that you take a brief look at [multi-column headers](m **Collapsible Column Groups** is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. -In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#columnGroup) to **true**. +In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#columnGroup) to **true**. -You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. +You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumngroup.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. Let's see the markup below: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-hiding.md index e153dea52..d8ebea276 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-hiding.md @@ -201,7 +201,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Tree Grid Setup Let's start by creating our [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) and binding it to our data. We will also enable both filtering and sorting for the columns. @@ -565,7 +564,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References In this article we learned how to use the built-in column hiding UI in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'s toolbar. The column hiding UI has a few more APIs to explore, which are listed below. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-pinning.md index 95f84c029..15cffde2c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-pinning.md @@ -164,7 +164,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Column Pinning API Column pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pinned) property of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html). Pinned columns are rendered on the left side of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) body. @@ -179,7 +178,7 @@ Column pinning is controlled through the [`pinned`](https://www.infragistics.com -You may also use the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#unpinColumn) methods of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) to pin or unpin columns by their field name: +You may also use the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#unpinColumn) methods of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) to pin or unpin columns by their field name: @@ -208,7 +207,7 @@ const columnPinning = (event: IgrPinColumnCancellableEventArgs) = { ## Pinning Position -You can change the column pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#pinning) configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right. ```typescript @@ -411,7 +410,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. @@ -601,7 +599,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. @@ -804,7 +801,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) 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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). @@ -999,7 +995,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-resizing.md index 3c8c04eac..b9711ba56 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-resizing.md @@ -188,7 +188,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - **Column resizing** is also enabled per-column level, meaning that the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#resizable) input of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html). ```tsx @@ -481,7 +480,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -676,7 +674,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-selection.md index 540d7b490..18a5bc7c6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-selection.md @@ -13,7 +13,7 @@ _premium: true # React Tree Grid Column Selection Overview -The React Tree Grid Column Selection feature in Ignite UI for React offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. +The React Tree Grid Column Selection feature in Ignite UI for React offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. ## React Tree Grid Column Selection Example @@ -181,10 +181,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Basic Usage -The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) input, which takes `GridSelectionMode` values. +The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#columnSelection) input, which takes `GridSelectionMode` values. ## Interactions @@ -371,11 +370,10 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Keyboard Combinations > [!Note] -> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) input is set to `multiple`. +> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#columnSelection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: @@ -597,7 +595,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References The column selection UI has a few more APIs to explore, which are listed below. @@ -608,12 +605,12 @@ The column selection UI has a few more APIs to explore, which are listed below. [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) properties: -- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#columnSelection) -- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#selectedColumns) -- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#selectColumns) -- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#deselectColumns) -- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#selectAllColumns) -- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#deselectAllColumns) +- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#columnSelection) +- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#selectedColumns) +- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#selectColumns) +- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#deselectColumns) +- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#selectAllColumns) +- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#deselectAllColumns) [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-types.md index 4473a88e8..b93d82ebf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-column-types.md @@ -467,7 +467,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## React Tree Grid Default Template @@ -482,7 +481,7 @@ This column [`dataType`](https://www.infragistics.com/products/ignite-ui-react/d ### Number -If the [`dataType`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: +If the [`dataType`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: - Number of digits after the decimal point - Decimal separator with `,` or `.` @@ -497,7 +496,7 @@ const formatOptions : IgrColumnPipeArgs = { ### 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: +The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: - **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc. - **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: @@ -580,7 +579,7 @@ Default template is using the value coming from the data as an image source to a ``` -When [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#autoGenerate) is used for the 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 [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#autoGenerate) is used for the 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. ### Currency @@ -674,7 +673,7 @@ const formatCurrency = (value: number) => { - [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) - [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs) - [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) -- [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) +- [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#locale) - [`dataType`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#dataType) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-conditional-cell-styling.md index 20d1ae5e6..0dc522dc4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-conditional-cell-styling.md @@ -19,31 +19,31 @@ The Ignite UI for React Conditional Styling feature in React Tree Grid allows cu The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component in Ignite UI for React provides two ways to **conditional styling of rows** based on custom rules. -- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) input on the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component; -- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowStyles) input on the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component; +- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowClasses) input on the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component; +- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowStyles) input on the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component; Further in this topic we will cover both of them in more details. ### Using Row Classes -You can conditionally style the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) input and define custom rules. +You can conditionally style the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowClasses) input and define custom rules. ```tsx ``` -The [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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. ```tsx const rowClasses = { - activeRow: (row: IgrRowType) => row.index === 0 + activeRow: (row: IgrRowType) => row.index % 2 === 0 } ``` ```css .activeRow { - border: 2px solid #fc81b8; + border-top: 2px solid #fc81b8; border-left: 3px solid #e41c77; } ``` @@ -182,12 +182,11 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Using Row Styles -The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). +The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). -> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowClasses) is: +> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowClasses) is: ```tsx (row: IgrRowType) => boolean @@ -375,7 +374,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Tree Grid Conditional Cell Styling ## Overview @@ -587,7 +585,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - - By using the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) input [`cellStyles`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#cellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. > The callback signature for both `cellStyles` and `cellClasses` is now changed to: @@ -758,7 +755,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## 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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-editing.md index 721aa5b78..4f4f20a8d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-editing.md @@ -20,7 +20,7 @@ The Ignite UI for React Cell Editing feature in React Tree Grid provides an easy ## Setup -In order to specify which edit mode should be enabled, the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable). +In order to specify which edit mode should be enabled, the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowEditable). The [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) property enables you to specify the following options: @@ -29,12 +29,12 @@ The [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/type > Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). -The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) property enables you to specify the following options: +The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowEditable) property enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled. This is the default value. - **true** - the row editing in the corresponding grid will be enabled. -In the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. +In the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. All available column data types could be found in the official [Column types topic](column-types.md#default-template). @@ -86,7 +84,7 @@ The grid exposes a wide array of events that provide greater control over the ed ### 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. +- `CellEditEnter` - Prevents entering cell edit. If [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. - `CellEdit` - Allowed `Cell` and/or `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. @@ -300,7 +298,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Features integration While a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-export-excel.md index e3726c5ce..1b1b20106 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-export-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-export-excel.md @@ -172,7 +172,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Export Multi Column Headers Grid You can export [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` `IgnoreMultiColumnHeaders` to `true`. @@ -409,7 +408,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Export Grid with Frozen Column Headers By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` `FreezeHeaders` to `true`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-filtering.md index 9d86b679c..5c8e5f412 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-filtering.md @@ -171,22 +171,21 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Setup -In order to specify if filtering is enabled and which filtering mode should be used, the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable). +In order to specify if filtering is enabled and which filtering mode should be used, the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable). -Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowFiltering) enables you to specify the following options: +Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#allowFiltering) enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled. This is the default value. - **true** - the filtering for the corresponding grid will be enabled. -Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering) enables you to specify the following options: +Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#allowAdvancedFiltering) enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled. This is the default value. - **true** - the advanced filtering for the corresponding grid will be enabled. -Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filterMode) enables you to specify the following options: +Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#filterMode) enables you to specify the following options: - **QuickFilter** - a simplistic filtering UI. This is the default value. - **ExcelStyleFilter** - an Excel-like filtering UI. @@ -205,7 +204,7 @@ Property [`filterable`](https://www.infragistics.com/products/ignite-ui-react/do -To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowAdvancedFiltering) input property to **true** +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#allowAdvancedFiltering) input property to **true** ```tsx @@ -225,7 +224,7 @@ While some filtering conditions have been applied to a column, and the filter ro 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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#dataType) of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the `IgnoreCase` and the initial `Condition` properties. -The filtering feature is enabled for the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable) input to **false**. +The filtering feature is enabled for the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#filterable) input to **false**. @@ -242,7 +241,7 @@ The filtering feature is enabled for the [`IgrTreeGrid`](https://www.infragistic ## Initial filtered state -To set the initial filtering state of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), set the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringExpressionsTree) for each column to be filtered. +To set the initial filtering state of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), set the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#filteringExpressionsTree) for each column to be filtered. ```tsx const filteringExpressions: IgrFilteringExpressionsTree = { @@ -275,7 +274,7 @@ return ( ### Filtering logic -The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#filteringLogic) property of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) controls how filtering multiple columns will resolve in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). You can change it at any time through the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) API, or through the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) input property. +The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#filteringLogic) property of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) controls how filtering multiple columns will resolve in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). You can change it at any time through the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) API, or through the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) input property. ```tsx import { FilteringLogic } from "igniteui-react-grids"; @@ -465,7 +464,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Known Limitations > [!Note] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-multi-column-headers.md index 071cfd10a..60bddec14 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-multi-column-headers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-multi-column-headers.md @@ -256,7 +256,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - The declaration of multi-column headers is achieved by wrapping a set of columns into an [`columnGroup`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#columnGroup) component with [`header`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#header) title information passed. ```tsx @@ -570,7 +569,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -787,7 +785,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-overview.md index d3edd331b..3ca93ec2d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-overview.md @@ -206,7 +206,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Getting Started with Ignite UI for React Tree Grid ### Dependencies @@ -439,7 +438,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Persistence and Integration The indentation of the tree grid cell persists across other tree grid features like filtering, sorting and paging. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-paging.md index 071d13a51..cab4ea348 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-paging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-paging.md @@ -169,7 +169,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ```css .gridSize { --ig-size: var(--ig-size-small); @@ -406,7 +405,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-actions.md index 6712c2083..d71c005b5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-actions.md @@ -19,7 +19,7 @@ The Ignite UI for React Row Actions feature in React Tree Grid enables developer The predefined actions UI components are: -- [`IgrGridEditingActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) option and row deletion of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). +- [`IgrGridEditingActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowEditable) option and row deletion of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). - [`IgrGridPinningActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridpinningactions.html) - includes functionality and UI specifically designed for the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. @@ -49,7 +49,7 @@ They are added inside the [`IgrTreeGrid`](https://www.infragistics.com/products/ These components expose templates giving flexibility for customization. For instance, if we would like to use the [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) for a Gmail scenario with row actions such as **delete**, **edit** and etc. You can simply create button component with icon, add click event to it and insert it into the [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html). - + @@ -243,7 +243,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrGridPinningActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridpinningactions.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-adding.md index e7d225916..7dd65d87e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-adding.md @@ -175,10 +175,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Row Adding Usage -Then define a [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) set to true and an [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#addRow) input controls the visibility of the button that spawns the row adding UI. +Then define a [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowEditable) set to true and an [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#addRow) input controls the visibility of the button that spawns the row adding UI. @@ -224,7 +223,7 @@ The internal `BaseTransactionService` is automatically provided for [`IgrTreeGri -Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#beginAddRowById) requires you to specify the row to use as context for the operation by its `RowID` (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. The second parameter controls if the row is added as a child to the context row or as a sibling. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. +Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#beginAddRowById) requires you to specify the row to use as context for the operation by its `RowID` (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. The second parameter controls if the row is added as a child to the context row or as a sibling. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. ```typescript this.treeGrid.beginAddRowById('ALFKI', true); // Spawns the add row UI to add a child for the row with PK 'ALFKI' @@ -278,7 +277,7 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowAddTextTemplate). +Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowAddTextTemplate). @@ -305,13 +304,13 @@ The row adding UI comprises the buttons in the [`IgrActionStrip`](https://www.in ## API References -- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `RowEditCancel` -- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#endEdit) -- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#endEdit) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#primaryKey) - [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-drag.md index 8de24dfe6..60f0daae5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-drag.md @@ -13,7 +13,7 @@ _premium: true # Row Dragging in React Tree Grid -The Ignite UI for React Row Dragging feature in React Tree Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable) input. +The Ignite UI for React Row Dragging feature in React Tree Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowDraggable) input. ## React Tree Grid Row Drag Example @@ -212,10 +212,9 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Configuration -In order to enable row-dragging for your [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. +In order to enable row-dragging for your [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. ```tsx @@ -224,7 +223,7 @@ In order to enable row-dragging for your [`IgrTreeGrid`](https://www.infragistic ### Templating the Drag Icon -The drag handle icon can be templated using the grid's [`dragIndicatorIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#dragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (**drag_indicator**) to **drag_handle**. @@ -263,9 +262,9 @@ With the help of the grid's row drag events you can create a grid that allows yo > [!Note] -> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. +> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. -Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: +Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@ -547,14 +546,13 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Limitations -Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable). +Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowDraggable). ## API References -- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowDraggable) +- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowDraggable) - `RowDragStart` - `RowDragEnd` - [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-editing.md index df8b7b68b..8f298d2d1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-editing.md @@ -166,13 +166,12 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - > [!Note] > When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode. ## Row Editing Usage -Define a [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) set to true: +Define a [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowEditable) set to true: @@ -191,7 +190,7 @@ Define a [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/d > Setting primary key is mandatory for row editing operations. > [!Note] -> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) property in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) input of that column to `false`. +> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowEditable) property in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) input of that column to `false`. > [!Note] > The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. @@ -455,10 +454,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Known Issues and Limitations -- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection @@ -470,14 +468,14 @@ root.render(); ## API References -- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowEditable) +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` -- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#endEdit) +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#endEdit) - [`field`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#field) - [`editable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#editable) -- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#primaryKey) - [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-pinning.md index 13c380e1b..aea076a76 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-pinning.md @@ -213,7 +213,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Row Pinning UI The built-in row pinning UI is enabled by adding an [`IgrActionStrip`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igractionstrip.html) component with the [`IgrGridPinningActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridpinningactions.html) component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. @@ -249,7 +248,7 @@ gridRef.current.pinRow('ALFKI'); gridRef.current.unpinRow('ALFKI'); ``` -Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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. +Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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` event and changing the `InsertAtIndex` property of the event arguments to the desired position index. @@ -266,7 +265,7 @@ const rowPinning = (event: IgrPinRowEventArgs) => { ## Pinning Position -You can change the row pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#pinning) configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom. @@ -462,7 +461,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Row Pinning Limitations - Only records that exist in the data source can be pinned. @@ -656,7 +654,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-selection.md index 89485b73a..06c701627 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-row-selection.md @@ -207,7 +207,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Setup In order to setup row selection in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), you just need to set the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection) property. This property accepts `GridSelectionMode` enumeration. @@ -362,7 +361,7 @@ const mySelectedRows = [1,2,3]; You can template header and row selectors in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) and also access their contexts which provide useful functionality for different scenarios. -By default, the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`click`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckboxbase.html#click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. +By default, the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) **handles all row selection interactions** on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the [RowSelectionChanging event](#row-selection-event). In case you implement a custom template with a [`click`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html#click) handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state. #### Row Template @@ -410,7 +409,7 @@ const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => { } ``` -In the above example we are using an [`IgrCheckbox`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html) and we bind `rowContext.selected` to its [`checked`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckboxbase.html#checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). +In the above example we are using an [`IgrCheckbox`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html) and we bind `rowContext.selected` to its [`checked`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcheckbox.html#checked) property. See this in action in our [Row Numbering Demo](#row-numbering-demo). ### Header Template @@ -613,7 +612,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Excel Style Row Selectors Demo @@ -801,7 +799,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### Conditional Selection Demo @@ -963,7 +960,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-search.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-search.md index d8b0d4cfa..5bc01492f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-search.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-search.md @@ -232,7 +232,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## React Search Usage ### Tree Grid Setup @@ -268,7 +267,7 @@ const [searchText, setSearchText] = useState(''); Now let's create our search input! By binding our `searchText` to the `value` property to our newly created input and subscribe to the `inputOccured` event, we can detect every single `searchText` modification by the user. This will allow us to use the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'s `findNext` and `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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findPrev) methods have three arguments: +Both the [`findNext`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#findPrev) methods have three arguments: - `Text`: **string** (the text we are searching for) - (optional) `CaseSensitive`: **boolean** (should the search be case sensitive or not, default value is false) @@ -292,7 +291,7 @@ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => { ### 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#findPrev) methods inside the buttons' respective click event handlers. @@ -313,7 +312,7 @@ const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) = ### 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#findPrev) methods depending on which key the user has pressed. @@ -376,7 +375,7 @@ What if we would like to filter and sort our [`IgrTreeGrid`](https://www.infragi 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. -Let's begin by creating the search navigation buttons on the right of the input by adding two 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findPrev) methods. +Let's begin by creating the search navigation buttons on the right of the input by adding two 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#findPrev) methods. - For displaying a couple of chips that toggle the `CaseSensitive` and the `ExactMatch` properties. We have replaced the checkboxes with two stylish chips. Whenever a chip is clicked, we invoke its respective handler. @@ -463,10 +462,10 @@ In this article we implemented our own search bar for the [`IgrTreeGrid`](https: [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) methods: -- [`findNext`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findNext) -- [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#findPrev) -- [`clearSearch`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clearSearch) -- [`refreshSearch`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#refreshSearch) +- [`findNext`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#findNext) +- [`findPrev`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#findPrev) +- [`clearSearch`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#clearSearch) +- [`refreshSearch`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#refreshSearch) [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-selection.md index 62d470bb3..d30705cc6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-selection.md @@ -18,7 +18,7 @@ With the Ignite UI for React Select feature in React Tree Grid you can easily in - Cell selection - Column selection -With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection) property, you can specify: +With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowSelection) property, you can specify: - None - Single @@ -191,12 +191,11 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## React Tree Grid Selection Options ### React Tree Grid Row Selection -Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowSelection) enables you to specify the following options: +Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowSelection) enables you to specify the following options: - `None` - Row selection would be disabled for the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). - `Single` - Selection of only one row within the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) would be available. @@ -212,7 +211,7 @@ Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-react/ ### React Tree Grid Cell Selection -Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#cellSelection) enables you to specify the following options: +Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#cellSelection) enables you to specify the following options: - `None` - Cell selection would be disabled for the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). - `Single` - Selection of only one cell within the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) would be available. @@ -242,7 +241,7 @@ This leads to the following three variations: ## Known Issues and Limitations -When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection - Row Expand/collapse diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-size.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-size.md index ac90cd06f..ba610662c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-size.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-size.md @@ -258,7 +258,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Usage As you can see in the demo above, the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set `--ig-size` either inline or part of a CSS class: @@ -273,11 +272,11 @@ As you can see in the demo above, the [`IgrTreeGrid`](https://www.infragistics.c ``` -And now let's see in details how each option reflects on the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component. When you switch between different size options the height of each [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width), please consider the fact that it must be bigger than the sum of left and right padding: +And now let's see in details how each option reflects on the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) component. When you switch between different size options the height of each [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width), please consider the fact that it must be bigger than the sum of left and right padding: -- **large** - this is the default [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `80px`; -- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `64px`; -- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `56px`; +- **large** - this is the default [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) is `80px`; +- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) is `64px`; +- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) is `56px`; > [!Note] > Please keep in mind that currently you **can not** override any of the sizes. @@ -380,16 +379,14 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio } ``` -Another option that [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) provides for you, in order to be able to change the height of the rows in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowHeight). So let's see in action how this property affects the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) layout along with the `--ig-size`. +Another option that [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) provides for you, in order to be able to change the height of the rows in the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowHeight). So let's see in action how this property affects the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) layout along with the `--ig-size`. 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowHeight) specified**. +- `--ig-size` CSS variable will have no impact on row height **if there is [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowHeight) specified**. - `--ig-size` will **affect all of the rest elements in the Tree Grid**, as it has been described above. -We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#rowHeight) property to the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html): - - +We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#rowHeight) property to the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html): ```tsx diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-sizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-sizing.md index 524150897..96d4a9d3c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-sizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-sizing.md @@ -12,23 +12,23 @@ _premium: true # React Tree Grid Sizing -The Ignite UI for React Sizing feature in React Tree Grid is an important aspect of creating responsive and user-friendly grid interfaces. The React Tree Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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. +The Ignite UI for React Sizing feature in React Tree Grid is an important aspect of creating responsive and user-friendly grid interfaces. The React Tree Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. > [!Note] > If the Border box sizing is overridden by the user we cannot guarantee that the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) will size correctly. ## React Tree Grid Width -If the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) input does not have value assigned, its default value is `100%` and the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. +If the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) input does not have value assigned, its default value is `100%` and the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. > [!Note] -> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) style of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) itself will result in an unexpected behavior. +> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) style of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) itself will result in an unexpected behavior. ### Null -The grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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. +The grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. +- If there are 6 columns and none of them has width defined, the grid will have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. columns-default-gridWidth-null-v2 @@ -49,9 +49,9 @@ The grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ ### Pixels -When the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content: -- When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width). Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. +- 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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#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-v2 @@ -62,9 +62,9 @@ When the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/d ### Percentages -When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) will size relative to the browser window. +When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) will size relative to the browser window. -- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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. +- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#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-100p-v2 @@ -72,7 +72,7 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ty width-percent-parent-100p-v2 -- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. +- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. width-percent-150p-parent-noscroll-v2 width-percent-150p-parent-scroll-v2 @@ -82,11 +82,11 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ty By default if no height is defined for the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html), it will be set to `100%`. You can check how the grid reacts depending on the DOM structure in the `Percentages` section. > [!Note] -> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) style of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) itself will result in an unexpected behavior. +> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height) style of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) itself will result in an unexpected behavior. ### Null -The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height) input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway. - If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. @@ -96,7 +96,7 @@ The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/t height-null-24rows-v2 -- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: +- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: height-null-24rows-parent-noscroll-v2 height-null-24rows-parent-scroll-v2 @@ -106,28 +106,28 @@ The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/t ### Pixels -Setting the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is set in pixels. +Setting the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#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-4rows-v2 -- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: +- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: height-500px-14rows-v2 -- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. +- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. height-700px-14rows-parent-noscroll-v2 height-700px-14rows-parent-scroll-v2 ### Percentages -When the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) input is set to percentages, the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) set in pixels or percentages, the grid will size relative to the size of the parent. +When the [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height) input is set to percentages, the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `1200px` and the parent element not having any size applied to it: +Let's have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#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. @@ -141,7 +141,7 @@ Let's have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/ height-percent-100-parent-800px-v2 -- If the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height) is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. height-percent-130p-parent-noscroll-v2 height-percent-130p-parent-scroll-v2 @@ -160,7 +160,7 @@ By default when a column doesn't have a specified width it will try to autosize, 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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) and the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) `null` and 6 columns that don't have width, each column will be sized to `136px`. columns-default-gridWidth-null-v2 @@ -168,15 +168,15 @@ When the grid is resized in these scenarios, the column width is also updated to columns-default-all-row-selectors-v2 -- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `1000px`. +- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) set to `1000px`. columns-default-all-min-136px-v2 -- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `100px`, the first will fill the rest. +- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) of `100px`, the first will fill the rest. columns-default-first-rest-100px-v2 -- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `100px`. +- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) set to `100px`. columns-default-all-first-100px-v2 @@ -185,19 +185,19 @@ When the grid is resized in these scenarios, the column width is also updated to ### Pixels -When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of the columns is static, it can be less than the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) or exceed it. +When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) of the columns is static, it can be less than the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) or exceed it. -- If the combined `width` of all columns is less than the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). In the next example the columns have `150px` width. +- If the combined `width` of all columns is less than the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). In the next example the columns have `150px` width. columns-150px-empty-area-v2 -- If the combined [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of all columns is bigger than the actual [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) of all columns is bigger than the actual [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width), a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. columns-150px-extra-area-v2 ### Percentages -When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. +When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. - If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. @@ -211,7 +211,7 @@ When columns have set [`width`](https://www.infragistics.com/products/ignite-ui- columns-percent-bigger-100p-v2 -- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) set to `50%`: +- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) set to `50%`: columns-percent-gridWidth-null-v2 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-sorting.md index 182e7cd63..a6e88b565 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-sorting.md @@ -237,7 +237,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - This is done via the [`sortable`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortable) input. With the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) sorting, you can also set the [`sortingIgnoreCase`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortingIgnoreCase) property to perform case sensitive sorting: ```tsx @@ -457,10 +456,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Sorting through the API -You can sort any column or a combination of columns through the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) API using the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`sort`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sort) method: +You can sort any column or a combination of columns through the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) API using the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) [`sort`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#sort) method: ```tsx import { SortingDirection } from "igniteui-react-grids"; @@ -482,7 +480,7 @@ treeGridRef.current.sort([ > [!Note] > Sorting is performed using our `DefaultSortingStrategy` algorithm. Any [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html) or `ISortingExpression` can use a custom implementation of the `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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#clearSort) method: +As with the filtering behavior, you can clear the sorting state by using the [`clearSort`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#clearSort) method: @@ -497,14 +495,14 @@ treeGridRef.current.clearSort(); > [!Note] -> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortStrategy) of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortStrategy) of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html), since they work in different scopes and expose different parameters. +> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#sortStrategy) of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#sortStrategy) of the [`IgrColumn`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html), since they work in different scopes and expose different parameters. > [!Note] > The sorting operation **DOES NOT** change the underlying data source of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). ## Initial Sorting State -It is possible to set the initial sorting state of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortingExpressions) property of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). +It is possible to set the initial sorting state of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#sortingExpressions) property of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html). ```tsx const sortingExpressions: IgrSortingExpression[] = [ @@ -527,7 +525,7 @@ const sortingExpressions: IgrSortingExpression[] = [ The sorting indicator icon in the column header can be customized using a template. The following properties are available for templating the sorting indicator for any sorting state (ascending, descending, none): -- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. +- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. @@ -545,7 +543,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { -- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. +- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. @@ -563,7 +561,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { -- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. +- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. @@ -779,7 +777,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References - [`IgrSortingExpression`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrsortingexpression.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-state-persistence.md index 4a2d554b5..0f92ffcd8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-state-persistence.md @@ -582,7 +582,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Limitations diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-summaries.md index fba8bfe6d..9681997dd 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-summaries.md @@ -193,7 +193,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - > [!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** @@ -529,7 +528,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Disabled Summaries The [`disabledSummaries`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#disabledSummaries) property provides precise per-column control over the React Tree Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgrTreeGrid, 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. @@ -1122,7 +1120,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## 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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#pipeArgs). When using custom operands, the [`locale`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#locale) and [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#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-react/docs/typescript/latest/classes/igniteui-react-grids.igrcolumn.html#summaryFormatter) property. @@ -1311,7 +1308,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Child Summaries @@ -1529,7 +1525,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## Keyboard Navigation @@ -1759,7 +1754,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-toolbar.md index e5ec430f7..051d8d526 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-toolbar.md @@ -186,7 +186,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - The predefined [`IgrGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridtoolbaractions.html) and [`IgrGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridtoolbartitle.html) UI components are added inside the [`IgrGridToolbar`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridtoolbar.html) and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: @@ -416,7 +415,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ### Title @@ -722,7 +720,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## 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. @@ -888,7 +885,6 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -1076,7 +1072,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## API References The Grid Toolbar service has a few more APIs to explore, which are listed below. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-virtualization.md index 8ca30cf99..d0a679393 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree-grid-virtualization.md @@ -17,14 +17,14 @@ In Ignite UI for React, the [`IgrTreeGrid`](https://www.infragistics.com/product ## Enabling Virtualization -The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) 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. The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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. +The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html) 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. The [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.html#height) is `null`). +However, it is also possible to explicitly set the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#height) is `null`). The size of the data chunks is determined by: -- The row height for the vertical (row) virtualization. This is determined by the [`rowHeight`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.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 [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html#columnWidth) option, which will be applied to all columns that don't have explicit width set. In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the [`IgrTreeGrid`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.igrtreegrid.html)'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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree.md index 69590ec4d..1056fef33 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/tree.md @@ -61,7 +61,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## How to Use Ignite UI for React Tree With Ignite UI @@ -250,7 +249,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/treemap-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/treemap-chart.md index 376db0e26..6e4c23be9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/treemap-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/treemap-chart.md @@ -127,7 +127,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Treemap Recommendations @@ -337,7 +336,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
### Layout Types @@ -531,7 +529,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ### React Treemap Highlighting In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrtreemap.html#highlightingMode)to Brighten or FadeOthers. @@ -687,7 +684,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` - ## React Treemap Percent based highlighting - [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-react/api/docs/typescript/latest/classes/igniteui_react_charts.igrtreemap.html#highlightedDataSource): Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property. @@ -819,7 +815,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/update-guide.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/update-guide.md index f35161877..e6d17c368 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/update-guide.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/update-guide.md @@ -59,7 +59,7 @@ Becomes: - Components no longer have the non-functional `name` property by default. The `name` property only remains in **igniteui-react** components, mostly form inputs such as [`IgrInput`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrinput.html) and [`IgrCombo`](https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react.igrcombo.html), where it has native functionality. - Ignite UI for React components no longer require a `key` property, unless it is necessary according to React\`s [documentation](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) -- The [IgrDataGrid](./grids/data-grid/overview.md) is no longer part of **igniteui-react-grids** package. It has been moved to **igniteui-react-data-grids**, making **igniteui-react-grids** more lightweight. +- The `DataGrid` is no longer part of **igniteui-react-grids** package. It has been moved to **igniteui-react-data-grids**, making **igniteui-react-grids** more lightweight. - There were several types that were exposed as classes in version **18.9.0** which is no longer the case. Those are now exported as types and can be used like this: ```tsx diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/xdate-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/xdate-picker.md deleted file mode 100644 index 74e4ab038..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/xdate-picker.md +++ /dev/null @@ -1,393 +0,0 @@ ---- -title: React XDate Picker | Data Visualization Tools | Infragistics -_description: Infragistics' React xdate picker component helps your users select dates. Improve your graphs and visualization with Ignite UI for React! -_keywords: React xdate picker, drop down, Ignite UI for React, Infragistics -mentionedTypes: ["XDatePicker"] -_tocName: XDate Picker -_premium: true ---- - -# React XDate Picker Overview - -The XDate Picker component allows users to use a drop-down calendar UI allowing the intuitive selection of a day, month and year. This can be helpful when an application user needs to select specific dates, and multiple editors can be combined to create a date-range UI. - -> [!WARNING] -> The `XDatePicker` component is deprecated from version 18.7.0 of Ignite UI for React. For the latest supported Ignite UI for React Date Picker component refer to its respective page under "Scheduling". - -## React XDate Picker Example - -This sample demonstrates how to create `XDatePicker` with option to select a single date. - -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { IgrXDatePicker, IgrXDatePickerModule } from 'igniteui-react-inputs'; - -IgrXDatePickerModule.register(); - -export default class DatePickerOverview extends React.Component { - - constructor(props: any) { - super(props); - this.onDatePickerRef = this.onDatePickerRef.bind(this); - } - - public onDatePickerRef(datePicker: IgrXDatePicker) { - if (!datePicker) return; - - datePicker.value = new Date(Date.now()); - datePicker.showTodayButton = true; - datePicker.showWeekNumbers = true; - } - - public render(): JSX.Element { - return ( -
-
- -
-
- ); - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -## Dependencies - -When installing the XDate Picker component, the core and inputs packages must also be installed. - -```cmd -npm install --save igniteui-react-core -npm install --save igniteui-react-inputs -npm install --save igniteui-react-layouts -``` - -## Component Modules - -The XDate Picker component requires the following modules to be registered: - -```ts -import { IgrXDatePickerModule } from 'igniteui-react-inputs'; - -IgrXDatePickerModule.register(); -``` - -
- -## Usage - -The React XDate Picker editor component consists of three default parts - the text area, a calendar drop-down button, and a clear button. These areas are described below: - -- Text Area: This displays the selected date, stored in the `Value` property of the editor. - -- Calendar: Clicking the calendar button will open the calendar drop-down of the XDate Picker. The calendar will open to show the month of the currently selected `Value`, if there is one. If a `Value` is not specified, the calendar will show the month corresponding to the current date. The month at the top can be clicked to show a list of months, and the same applies for the year. There are also arrow buttons to the left and right of the month and year visualization that will increment and decrement the shown month chronologically. - -- Clear Button: The 'x' icon will clear the current value. - -| Property | Type | Description | -| ---------|------|------------ | -| `IconColor` | string | Changes the color of the calendar button. | -| `AllowTextInput` | bool | The **xdate** picker's value can be typed-in and modified by toggling this property to true. | -| `DateFormat` | enum | Defaults to DateShort e.g. 'mm/dd/yyyy'. When set to DateLong, the date displayed in the editor will appear as e.g. Wednesday, April 14, 2021. | -| `FirstDayOfWeek` | enum | Defaults to Sunday. A given day of the week will be used as the first day in each weekly row of the calendar, e.g. Monday through Sunday. | -| `FormatString` | string | When DateShort is used, the date's format can be configured e.g. 'dd/mm/yyyy'. Note, if the `DateFormat`'s DateLong and `FormatString` are set then the `DateFormat` is ignored. | -| `Label` | string | Displays custom text above the date in the top-left corner of the XDate Picker. | -| `MinDate` | DateTime | Restricts earlier dates from being selected or viewed. | -| `MaxDate` | DateTime | Restricts later dates from being selected or viewed. | -| `Placeholder` | string | A custom string to be displayed when the value within the edit portion of the calendar is cleared. | -| `ShowClearButton` | bool | Defaults to true, the clear button is directly to the left of the calendar button, visualized by an X. When clicked, it will clear the `Value` of the XDate Picker. The clear button's visibility can be toggled on and off. | -| `ShowTodayButton`| bool | The today is directly below the dates when the calendar is opened. When clicked, it will select the current date. The today button's visibility can be toggled on and off. | -| `ShowWeekNumbers` | bool | Week numbers can be displayed as a number, at the left of every row of dates, in the drop down portion of the XDate Picker. The week number's visibility can be toggled on and off. | -| `FirstWeekOfYear` | enum | Configures the start of the week numbers for the entire year. Can be set to FirstDay, FirstFourDayWeek, FirstFullWeek. | -| `OpenOnFocus` | bool | By default, the dropdown portion of the XDate Picker is opened on single click, forcing the user to click the calendar button to drop down the calendar. | -| `Value` | date | Sets the value of the XDate Picker and selects it in the dropdown calendar. | - -Users can also customize the XDate Picker's font by using the various text properties of the control. They are: `TextColor`, `TextFontFamily`, `TextFontSize`, `TextFontStyle`, and `TextFontWeight`. - -### Editing - -The following example demonstrates how to enable editing in the `XDatePicker`. - -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; // styles shared between all samples - -import { IgrXDatePicker, IgrXDatePickerModule } from 'igniteui-react-inputs'; - -IgrXDatePickerModule.register(); - -export default class DatePickerEditing extends React.Component { - - constructor(props: any) { - super(props); - this.onDatePickerRef = this.onDatePickerRef.bind(this); - } - - public onDatePickerRef(datePicker: IgrXDatePicker){ - - if(!datePicker) return; - - datePicker.value = new Date(Date.now()); - datePicker.allowTextInput = true; - } - - public render(): JSX.Element { - return ( -
-
- -
-
- ); - } -} - -root.render(); -``` - - -
- -### Date Limits - -The following example demonstrates how to restrict selected dates in the `XDatePicker`. - -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; // styles shared between all samples - - -import { IgrXDatePicker, IgrXDatePickerModule } from 'igniteui-react-inputs'; - -IgrXDatePickerModule.register(); - -export default class DatePickerDateLimits extends React.Component { - - public datePicker: IgrXDatePicker; - - constructor(props: any) { - super(props); - this.onDatePickerRef = this.onDatePickerRef.bind(this); - this.state = { minDate: new Date().toLocaleString(), maxDate: new Date().toLocaleString() } - } - - public onDatePickerRef(datePicker: IgrXDatePicker){ - if (!datePicker) { return; } - - this.datePicker = datePicker; - datePicker.value = new Date(Date.now()); - let year = datePicker.value.getFullYear(); - let month = datePicker.value.getMonth(); - let lastDayOfMonth = new Date(year, month + 1, 0); - this.datePicker.minDate = new Date(year, month, 1); - this.datePicker.maxDate = lastDayOfMonth; - this.datePicker.allowTextInput = false; - - this.setState({ minDate: new Date(year, month, 1), maxDate: lastDayOfMonth }); - } - - public render(): JSX.Element { - return ( -
-
- - -
-
- - -
-
- ); - } -} - -root.render(); -``` - - -
- -### Date Formats - -The following example demonstrates how apply a long date in the `XDatePicker`. - -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; // styles shared between all samples - -import { IgrXDatePicker, IgrXDatePickerModule, DateFormats } from 'igniteui-react-inputs'; - -IgrXDatePickerModule.register(); - -export default class DatePickerFormat extends React.Component { - - constructor(props: any) { - super(props); - this.onDatePickerRef = this.onDatePickerRef.bind(this); - this.state = { dateFormat: DateFormats.DateLong } - } - - public onDatePickerRef(datePicker: IgrXDatePicker){ - - if(!datePicker) return; - - datePicker.value = new Date(Date.now()); - datePicker.dateFormat = this.state.dateFormat; - datePicker.allowTextInput = false; - } - - public render(): JSX.Element { - return ( -
-
- Date Formats: - -
-
- -
-
- ); - } - - public ondateFormatChanged = (e: any) =>{ - const dateFormatMode = e.target.value.toString(); - this.setState({dateFormat: dateFormatMode}); - } -} - -root.render(); -``` - - -
- -### Date Ranges - -The following example demonstrates how combine multiple `XDatePicker` controls. - -```css -.dateRanges { - display: flex; -} - -.caption { - align-self: center; - margin-left: 25px; - margin-right: 10px; - margin-top: 8px; -} -``` -```tsx -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import "./date-picker-range.css"; -import { IgrXDatePicker, IgrXDatePickerModule, IgrSelectedValueChangedEventArgs } from 'igniteui-react-inputs'; - -IgrXDatePickerModule.register(); - -export default class DatePickerRange extends React.Component { - - public fromDatePickerRef: IgrXDatePicker; - public toDatePickerRef: IgrXDatePicker; - - constructor(props: any) { - super(props); - this.onFromDatePickerRef = this.onFromDatePickerRef.bind(this); - this.onToDatePickerRef = this.onToDatePickerRef.bind(this); - this.fromDateChanged = this.fromDateChanged.bind(this); - this.toDateChanged = this.toDateChanged.bind(this); - } - - public render(): JSX.Element { - return ( -
-
- - - - -
-
- ); - } - - public onFromDatePickerRef(picker: IgrXDatePicker) { - this.fromDatePickerRef = picker; - if (!picker) return; - - picker.value = new Date(Date.now()); - picker.allowTextInput = false; - } - - public onToDatePickerRef(picker: IgrXDatePicker) { - this.toDatePickerRef = picker; - if (!picker) return; - - picker.value = new Date(Date.now()); - picker.allowTextInput = false; - } - - public fromDateChanged(s: IgrXDatePicker, e: IgrSelectedValueChangedEventArgs) { - let newDate = e.newValue; - if (this.toDatePickerRef != null && newDate > this.toDatePickerRef.value) { - this.toDatePickerRef.value = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() + 1); - } - } - - public toDateChanged(s: IgrXDatePicker, e: IgrSelectedValueChangedEventArgs) { - let newDate = e.newValue; - if (this.fromDatePickerRef != null && newDate < this.fromDatePickerRef.value) { - this.fromDatePickerRef.value = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate() - 1); - } - } -} - -// rendering above class to the React DOM -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); -``` - - -
- -## API References - -The following is a list of API members mentioned in the above sections: - -- `XDatePicker` -- `IconColor` -- `AllowTextInput` -- `DateFormat` -- `FirstDayOfWeek` -- `FormatString` -- `Label` -- `MinDate` -- `MaxDate` -- `Placeholder` -- `ShowClearButton` -- `ShowTodayButton` -- `ShowWeekNumbers` -- `FirstWeekOfYear` -- `OpenOnFocus` -- `Value` -- `TextColor` -- `TextFontFamily` -- `TextFontSize` -- `TextFontStyle` -- `TextFontWeight` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/zoomslider-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/zoomslider-overview.md index f5b74489f..085e3a3ad 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/zoomslider-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/zoomslider-overview.md @@ -763,7 +763,6 @@ const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -
## Usage diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/accordion.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/accordion.md index 2a3c4c98a..65d62ed8b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/accordion.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/accordion.md @@ -44,7 +44,6 @@ igc-expansion-panel { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Getting Started with Web Components Accordion @@ -162,7 +161,6 @@ igc-rating { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Nested Web Components Accordions Scenario @@ -193,7 +191,6 @@ igc-expansion-panel { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Keyboard Navigation diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/ai-assisted-development-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/ai-assisted-development-overview.md index d6290cea0..6b731116d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/ai-assisted-development-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/ai-assisted-development-overview.md @@ -1,30 +1,109 @@ --- title: AI-Assisted Development with Ignite UI - Ignite UI for Web Components -_description: Ignite UI provides Agent Skills, the Ignite UI CLI MCP server, and the Theming MCP server to ground AI coding assistants in correct component APIs, import paths, and design tokens across Angular, React, and Web Components. -_keywords: Web Components, Ignite UI for Web Components, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor +_description: Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command — npx igniteui-cli ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs. +_keywords: Web Components, Ignite UI for Web Components, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config _language: en _license: MIT _canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" +last_updated: "2026-05-03" namespace: Infragistics.Controls mentionedTypes: [] _tocName: Agent Workflow --- + + # AI-Assisted Development with Ignite UI -Ignite UI for Angular, React, and Web Components provides a three-part AI toolchain - Agent Skills, the Ignite UI CLI MCP server, and the Ignite UI Theming MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server exposes the Ignite UI Theming Engine as queryable agent context. All three components work with GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant. +Ignite UI for Web Components provides a complete AI toolchain - Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server and the MAKER MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server (`@igniteui/mcp-server`) exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server (`igniteui-theming`) exposes the Ignite UI Theming Engine as queryable agent context. The MAKER MCP (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. Skills, CLI MCP and Theming MCP - all three are configured by a single command: `npx igniteui-cli ai-config` + +The MCP servers and Agent Skills serve different purposes and have different prerequisites: + +| Component | What it provides | Requires Ignite UI installed? | +| -------------------- | -------------------------------------------------------------- | ----------------------------- | +| Ignite UI MCP server | Documentation queries, API reference, scaffolding tools | No | +| Theming MCP server | Design tokens, palette tools, WCAG contrast validation | No | +| Agent Skills | Project-level instruction packages for correct component usage | Yes | + +You can start evaluating Ignite UI AI assistance with the MCP servers alone - Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages. + +The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts. + +## Configure the AI Toolchain + +Run this command from the root of your existing Angular, React, Blazor, or Web Components project. It configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. Existing files are only updated if their content has changed. + +```bash +npx igniteui-cli ai-config +``` + +> [!IMPORTANT] +> Without a version pin, `npx` may pull an older CLI version that does not recognize the `ai-config` subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x. + +After the command finishes, start the MCP servers in your AI client. The servers are configured but not yet running - the client needs to launch each server before its tools are available to the agent. + +### What to Expect + +If Ignite UI is **not** installed in the project: + +``` +Ignite UI MCP servers configured in .vscode/mcp.json +No AI skill files found. Make sure packages are installed (npm install) and your Ignite UI packages are up-to-date. +``` + +The MCP servers are ready to use. Skills will be added automatically the next time you run `ai-config` after installing Ignite UI. + +If Ignite UI **is** installed in the project: + +``` +Ignite UI MCP servers configured in .vscode/mcp.json +Agent Skills copied to .claude/skills/ +``` + +Both the MCP servers and Skills are configured. + +### Start the Servers + +**VS Code with GitHub Copilot:** -The AI toolchain does not currently support Blazor in the CLI MCP and Agent Skills layers - Blazor coverage is provided by the Theming MCP only. The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts. +Open `.vscode/mcp.json`. VS Code displays an inline **Start** button above each server entry. Click **Start** for both `igniteui` and `igniteui-theming`. Once started, VS Code shows the available tool count next to each server (for example, _"13 tools | 1 prompt"_). Alternatively, run **MCP: List Servers** from the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`), select each server, and choose **Start**. + +**Cursor:** + +Open **Settings → MCP**, locate the `igniteui` and `igniteui-theming` entries, and toggle each one on. Cursor starts each server immediately and displays its tool count. + +**Claude Code:** + +Run `claude mcp list` to confirm both servers are registered. Claude Code starts MCP servers automatically when their tools are first invoked - no manual start step is required. + +**JetBrains AI Assistant:** + +Open **Settings → Tools → AI Assistant → Model Context Protocol (MCP)**. Click the play icon next to each server entry to start it. + +**Claude Desktop:** + +Quit and relaunch Claude Desktop. The servers start automatically on launch. + +### Install Ignite UI and Add Skills Later + +If you ran `ai-config` without Ignite UI installed and want to add Skills, install the Ignite UI package for your framework and re-run the command: + +```bash +npm install igniteui-webcomponents +npx igniteui-cli@latest ai-config +``` + +The command detects that Skills are now available and copies them. The MCP server entries in `.vscode/mcp.json` are left unchanged (already up-to-date) ## The AI Toolchain at a Glance Ignite UI's AI toolchain consists of three independently usable layers. Each layer can be enabled on its own; they are designed to work together. -| Layer | What it provides | Owner | Frameworks | -| --- | --- | --- | --- | -| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor | -| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components | -| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS variable generation, theming queries via MCP | Infragistics | Angular, React, Web Components, Blazor | +| Layer | What it provides | Owner | Frameworks | +| --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- | +| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor | +| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components, Blazor | +| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS custom property generation, WCAG AA contrast validation | Infragistics | Angular, React, Web Components, Blazor | The CLI MCP server and Theming MCP server are both started through `npx` and connect to any MCP-compatible client through STDIO transport. Agent Skills are local files placed in your project that the AI client reads from disk. @@ -38,17 +117,17 @@ For full setup instructions and IDE wiring, see [Agent Skills](skills.md). ## CLI MCP Server -The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session. +The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, Blazor or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session. -The CLI MCP server starts via `npx` without a global install: +The CLI MCP server is configured via `npx` without a global install: ```bash -npx -y igniteui-cli mcp +npx igniteui-cli ai-config ``` The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see the CLI MCP setup guides below. -The CLI MCP server does not support Blazor. It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. +It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. ## Theming MCP Server @@ -68,20 +147,32 @@ For configuration details, see [Theming MCP](theming-mcp.md). The CLI MCP server and Theming MCP server work with any editor or AI client that supports MCP with STDIO transport. -| Client | Configuration method | -| --- | --- | -| VS Code with GitHub Copilot | `.vscode/mcp.json` | -| Cursor | `.cursor/mcp.json` | -| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | -| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | -| Claude Code | `.mcp.json` or the Claude Code MCP CLI command | -| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** | +| Client | Configuration method | +| --------------------------- | ----------------------------------------------------------------- | +| VS Code with GitHub Copilot | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` or the Claude Code MCP CLI command | +| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)*- | Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings. -## Set Up the AI Toolchain +### Quick Setup + +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. + +**Using the Ignite UI CLI:** + +```bash +npx igniteui-cli ai-config +``` + +If you have the Ignite UI CLI installed globally, use the shorter form: -Setting up the Ignite UI AI toolchain takes three steps: load Agent Skills for your framework, connect the CLI MCP server, and optionally connect the Theming MCP server. All three steps are independent and can be done in any order. +```bash +ig ai-config +``` ### Step 1 - Load Agent Skills @@ -140,10 +231,6 @@ For configuration details and theming workflows, see [Theming MCP](theming-mcp.m ## Additional Resources -- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md) - - - - [Agent Skills](./skills.md) - [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/area-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/area-chart.md index c0743ca1a..6d179de72 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/area-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/area-chart.md @@ -50,7 +50,6 @@ export class CountryRenewableElectricity extends Array
## Area Chart Recommendations @@ -122,7 +121,6 @@ export class CountryRenewableElectricity extends Array
## Web Components Area Chart with Multiple Series @@ -162,7 +160,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Area Chart Styling @@ -202,7 +199,6 @@ export class CountryRenewableElectricity extends Array ## Advanced Types of Area Charts @@ -246,7 +242,6 @@ export class CountryRenewableElectricity extends Array The following sections explain more advanced types of Web Components Area Charts that can be created using the [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html) control instead of [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) control with simplified API. @@ -289,7 +284,6 @@ export class TemperatureRangeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked Area Chart @@ -332,7 +326,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked 100% Area Chart @@ -375,7 +368,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked Spline Area Chart @@ -418,7 +410,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked 100% Spline Area Chart @@ -461,7 +452,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Radial Area Chart @@ -500,7 +490,6 @@ export class FootballPlayerStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Polar Area Chart @@ -539,7 +528,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Polar Spline Area Chart @@ -578,7 +566,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/avatar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/avatar.md index 02e3dedfe..18db5003a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/avatar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/avatar.md @@ -18,7 +18,6 @@ The Ignite UI for Web Components Avatar helps to display initials, images, or ic /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -70,7 +69,6 @@ If the [`initials`](https://www.infragistics.com/products/ignite-ui-web-componen /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Image The avatar can also display an image when the [`src`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcavatarcomponent.html#src) attribute is assigned a valid URL to a static asset. In that case the [`initials`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcavatarcomponent.html#initials) value will be ignored and children elements will not be rendered. @@ -89,7 +87,6 @@ The avatar can also display an image when the [`src`](https://www.infragistics.c /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Shape The avatar supports three shapes - `circle`, `rounded`, and `square`. The default shape of the avatar is `square` and it can be changed via the `shape` attribute. @@ -99,7 +96,6 @@ The avatar supports three shapes - `circle`, `rounded`, and `square`. The defaul /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Size Apart from the shape, the size of the avatar can also be changed by utilizing the `--ig-size` CSS variable. The supported sizes are `small` (default), `medium`, and `large`. The following code snippet shows how to use a different component size: @@ -133,7 +129,6 @@ igc-avatar { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Styling The [`IgcAvatarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcavatarcomponent.html) component exposes several CSS parts, giving you full control over its style: @@ -167,7 +162,6 @@ igc-avatar::part(base) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md index e3d63935c..7409ca336 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md @@ -18,7 +18,6 @@ The Ignite UI for Web Components Badge is a component used in conjunction with a /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -67,7 +66,6 @@ The Ignite UI for Web Components badge supports several pre-defined stylistic va /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Shape The badge component supports `rounded`(default) and `square` shapes. These values can be assigned to the [`shape`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbadgecomponent.html#shape) attribute. @@ -81,7 +79,6 @@ The badge component supports `rounded`(default) and `square` shapes. These value /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Dot The Ignite UI for Web Components badge component can also render as a minimal dot indicator for notifications by setting its `dot` attribute. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.). @@ -95,7 +92,6 @@ The Ignite UI for Web Components badge component can also render as a minimal do /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcBadgeComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbadgecomponent.html) component exposes a `base` CSS part that can be used to change all of its style properties. @@ -118,7 +114,6 @@ igc-badge::part(base) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/banner.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/banner.md index 241aedee3..1511eb713 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/banner.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/banner.md @@ -52,7 +52,6 @@ img { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage First, you need to install the Ignite UI for Web Components by running the following command: @@ -182,7 +181,6 @@ img { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Binding to events The banner component emits the `Closing` and `Closed` events when being closed. The `Closing` event is cancelable - it uses the [`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent) interface and the emitted object has its `cancelable` property set to **true**. If we cancel the `Closing` event, the corresponding end action and event will not be triggered - the banner will not be closed and the `Closed` event will not be emitted. @@ -320,7 +318,6 @@ img { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcBannerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbannercomponent.html) component exposes several CSS parts which give you full control over its style: @@ -400,7 +397,6 @@ img { } ``` - ## API References - [`IgcBannerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbannercomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bar-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bar-chart.md index 3884bdea7..beb05e069 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bar-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bar-chart.md @@ -49,7 +49,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Bar Chart Recommendations @@ -140,7 +139,6 @@ export class OnlineShoppingSearches extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Bar Chart with Multiple Series @@ -179,7 +177,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Bar Chart Styling @@ -220,7 +217,6 @@ export class OnlineShoppingSearches extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked Bar Chart @@ -266,7 +262,6 @@ export class EnergyRenewableConsumption extends Array ## Web Components Stacked 100% Bar Chart @@ -310,7 +305,6 @@ export class EnergyRenewableConsumption extends Array ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bubble-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bubble-chart.md index 6799d49b0..120867714 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bubble-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bubble-chart.md @@ -80,12 +80,11 @@ export class CountryStatsEurope extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Bubble Chart with Single Series -You can bind your data to `ItemsSource` property of [`IgcBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html) and map data columns using its [`xMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcscatterbasecomponent.html#xMemberPath), [`yMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcscatterbasecomponent.html#yMemberPath), [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#radiusMemberPath) properties, as shown in the example below: +You can bind your data to `ItemsSource` property of [`IgcBubbleSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html) and map data columns using its [`xMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#xMemberPath), [`yMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#yMemberPath), [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#radiusMemberPath) properties, as shown in the example below: ```typescript export class WorldStatsItem { @@ -137,7 +136,6 @@ export class WorldStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Bubble Chart with Multiple Series @@ -207,12 +205,11 @@ export class CountryStatsEurope extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Bubble Chart Styling -In Web Components Bubble Chart, you can customize shape of bubble markers using [`markerType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcmarkerseriescomponent.html#markerType) property, their size with [`radiusScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#radiusScale) property, and their appearance using [`markerBrush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcmarkerseriescomponent.html#markerBrush), [`markerOutline`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcmarkerseriescomponent.html#markerOutline), [`markerThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcmarkerseriescomponent.html#markerThickness) properties. In addition, you can also color bubble markers based on a data column using [`fillMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#fillMemberPath) and [`fillScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#fillScale) properties. In this example, usage of above properties is demonstrated. +In Web Components Bubble Chart, you can customize shape of bubble markers using [`markerType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#markerType) property, their size with [`radiusScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#radiusScale) property, and their appearance using [`markerBrush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#markerBrush), [`markerOutline`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#markerOutline), [`markerThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#markerThickness) properties. In addition, you can also color bubble markers based on a data column using [`fillMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#fillMemberPath) and [`fillScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#fillScale) properties. In this example, usage of above properties is demonstrated. ```typescript export class WorldStatsItem { @@ -264,7 +261,6 @@ export class WorldStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources @@ -282,11 +278,11 @@ The following table lists API members mentioned in the above sections: - `ItemsSource` - [`fillMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#fillMemberPath) - [`fillScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#fillScale) -- [`markerType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcmarkerseriescomponent.html#markerType) -- [`markerBrush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcmarkerseriescomponent.html#markerBrush) -- [`markerOutline`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcmarkerseriescomponent.html#markerOutline) -- [`markerThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcmarkerseriescomponent.html#markerThickness) +- [`markerType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#markerType) +- [`markerBrush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#markerBrush) +- [`markerOutline`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#markerOutline) +- [`markerThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#markerThickness) - [`radiusScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#radiusScale) - [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#radiusMemberPath) -- [`xMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcscatterbasecomponent.html#xMemberPath) -- [`yMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcscatterbasecomponent.html#yMemberPath) +- [`xMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#xMemberPath) +- [`yMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbubbleseriescomponent.html#yMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bullet-graph.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bullet-graph.md index e6f2ca1b0..9e5747f55 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bullet-graph.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/bullet-graph.md @@ -24,7 +24,6 @@ The following sample demonstrates how setting multiple properties on the same [` /* 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcbulletgraphcomponent.html#transitionDuration) property. @@ -120,7 +119,6 @@ Performance value is the primary measure displayed by the component and it is vi /* 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcbulletgraphcomponent.html#value) appear with a lower opacity. A good example is if [`value`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcbulletgraphcomponent.html#value) is 50 and [`highlightValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcbulletgraphcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcbulletgraphcomponent.html#targetValue) is set to. To enable this first set [`highlightValueDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcbulletgraphcomponent.html#highlightValueDisplayMode) to Overlay and then apply a [`highlightValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcbulletgraphcomponent.html#highlightValue) to something lower than [`value`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcbulletgraphcomponent.html#value). @@ -149,7 +147,6 @@ The bullet graph's performance value can be further modified to show progress re /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Comparative Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state. @@ -184,7 +181,6 @@ The ranges are visual elements that highlight a specified range of values on a s /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. @@ -217,7 +213,6 @@ The tick marks serve as a visual division of the scale into intervals in order t /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Labels The labels indicate the measures on the scale. @@ -241,7 +236,6 @@ The labels indicate the measures on the scale. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Backing The backing element represents background and border of the bullet graph component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. @@ -264,7 +258,6 @@ The backing element represents background and border of the bullet graph compone /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Scale The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using [`isScaleInverted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcbulletgraphcomponent.html#isScaleInverted) property) and all labels will be rendered from right-to-left instead of left-to-right. @@ -288,7 +281,6 @@ The scale is visual element that highlights the full range of values in the gaug /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the bullet graph with all features and visuals enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button-group.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button-group.md index 6635680e9..b36b97b95 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button-group.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button-group.md @@ -25,7 +25,6 @@ igc-ripple { } ``` - ## Usage First, you need to install the Ignite UI for Web Components by running the following command: @@ -91,7 +90,6 @@ igc-ripple { } ``` - ### Selection In order to configure the Ignite UI for Web Components [`IgcButtonGroupComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttongroupcomponent.html) selection, you could use its [`selection`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttongroupcomponent.html#selection) property. This property accepts the following three modes: @@ -123,7 +121,6 @@ igc-ripple { } ``` - A [`IgcToggleButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctogglebuttoncomponent.html) could be marked as selected via its [`selected`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctogglebuttoncomponent.html#selected) attribute or through the [`IgcButtonGroupComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttongroupcomponent.html) [`selectedItems`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttongroupcomponent.html#selectedItems) attribute: ```html @@ -157,7 +154,6 @@ The `--ig-size` CSS custom property can be used to control the size of the butto /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcButtonGroupComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttongroupcomponent.html) component exposes `group` CSS part that allows us to style the button group container. @@ -216,7 +212,6 @@ igc-toggle-button[selected]::part(toggle) { } ``` - ## API Reference - [`IgcButtonGroupComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttongroupcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button.md index 3c555bc5c..030ac905b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/button.md @@ -25,7 +25,6 @@ The Web Components Button Component lets you enable clickable elements that trig /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage First, you need to install the Ignite UI for Web Components by running the following command: @@ -85,7 +84,6 @@ Use the [`variant`](https://www.infragistics.com/products/ignite-ui-web-componen /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Outlined Button All you have to do to create an `outlined` button is to change the value of the [`variant`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html#variant) property: @@ -99,7 +97,6 @@ All you have to do to create an `outlined` button is to change the value of the /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Flat Button Analogically, we can switch to `flat` variant. @@ -113,7 +110,6 @@ Analogically, we can switch to `flat` variant. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Floating Action Button We can create a floating action button by setting the [`variant`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html#variant) property to `fab`: @@ -127,7 +123,6 @@ We can create a floating action button by setting the [`variant`](https://www.in /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Button Sizing Users can change the size of the [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) using the `--ig-size` CSS variable. In the following example, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the button. @@ -180,7 +175,6 @@ The result of implementing the above code should look like the following: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Download Setting the [`download`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html#download) property will prompt the user to save the linked URL instead of navigating to it. @@ -200,7 +194,6 @@ Setting the [`download`](https://www.infragistics.com/products/ignite-ui-web-com /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) exposes three CSS parts which we can use for styling: @@ -233,7 +226,6 @@ igc-button::part(base) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/calendar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/calendar.md index 4c1302de1..1d30cac51 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/calendar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/calendar.md @@ -24,7 +24,6 @@ The following Web Components [`IgcCalendarComponent`](https://www.infragistics.c /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## How To Create a Calendar in Web Components with Ignite UI First, you need to install the Ignite UI for Web Components by running the following command: @@ -62,7 +61,6 @@ Users can choose from three different selection modes - single selection, multip /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Range Selection Following the same approach, we can switch [`selection`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#selection) to range mode: @@ -77,7 +75,6 @@ Following the same approach, we can switch [`selection`](https://www.infragistic /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Active View and Date The Ignite UI for Web Components Calendar component allows you to switch between three different views: days, months and years. The [`activeView`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#activeView) property of the component reflects the current view. By default, the Calendar displays the current date when loaded initially. You could modify this by setting the [`activeDate`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#activeDate) property. The [`activeDate`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#activeDate) property also reflects the changes of the currently visible date made by the end user. @@ -107,7 +104,6 @@ The following sample demonstrates the above configuration: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Localization and Formatting Due to their very nature, localization and formatting are essential to any calendar. In the Ignite UI for Web Components [`IgcCalendarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html) those are controlled and customized through the following properties - [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#locale), [`formatOptions`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#formatOptions), [`weekStart`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#weekStart). @@ -154,7 +150,6 @@ If everything went well, we should now have a Calendar with customized display, /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Disabled dates In some cases you would want to have disabled dates in the Calendar which can't be selected by the end user. This functionality is achieved by using the [`disabledDates`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#disabledDates) property. The [`disabledDates`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#disabledDates) property is an array of [`DateRangeDescriptor`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/daterangedescriptor.html) objects. Each descriptor has a `Type` and optionally a [`dateRange`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/daterangedescriptor.html#dateRange) which is an array of `Date` objects. @@ -187,7 +182,6 @@ These configurations should have the following result: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Special dates The [`specialDates`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#specialDates) property is using almost the same configuration principles as the [`disabledDates`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#disabledDates). The special dates have a highlighted look and feel and unlike the disabled ones can be selected. @@ -211,7 +205,6 @@ The following demo illustrates a Calendar with a vacation request option: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Week numbers You can use the [`showWeekNumbers`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#showWeekNumbers) property to show the week numbers of the Calendar component. You can do this by using its corresponding boolean attribute `show-week-numbers` like this: @@ -227,7 +220,6 @@ The following demo illustrates a Calendar with enabled week numbers: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Multiple Months Using the [`visibleMonths`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#visibleMonths) property, you can display more than one month when the Calendar is in `days` view. When multiple months are displayed, you can configure whether you want to stack them vertically or horizontally by using the [`orientation`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#orientation) property. By default, the [`orientation`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html#orientation) property is set to `horizontal`. @@ -245,7 +237,6 @@ The following sample demonstrates the multiple months configuration: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Size You could control the size and spacing of the calendar inner elements using the `--ig-size` CSS variable. The default size of the component is large. @@ -255,7 +246,6 @@ You could control the size and spacing of the calendar inner elements using the /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Events The Calendar component emits the `Change` event when the selected dates are changed by the end user. You can subscribe to the event like this: @@ -423,7 +413,6 @@ igc-calendar::part(navigation-button):focus { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcCalendarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccalendarcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/card.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/card.md index 241dcb0a3..731e08106 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/card.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/card.md @@ -24,7 +24,6 @@ The Ignite UI for Web Components Card displays text, images, icons, and buttons /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -195,7 +194,6 @@ If everything went well, our card should look like this: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Alternative layouts You can get even more creative with the layout of the [`IgcCardComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccardcomponent.html). @@ -266,7 +264,6 @@ Below is an example showing how you can create a semi-horizontal card, where we /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Card Actions The card actions area allows additional configuration to what we have already mentioned. @@ -352,7 +349,6 @@ igc-icon-button+igc-icon-button { } ``` - ### Summary In this article we covered a lot of ground with the card component. We created a simple card and added some images to make it a bit more appealing. We used some additional Web Components inside our card, like avatars, buttons and icons, to enrich the experience and add some functionality. And finally, we changed the card's appearance by changing the major colors of the building blocks. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/carousel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/carousel.md index d8d0e0d6e..b70e4aacb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/carousel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/carousel.md @@ -50,7 +50,6 @@ igc-carousel-slide::part(base) { } ``` - ## Usage First, you need to install the Ignite UI for Web Components by running the following command: @@ -246,7 +245,6 @@ igc-carousel-slide div * { } ``` - ## Animations Animated slide transitions provide the end-users a nice experience when interacting with the carousel. @@ -318,7 +316,6 @@ igc-card-header { } ``` - ## Navigation Transition and navigation are the most important carousel features. @@ -436,7 +433,6 @@ igc-carousel::part(indicators) { } ``` - ## Accessibility ### WAI-ARIA Roles, States, and Properties diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-animations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-animations.md index 121b6b8d2..d2fdcae69 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-animations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-animations.md @@ -24,7 +24,6 @@ The following example depicts a [Line Chart](../types/line-chart.md) with an ani /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-annotations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-annotations.md index b42bbf554..77bca5633 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-annotations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-annotations.md @@ -22,7 +22,6 @@ The following example demonstrates the annotation layers that are available on t /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
Like this sample? Get access to our complete Web Components toolkit and start building your own apps in minutes. Download it for free. @@ -41,7 +40,7 @@ The chart's crosshairs can also be configured to snap to data points by setting You can configure the crosshair layer so that the layer will only display on one specific series, as by default they will target all series in the chart control. To achieve this, set the [`targetSeries`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccrosshairlayercomponent.html#targetSeries) property. -By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the [`brush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#brush) property of the Crosshair Layer. +By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the [`brush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccrosshairlayercomponent.html#brush) property of the Crosshair Layer. The following example shows how to configure the crosshair layer but targeting a single series, setting the type to vertical and styling the brush color. @@ -70,7 +69,6 @@ export class SampleCategoryData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Final Value Layer @@ -112,7 +110,6 @@ export class SampleCategoryData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
```html @@ -175,7 +172,6 @@ export class CountryRenewableElectricity extends Array ```html diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-api.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-api.md index 29cfc50da..73ee99cb6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-api.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-api.md @@ -19,7 +19,7 @@ The Web Components [`IgcCategoryChartComponent`](https://www.infragistics.com/pr | Chart Properties | Axis Properties | Series Properties | |------------------|-----------------|-------------------| -| - [`chartType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#chartType)
- [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#excludedProperties)
- [`includedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#isVerticalZoomEnabled)
- [`crosshairsDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#crosshairsDisplayMode)
- [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#transitionInMode)
- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingBehavior)
- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingMode)
- [`trendLineType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#trendLineType)
| - [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelLocation)
- [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisGap)
- [`xAxisOverlap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisOverlap)
- [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTitle)
- [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMaximumValue) | - [`brushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#brushes)
- [`outlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#outlines)
- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#markerBrushes)
- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#markerOutlines)
- [`markerTypes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#markerTypes)
- [`toolTipType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#toolTipType)




| +| - [`chartType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#chartType)
- [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#excludedProperties)
- [`includedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#isVerticalZoomEnabled)
- [`crosshairsDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#crosshairsDisplayMode)
- [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#transitionInMode)
- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#highlightingBehavior)
- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#highlightingMode)
- [`trendLineType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#trendLineType)
| - [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelLocation)
- [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisGap)
- [`xAxisOverlap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisOverlap)
- [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTitle)
- [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMaximumValue) | - [`brushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#brushes)
- [`outlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#outlines)
- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#markerBrushes)
- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#markerOutlines)
- [`markerTypes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#markerTypes)
- [`toolTipType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#toolTipType)




| ## Web Components Financial Chart API @@ -27,7 +27,7 @@ The Web Components [`IgcFinancialChartComponent`](https://www.infragistics.com/p | Chart Properties | Axis Properties | Series Properties | |------------------|-----------------|-------------------| -| - [`chartType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#chartType)
- [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#excludedProperties)
- [`includedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#isVerticalZoomEnabled)
- [`toolTipType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#toolTipType)
- [`crosshairsDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#crosshairsDisplayMode)
- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingBehavior)
- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingMode)
- [`trendLineType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#trendLineType) | - [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelLocation)
- [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTitle)
- [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisMaximumValue)
- [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisMode)
- [`xAxisMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#xAxisMode) | - [`brushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#brushes)
- [`outlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#outlines)
- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#markerBrushes)
- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#markerOutlines)
- [`markerTypes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#markerTypes)
- [`indicatorTypes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#indicatorTypes)
- [`volumeType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#volumeType)
- [`zoomSliderType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#zoomSliderType)


| +| - [`chartType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#chartType)
- [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#excludedProperties)
- [`includedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#includedProperties)
- [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#isHorizontalZoomEnabled)
- [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#isVerticalZoomEnabled)
- [`toolTipType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#toolTipType)
- [`crosshairsDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#crosshairsDisplayMode)
- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#highlightingBehavior)
- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#highlightingMode)
- [`trendLineType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#trendLineType) | - [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisInterval)
- [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelLocation)
- [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTitle)
- [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisInterval)
- [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelLocation)
- [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTitle)
- [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisMinimumValue)
- [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisMaximumValue)
- [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisMode)
- [`xAxisMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#xAxisMode) | - [`brushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#brushes)
- [`outlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#outlines)
- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#markerBrushes)
- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#markerOutlines)
- [`markerTypes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#markerTypes)
- [`indicatorTypes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#indicatorTypes)
- [`volumeType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#volumeType)
- [`zoomSliderType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#zoomSliderType)


| ## Web Components Data Chart API @@ -85,22 +85,22 @@ The Web Components [`IgcDoughnutChartComponent`](https://www.infragistics.com/pr The Web Components [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) has the following API members: - [`chartType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#chartType) -- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingBehavior) -- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryThreshold) -- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryType) -- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#selectionMode) -- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#selectionBehavior) +- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#highlightingBehavior) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#selectionMode) +- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#selectionBehavior) ## Web Components Pie Chart API The Web Components [`IgcPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html) has the following API members: -- [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#legendItemBadgeTemplate) -- [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#legendItemTemplate) -- [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#legendLabelMemberPath) -- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryThreshold) -- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryType) -- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#selectionMode) +- [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#legendItemBadgeTemplate) +- [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#legendItemTemplate) +- [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#legendLabelMemberPath) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#selectionMode) ## Web Components Sparkline Chart API diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-gridlines.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-gridlines.md index 0dd7329a1..f329b6e9e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-gridlines.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-gridlines.md @@ -57,27 +57,26 @@ export class CountryRenewableElectricity extends Array ## Web Components Axis Gridlines Properties Setting the axis interval property specifies how often major gridlines and axis labels are rendered on an axis. Similarly, the axis minor interval property specifies how frequent minor gridlines are rendered on an axis. -In order to display minor gridlines that correspond to minor interval, you need to set [`xAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMinorStroke) and [`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMinorStrokeThickness) properties on the axis. This is because minor gridlines do not have a default color or thickness and they will not be displayed without first assigning them. +In order to display minor gridlines that correspond to minor interval, you need to set [`xAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorStroke) and [`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorStrokeThickness) properties on the axis. This is because minor gridlines do not have a default color or thickness and they will not be displayed without first assigning them. You can customize how the gridlines are displayed in your Web Components chart by setting the following properties: | Axis Visuals | Type | Property Names | Description | | -----------------------|---------|--------------------------------------------------------------|---------------- | -| Major Stroke Color | string | [`xAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMajorStroke)
[`yAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMajorStroke) | These properties set the color of axis major gridlines. | -| Minor Stroke Color | string | [`xAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMinorStroke)
[`yAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMinorStroke) | These properties set the color of axis minor gridlines. | -| Major Stroke Thickness | number | [`xAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMajorStrokeThickness)
[`yAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMajorStrokeThickness) | These properties set the thickness in pixels of the axis major gridlines. | -| Minor Stroke Thickness | number | [`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMinorStrokeThickness)
[`yAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMinorStrokeThickness) | These properties set the thickness in pixels of the axis minor gridlines. | +| Major Stroke Color | string | [`xAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMajorStroke)
[`yAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMajorStroke) | These properties set the color of axis major gridlines. | +| Minor Stroke Color | string | [`xAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorStroke)
[`yAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinorStroke) | These properties set the color of axis minor gridlines. | +| Major Stroke Thickness | number | [`xAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMajorStrokeThickness)
[`yAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMajorStrokeThickness) | These properties set the thickness in pixels of the axis major gridlines. | +| Minor Stroke Thickness | number | [`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorStrokeThickness)
[`yAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinorStrokeThickness) | These properties set the thickness in pixels of the axis minor gridlines. | | Major Interval | number | [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisInterval)
[`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisInterval) | These properties set interval between axis major gridlines and labels. | | Minor Interval | number | [`xAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorInterval)
[`yAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisMinorInterval) | These properties set interval between axis minor gridlines, if used. | -| Axis Line Stroke Color | string | [`xAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisStroke)
[`yAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisStroke) | These properties set the color of an axis line. | -| Axis Stroke Thickness | number | [`xAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisStrokeThickness)
[`yAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisStrokeThickness) | These properties set the thickness in pixels of an axis line. | +| Axis Line Stroke Color | string | [`xAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisStroke)
[`yAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisStroke) | These properties set the color of an axis line. | +| Axis Stroke Thickness | number | [`xAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisStrokeThickness)
[`yAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisStrokeThickness) | These properties set the thickness in pixels of an axis line. | Regarding the Major and Minor Interval in the table above, it is important to note that the major interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval. The minor interval gridlines are always rendered between the major gridlines, and as such, the minor interval properties should always be set to something much smaller (usually 2-5 times smaller) than the value of the major Interval properties. @@ -122,8 +121,7 @@ export class CountryRenewableElectricity extends Array ## Web Components Axis Tickmarks Example -Axis tick marks are enabled by setting the [`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTickLength) and [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTickLength) properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks. +Axis tick marks are enabled by setting the [`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTickLength) and [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTickLength) properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks. -Tick marks are always extend from the axis line and point to the direction of the labels. Labels are offset by the value of the length of tickmarks to avoid overlapping. For example, with the [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTickLength) property is set to 5, axis labels will be shifted left by that amount. +Tick marks are always extend from the axis line and point to the direction of the labels. Labels are offset by the value of the length of tickmarks to avoid overlapping. For example, with the [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTickLength) property is set to 5, axis labels will be shifted left by that amount. The following example demonstrates how to customize the tickmarks by setting the properties above: @@ -222,7 +219,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Axis Tickmarks Properties @@ -231,9 +227,9 @@ You can customize how the axis tickmarks are displayed in our Web Components cha | Axis Visuals | Type | Property Names | Description | | -----------------------|---------|------------------------------------------------------------|------------------------- | -| Tick Stroke Color | string | [`xAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTickStroke)
[`yAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTickStroke) | These properties set the color of the tickmarks. | -| Tick Stroke Thickness | number | [`xAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTickStrokeThickness)
[`yAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTickStrokeThickness) | These properties set the thickness of the axis tick marks. | -| Tick Stroke Length | number | [`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTickLength)
[`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTickLength) | These properties set the length of the axis tick marks. | +| Tick Stroke Color | string | [`xAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTickStroke)
[`yAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTickStroke) | These properties set the color of the tickmarks. | +| Tick Stroke Thickness | number | [`xAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTickStrokeThickness)
[`yAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTickStrokeThickness) | These properties set the thickness of the axis tick marks. | +| Tick Stroke Length | number | [`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTickLength)
[`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTickLength) | These properties set the length of the axis tick marks. | ## Additional Resources @@ -248,23 +244,23 @@ The following is a list of API members mentioned in the above sections: | [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html) | [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) or [`IgcFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html) | | -------------------------------------------------- | ----------------------------------- | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericaxisbasecomponent.html#interval) | [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisInterval) (Major Interval) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericaxisbasecomponent.html#interval) | [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisInterval) (Major Interval) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`minorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericaxisbasecomponent.html#minorInterval) | [`xAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorInterval) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`minorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericaxisbasecomponent.html#minorInterval) | [`yAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinorInterval) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`majorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#majorStroke) | [`xAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMajorStroke) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`majorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#majorStroke) | [`yAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMajorStroke) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`majorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#majorStrokeThickness) | [`xAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMajorStrokeThickness) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`majorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#majorStrokeThickness) | [`yAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMajorStrokeThickness) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`minorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#minorStrokeThickness) | [`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMinorStrokeThickness) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`minorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#minorStrokeThickness) | [`yAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMinorStrokeThickness) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`strokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#strokeThickness) | [`xAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisStrokeThickness) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`strokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#strokeThickness) | [`yAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisStrokeThickness) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`stroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#stroke) | [`xAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisStroke) (Axis Line Color) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`stroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#stroke) | [`yAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisStroke) (Axis Line Color) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`tickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#tickLength) | [`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTickLength) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`tickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#tickLength) | [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTickLength) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`tickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#tickStroke) | [`xAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTickStroke) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`tickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#tickStroke) | [`yAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTickStroke) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`strip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#strip) | [`xAxisStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisStrip) (Space between Major Gridlines) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`strip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#strip) | [`yAxisStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisStrip) (Space between Major Gridlines) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#interval) | [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisInterval) (Major Interval) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#interval) | [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisInterval) (Major Interval) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`minorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#minorInterval) | [`xAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorInterval) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`minorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#minorInterval) | [`yAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinorInterval) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`majorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#majorStroke) | [`xAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMajorStroke) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`majorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#majorStroke) | [`yAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMajorStroke) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`majorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#majorStrokeThickness) | [`xAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMajorStrokeThickness) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`majorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#majorStrokeThickness) | [`yAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMajorStrokeThickness) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`minorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#minorStrokeThickness) | [`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorStrokeThickness) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`minorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#minorStrokeThickness) | [`yAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinorStrokeThickness) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`strokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#strokeThickness) | [`xAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisStrokeThickness) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`strokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#strokeThickness) | [`yAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisStrokeThickness) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`stroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#stroke) | [`xAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisStroke) (Axis Line Color) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`stroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#stroke) | [`yAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisStroke) (Axis Line Color) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`tickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#tickLength) | [`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTickLength) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`tickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#tickLength) | [`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTickLength) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`tickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#tickStroke) | [`xAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTickStroke) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`tickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#tickStroke) | [`yAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTickStroke) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`strip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#strip) | [`xAxisStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisStrip) (Space between Major Gridlines) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`strip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html#strip) | [`yAxisStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisStrip) (Space between Major Gridlines) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-layouts.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-layouts.md index 995ee107b..53f87ce3a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-layouts.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-layouts.md @@ -17,9 +17,9 @@ All Ignite UI for Web Components charts include options to configure many axis l ## Axis Locations Example -For all axes, you can specify axis location in relationship to chart plot area. The [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelLocation) property of the Web Components charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelLocation) property to position y-axis on left side or right side of plot area. +For all axes, you can specify axis location in relationship to chart plot area. The [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelLocation) property of the Web Components charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelLocation) property to position y-axis on left side or right side of plot area. -The following example depicts the amount of renewable electricity produced since 2009, represented by a [Line Chart](../types/line-chart.md). There is a drop-down that lets you configure the [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelLocation) so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area. +The following example depicts the amount of renewable electricity produced since 2009, represented by a [Line Chart](../types/line-chart.md). There is a drop-down that lets you configure the [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelLocation) so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area. ```typescript export class CountryRenewableElectricityItem { @@ -54,7 +54,6 @@ export class CountryRenewableElectricity extends Array ### Axis Crossing Example @@ -148,7 +146,6 @@ The following example shows a Sin and Cos wave represented by a [Scatter Spline /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources @@ -167,14 +164,14 @@ d in the above sections: | ------------------------------------------------------ | ------------------------------- | | `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`crossingAxis`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#crossingAxis) | None | | `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`crossingValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#crossingValue) | None | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`isInverted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#isInverted) | [`xAxisInverted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisInverted) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`isInverted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#isInverted) | [`yAxisInverted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisInverted) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `LabelLocation` | [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelLocation) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `LabelLocation` | [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelLocation) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `LabelHorizontalAlignment` | [`yAxisLabelHorizontalAlignment`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelHorizontalAlignment) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `LabelVerticalAlignment` | [`xAxisLabelVerticalAlignment`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelVerticalAlignment) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `LabelVisibility` | [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelVisibility) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `LabelVisibility` | [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelVisibility) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ [`isInverted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#isInverted) | [`xAxisInverted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisInverted) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`isInverted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#isInverted) | [`yAxisInverted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisInverted) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `LabelLocation` | [`yAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelLocation) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `LabelLocation` | [`xAxisLabelLocation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelLocation) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `LabelHorizontalAlignment` | [`yAxisLabelHorizontalAlignment`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelHorizontalAlignment) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `LabelVerticalAlignment` | [`xAxisLabelVerticalAlignment`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelVerticalAlignment) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `LabelVisibility` | [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelVisibility) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `LabelVisibility` | [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelVisibility) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-options.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-options.md index 4c3473dab..9e7ed03f0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-options.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-options.md @@ -50,7 +50,6 @@ export class CountryRenewableElectricity extends Array ## Axis Labels Example @@ -90,20 +89,19 @@ export class CountryRenewableElectricity extends Array ## Axis Labels Management & Formatting The axes of the chart have the ability to perform an enhanced calculation regarding the amount of space available to the labels of the owning axis. This enhanced calculation allows the axis to optimize the amount of space given to it in order to display more labels for the given axis. -This enhanced calculation is something that you need to opt-in to, which you can do by setting the [`useEnhancedIntervalManagement`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#useEnhancedIntervalManagement) property to true. Then, if you prefer to display as many labels as can fit in the dimensions of the axis without manually setting the [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericaxisbasecomponent.html#interval) property of the axis, you can set the [`enhancedIntervalPreferMoreCategoryLabels`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#enhancedIntervalPreferMoreCategoryLabels) property on the axis to true. +This enhanced calculation is something that you need to opt-in to, which you can do by setting the [`useEnhancedIntervalManagement`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html#useEnhancedIntervalManagement) property to true. Then, if you prefer to display as many labels as can fit in the dimensions of the axis without manually setting the [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html#interval) property of the axis, you can set the [`enhancedIntervalPreferMoreCategoryLabels`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html#enhancedIntervalPreferMoreCategoryLabels) property on the axis to true. The chart also has the ability to consider auto-rotation of the labels if they will not fit in the allotted space as well as the ability to apply an automatic margin to the plot area to ensure the labels can fit. This is something that can be opted into initially by first setting the [`autoMarginAndAngleUpdateMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#autoMarginAndAngleUpdateMode) property on the chart to either `SizeChanging` or `SizeChangingAndZoom`. This will tell the chart when to re-evaluate the auto margin and angle applied to the labels, if desired. After setting the [`autoMarginAndAngleUpdateMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#autoMarginAndAngleUpdateMode), you can set the [`shouldAutoExpandMarginForInitialLabels`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#shouldAutoExpandMarginForInitialLabels) property to true to opt into the automatic margin or set the [`shouldConsiderAutoRotationForInitialLabels`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#autoExpandMarginExtraPadding) and [`autoExpandMarginMaximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#autoExpandMarginMaximumValue) to provide extra space or a maximum possible margin, respectively. -Custom label formats such as [`IgcNumberFormatSpecifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcnumberformatspecifier.html) and [`IgcDateTimeFormatSpecifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcdatetimeformatspecifier.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelFormat) or [`xAxisLabelFormat`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelFormat) need to be set to data item's property name on the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html), eg. `{Date}`. For the [`IgcFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.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 [`IgcNumberFormatSpecifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcnumberformatspecifier.html) and [`IgcDateTimeFormatSpecifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcdatetimeformatspecifier.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelFormat) or [`xAxisLabelFormat`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelFormat) need to be set to data item's property name on the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html), eg. `{Date}`. For the [`IgcFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.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 [`IgcNumberFormatSpecifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcnumberformatspecifier.html) to represent $USD prices for top box office movies in the United States. @@ -139,7 +137,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Axis Range Example @@ -181,7 +178,6 @@ export class CountryRenewableElectricity extends Array ## Axis Modes & Scale @@ -377,7 +373,6 @@ export class StocksUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Axis Gap Example @@ -423,7 +418,6 @@ export class CountryRenewableElectricity extends Array ## Axis Overlap Example @@ -464,7 +458,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources @@ -480,17 +473,17 @@ The following is a list of API members mentioned in the above sections: | [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html) | [`IgcFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html) | [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) | | ------------------------------------------------------ | ---------------------- | ---------------------- | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`maximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericaxisbasecomponent.html#maximumValue) | [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMaximumValue) | [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMaximumValue) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`minimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericaxisbasecomponent.html#minimumValue) | [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinimumValue) | [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinimumValue) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`isLogarithmic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericaxisbasecomponent.html#isLogarithmic) | [`yAxisIsLogarithmic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisIsLogarithmic) | [`yAxisIsLogarithmic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisIsLogarithmic) | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`logarithmBase`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericaxisbasecomponent.html#logarithmBase) | [`yAxisLogarithmBase`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLogarithmBase) | [`yAxisLogarithmBase`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLogarithmBase) | -| `Axes` ➔ [`IgcCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html) ➔ [`gap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryaxisbasecomponent.html#gap) | None | [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisGap) | -| `Axes` ➔ [`IgcCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html) ➔ [`overlap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryaxisbasecomponent.html#overlap) | None | [`xAxisOverlap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisOverlap) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`maximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html#maximumValue) | [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMaximumValue) | [`yAxisMaximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMaximumValue) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`minimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html#minimumValue) | [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinimumValue) | [`yAxisMinimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinimumValue) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`isLogarithmic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html#isLogarithmic) | [`yAxisIsLogarithmic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisIsLogarithmic) | [`yAxisIsLogarithmic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisIsLogarithmic) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ [`logarithmBase`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html#logarithmBase) | [`yAxisLogarithmBase`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLogarithmBase) | [`yAxisLogarithmBase`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLogarithmBase) | +| `Axes` ➔ [`IgcCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html) ➔ [`gap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html#gap) | None | [`xAxisGap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisGap) | +| `Axes` ➔ [`IgcCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html) ➔ [`overlap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html#overlap) | None | [`xAxisOverlap`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisOverlap) | | `Axes` ➔ [`IgcTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimexaxiscomponent.html) | [`xAxisMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#xAxisMode) | None | | `Axes` ➔ [`IgcPercentChangeYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpercentchangeyaxiscomponent.html) | [`yAxisMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisMode) | None | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `labelSettings.angle` | [`yAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelAngle) | [`yAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelAngle) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `labelSettings.angle` | [`xAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelAngle) | [`xAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelAngle) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `labelSettings.angle` | [`yAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelAngle) | [`yAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelAngle) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `labelSettings.angle` | [`xAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelAngle) | [`xAxisLabelAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelAngle) | | `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `labelSettings.textColor` | `YAxisLabelForeground` | `YAxisLabelForeground` | | `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `labelSettings.textColor` | `XAxisLabelForeground` | `XAxisLabelForeground` | -| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `labelSettings.visibility` | [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelVisibility) | [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelVisibility) | -| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `labelSettings.visibility` | [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelVisibility) | [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelVisibility) | +| `Axes` ➔ [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) ➔ `labelSettings.visibility` | [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelVisibility) | [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelVisibility) | +| `Axes` ➔ [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) ➔ `labelSettings.visibility` | [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelVisibility) | [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelVisibility) | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-types.md index 800378b45..c847e33bb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-axis-types.md @@ -22,7 +22,7 @@ The [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-we The [`IgcCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html) treats its data as a sequence of categorical data items. It can display almost any type of data including strings and numbers. If you are plotting numbers on this axis, it is important to keep in mind that this axis is a discrete axis and not continuous. This means that each categorical data item will be placed equidistant from the one before it. The items will also be plotted in the order that they appear in the axis' data source. -The [`IgcCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html) requires you to provide a `DataSource` and a [`label`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#label) in order to plot data with it. It is generally used with the [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) to plot the following type of series: +The [`IgcCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html) requires you to provide a `DataSource` and a [`label`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html#label) in order to plot data with it. It is generally used with the [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) to plot the following type of series: | Category Series | Stacked Series | Financial Series | |------------------|----------------|--------------------| @@ -66,10 +66,9 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Category Y-Axis -The [`IgcCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryyaxiscomponent.html) works very similarly to the [`IgcCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html) described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a `DataSource` and a [`label`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html#label) in order to plot data with it. The [`IgcCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryyaxiscomponent.html) is generally used with the [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) to plot the following type of series: +The [`IgcCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryyaxiscomponent.html) works very similarly to the [`IgcCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html) described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a `DataSource` and a [`label`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html#label) in order to plot data with it. The [`IgcCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryyaxiscomponent.html) is generally used with the [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) to plot the following type of series: - [`IgcBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbarseriescomponent.html) - [`IgcStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcstackedbarseriescomponent.html) @@ -109,7 +108,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Numeric X-Axis The [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) labels depends on the `XMemberPath` property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html). Alternatively, if combined with the [`IgcCategoryXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryxaxiscomponent.html), these labels will be placed corresponding to the `ValueMemberPath` of the [`IgcBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcbarseriescomponent.html), [`IgcStackedBarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcstackedbarseriescomponent.html), and [`IgcStacked100BarSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcstacked100barseriescomponent.html). @@ -187,7 +185,6 @@ export class SampleDensityData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Numeric Y-Axis The [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) labels depends on the `YMemberPath` property of the various [ScatterSeries](../types/scatter-chart.md) that is supports if combined with a [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html). Alternatively, if combined with the [`IgcCategoryYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryyaxiscomponent.html), these labels will be placed corresponding to the `ValueMemberPath` of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using. @@ -261,7 +258,6 @@ export class HealthDataForGermany extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Time X Axis The [`IgcTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimexaxiscomponent.html) treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its `DateTimeMemberPath`. This, along with a `DataSource` is required to plot data with this axis type. @@ -280,7 +276,7 @@ The [`format`](https://www.infragistics.com/products/ignite-ui-web-components/ap #### Intervals in Time X Axis -The [`IgcTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimexaxiscomponent.html) replaces the conventional [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericaxisbasecomponent.html#interval) property of the category and numeric axes with an [`intervals`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimexaxiscomponent.html#intervals) collection of type [`IgcTimeAxisIntervalComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html). Each [`IgcTimeAxisIntervalComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html) added to the collection is responsible for assigning a unique [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#interval), [`range`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#range) and [`intervalType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#intervalType). This can be especially useful for drilling down data from years to milliseconds to provide unique spacing between labels depending on the range of time shown by the chart. A description of these properties is below: +The [`IgcTimeXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimexaxiscomponent.html) replaces the conventional [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html#interval) property of the category and numeric axes with an [`intervals`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimexaxiscomponent.html#intervals) collection of type [`IgcTimeAxisIntervalComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html). Each [`IgcTimeAxisIntervalComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html) added to the collection is responsible for assigning a unique [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#interval), [`range`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#range) and [`intervalType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#intervalType). This can be especially useful for drilling down data from years to milliseconds to provide unique spacing between labels depending on the range of time shown by the chart. A description of these properties is below: - [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#interval): This specifies the interval to use. This is tied to the [`intervalType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#intervalType) property. For example, if the [`intervalType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#intervalType) is set to `Days`, then the numeric value specified in [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#interval) will be in days. - [`range`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctimeaxisintervalcomponent.html#range): This specifies the visible range at which the axis interval will switch to a different interval. For example, if you have two TimeAxisInterval with a range set to 10 days and another set to 5 hours, as soon as the visible range in the axis becomes less than 10 days it will switch to the interval whose range is 5 hours. @@ -330,7 +326,6 @@ export class FootballPlayerStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Proportional Category Angle Axis The [`IgcProportionalCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcproportionalcategoryangleaxiscomponent.html) treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers. @@ -341,7 +336,6 @@ The following example demonstrates usage of the [`IgcProportionalCategoryAngleAx - ### Numeric Angle Axis The [`IgcNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericangleaxiscomponent.html) treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the [`IgcNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericangleaxiscomponent.html) varies according to the value in the data column mapped using the `RadiusMemberPath` property of the [Polar Series](../types/polar-chart.md) object or the `ValueMemberPath` property of the [Radial Series](../types/radial-chart.md) object. @@ -382,7 +376,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Numeric Radius Axis The [`IgcNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericradiusaxiscomponent.html) treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the `AngleMemberPath` property of the corresponding polar series. @@ -423,7 +416,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Additional Resources You can find more information about related chart features in these topics: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-aggregations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-aggregations.md index 602efbde2..ab0da4cc6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-aggregations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-aggregations.md @@ -61,7 +61,6 @@ export class SalesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ```html { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - Like this sample? Get access to our complete Web Components toolkit and start building your own apps in minutes. Download it for free. ## Web Components Data Annotation Slice Layer Example @@ -331,7 +330,6 @@ export class StockTesla extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Data Annotation Strip Layer Example @@ -403,7 +401,6 @@ export class StockTesla extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Data Annotation Line Layer Example @@ -505,7 +502,6 @@ export class StockTesla extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Data Annotation Rect Layer Example @@ -579,7 +575,6 @@ export class StockTesla extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Data Annotation Band Layer Example @@ -654,7 +649,6 @@ export class StockTesla extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-filtering.md index 10da5a1d5..774074c44 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-filtering.md @@ -21,7 +21,7 @@ A complete list of valid expressions and keywords to form a query string can be ## Web Components Chart Data Filter Example -The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the [`initialFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#initialFilter) property, to update the chart visual and thus filtering out the other decades out. +The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the [`initialFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#initialFilter) property, to update the chart visual and thus filtering out the other decades out. ```typescript export class ContinentsBirthRateItem { @@ -59,10 +59,9 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
-The [`initialFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#initialFilter) property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in. +The [`initialFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#initialFilter) property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in. eg. To show all countries that start with the letter B: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-legend.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-legend.md index 2ba3e20c7..4548f2249 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-legend.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-data-legend.md @@ -49,7 +49,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Header Row The header row displays the current label of x-axis when hovering mouse over category series and financial series. You can use [`headerFormatDate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#headerFormatDate) and [`headerFormatTime`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#headerFormatTime) properties to format date and time in the [`IgcDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html) if the x-axis shows dates. For other types of series, the [`IgcDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html) does not render the header row. @@ -180,7 +179,6 @@ export class MultipleStocks extends Array> { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - Setting values on the [`includedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#includedColumns) and [`excludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#excludedColumns) properties, depends on type of series and how many data columns they support. For example, you can set [`includedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#includedColumns) property to a collection of **Open** and **Close** strings and the legend will show only open and close values for stock prices when the chart is plotting financial series. The following table lists all column names that can be use to filter columns in data legend. | Type of Series | Column Names | @@ -1244,7 +1242,6 @@ export class StockItem { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Data Legend Value Formatting The [`IgcDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html) provides automatic abbreviation of large numbers using its [`valueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#valueFormatAbbreviation) property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the [`valueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#valueFormatMinFractions) and [`valueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#valueFormatMaxFractions). This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. @@ -1282,7 +1279,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Data Legend Value Mode You have the ability to change the default decimal display of values within the [`IgcDataLegendComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html) to a currency by changing the [`valueFormatMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#valueFormatMode) property. Also, you can change the culture of the displayed currency symbol by setting the [`valueFormatCulture`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#valueFormatCulture) property a culture tag. For example, the following example data legend with the [`valueFormatCulture`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#valueFormatCulture) set to "en-GB" to display British Pounds (£) symbol: @@ -1401,7 +1397,6 @@ export class MultipleStocks extends Array> { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Data Legend Grouping [`dataLegendGroup`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#dataLegendGroup) can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: @@ -1444,7 +1439,6 @@ export class OlympicMedalsTopCountriesWithTotals extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Configuring Multiple Selection -Other selection modes offer various methods of selection. For example using [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#selectionBehavior) with `PerDataItemMultiSelect` will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to `PerDataItemSingleSelect`, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories. +Other selection modes offer various methods of selection. For example using [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#selectionBehavior) with `PerDataItemMultiSelect` will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to `PerDataItemSingleSelect`, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories. `PerSeriesAndDataItemGlobalSingleSelect` allows single series selection across all categories at a time. ```typescript @@ -122,10 +121,9 @@ export class EnergyRenewableConsumption extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Programmatic Selection Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html). The `Matcher` property of the [`IgcChartSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcchartselection.html) object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be. -The matcher is ideal for using in charts, such as the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) when you do not have access to the actual series, like the [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html). In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the [`selectedSeriesItems`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#selectedSeriesItems) collection using a matcher with the following properties set +The matcher is ideal for using in charts, such as the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) when you do not have access to the actual series, like the [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html). In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the [`selectedSeriesItems`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#selectedSeriesItems) collection using a matcher with the following properties set For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to select the series bound to Solar values, you can add a ChartSelection object to the SelectedSeriesItems collection using a matcher with the following properties set. @@ -207,7 +204,6 @@ export class EnergyRenewableConsumption extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Web Components Data Tooltip Columns -The columns of the [`IgcDataToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatatooltiplayercomponent.html) include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipIncludedColumns) or [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipExcludedColumns) collections of the chart. +The columns of the [`IgcDataToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatatooltiplayercomponent.html) include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipIncludedColumns) or [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipExcludedColumns) collections of the chart. -The title column displays legend badges and series titles, which come from the [`chartTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#chartTitle) property of the different [`IgcSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html) plotted in the chart. +The title column displays legend badges and series titles, which come from the [`chartTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#chartTitle) property of the different [`IgcSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html) plotted in the chart. -The label column displays the name or abbreviation of the different property paths in the [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipIncludedColumns) or [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipExcludedColumns) collections of the tooltip. +The label column displays the name or abbreviation of the different property paths in the [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipIncludedColumns) or [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipExcludedColumns) collections of the tooltip. -The value column displays series values as abbreviated text which can be formatted using the [`dataToolTipValueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatAbbreviation) property to apply the same abbreviation for all numbers by setting this property to `Auto` or `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the [`dataToolTipValueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatMinFractions) and [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatMaxFractions) for minimum and maximum digits, respectively. +The value column displays series values as abbreviated text which can be formatted using the [`dataToolTipValueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatAbbreviation) property to apply the same abbreviation for all numbers by setting this property to `Auto` or `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the [`dataToolTipValueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatMinFractions) and [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatMaxFractions) for minimum and maximum digits, respectively. -The units column displays an abbreviation symbol and/or unit text, which can be set either on the **DataToolTip** by setting the [`dataToolTipUnitsText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipUnitsText) for all columns or using the following properties on each series in the chart: +The units column displays an abbreviation symbol and/or unit text, which can be set either on the **DataToolTip** by setting the [`dataToolTipUnitsText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipUnitsText) for all columns or using the following properties on each series in the chart: - Category Series (e.g. ColumnSeries) - ValueMemberAsLegendUnit="K" @@ -96,7 +95,7 @@ The units column displays an abbreviation symbol and/or unit text, which can be For the above-listed properties, there are corresponding properties ending with **MemberAsLegendLabel** to determine the text in the label columns mentioned previously. -The columns included in the [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipIncludedColumns) and [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipExcludedColumns) collections generally correspond to the value paths of your underlying data items, but the financial series has the option to include some special ones in addition to the `High`, `Low`, `Open`, and `Close` paths that are required for the financial series to plot correctly. You have the ability to show `TypicalPrice`, `Change`, and `Volume` options within the tooltip. +The columns included in the [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipIncludedColumns) and [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipExcludedColumns) collections generally correspond to the value paths of your underlying data items, but the financial series has the option to include some special ones in addition to the `High`, `Low`, `Open`, and `Close` paths that are required for the financial series to plot correctly. You have the ability to show `TypicalPrice`, `Change`, and `Volume` options within the tooltip. The following example demonstrates a data tooltip with the added columns of Open, High, Low, Close, and Change: @@ -214,7 +213,6 @@ export class MultipleStocks extends Array> { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Data Tooltip Grouping for Data Chart [`dataLegendGroup`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#dataLegendGroup) can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed: @@ -257,10 +255,9 @@ export class OlympicMedalsTopCountriesWithTotals extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Data Tooltip Value Formatting -The **DataToolTip** provides automatic abbreviation of large numbers using its [`dataToolTipValueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatAbbreviation) property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the [`dataToolTipValueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatMinFractions) and [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatMaxFractions). This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. +The **DataToolTip** provides automatic abbreviation of large numbers using its [`dataToolTipValueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatAbbreviation) property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the [`dataToolTipValueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatMinFractions) and [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatMaxFractions). This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. The following example demonstrates a **DataToolTip** with the minimum and maximum fractions set: @@ -335,10 +331,9 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Data Tooltip Value Mode -You can change the default decimal display of values within the **DataToolTip** to be currency by changing the [`dataToolTipValueFormatMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatMode) property of the layer. The **DataToolTip** also exposes the ability to modify the culture of the displayed currency symbol by using its [`dataToolTipValueFormatCulture`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatCulture) property and setting it to its corresponding culture tag. For example, the following sample demonstrates a chart with the [`dataToolTipValueFormatCulture`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatCulture) set to "en-GB": +You can change the default decimal display of values within the **DataToolTip** to be currency by changing the [`dataToolTipValueFormatMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatMode) property of the layer. The **DataToolTip** also exposes the ability to modify the culture of the displayed currency symbol by using its [`dataToolTipValueFormatCulture`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatCulture) property and setting it to its corresponding culture tag. For example, the following sample demonstrates a chart with the [`dataToolTipValueFormatCulture`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatCulture) set to "en-GB": ```typescript //begin async data @@ -454,7 +449,6 @@ export class MultipleStocks extends Array> { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Layout Mode Legend items can be positioned in a vertical or table structure via the [`layoutMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatalegendcomponent.html#layoutMode) property. The default value is `Table`, which retains the same look and feel as seen in previous releases. @@ -465,7 +459,7 @@ eg. ## Web Components Data Tooltip Styling -The **DataToolTip** provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the [`dataToolTipTitleTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipTitleTextColor), [`dataToolTipLabelTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipLabelTextColor), [`dataToolTipValueTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueTextColor), and [`dataToolTipUnitsTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipUnitsTextColor) properties. +The **DataToolTip** provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the [`dataToolTipTitleTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipTitleTextColor), [`dataToolTipLabelTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipLabelTextColor), [`dataToolTipValueTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueTextColor), and [`dataToolTipUnitsTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipUnitsTextColor) properties. The following example demonstrates usage of the styling properties mentioned above: @@ -1476,7 +1470,6 @@ export class StockItem { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - Several properties are exposed including grouping portions of the tooltip. - `GroupTextMargin` @@ -1496,24 +1489,24 @@ Several properties are exposed including grouping portions of the tooltip. ## API References -- [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipExcludedColumns) -- [`dataToolTipGroupedPositionModeX`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipGroupedPositionModeX) -- [`dataToolTipGroupedPositionModeY`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipGroupedPositionModeY) -- [`dataToolTipGroupingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipGroupingMode) -- [`dataToolTipHeaderText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipHeaderText) -- [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipIncludedColumns) -- [`dataToolTipLabelTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipLabelTextColor) +- [`dataToolTipExcludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipExcludedColumns) +- [`dataToolTipGroupedPositionModeX`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipGroupedPositionModeX) +- [`dataToolTipGroupedPositionModeY`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipGroupedPositionModeY) +- [`dataToolTipGroupingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipGroupingMode) +- [`dataToolTipHeaderText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipHeaderText) +- [`dataToolTipIncludedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipIncludedColumns) +- [`dataToolTipLabelTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipLabelTextColor) - [`IgcDataToolTipLayerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatatooltiplayercomponent.html) -- [`dataToolTipSummaryTitleText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipSummaryTitleText) -- [`dataToolTipSummaryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipSummaryType) -- [`dataToolTipTitleTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipTitleTextColor) -- [`dataToolTipUnitsTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipUnitsTextColor) -- [`dataToolTipUnitsText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipUnitsText) -- [`dataToolTipValueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatAbbreviation) -- [`dataToolTipValueFormatCulture`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatCulture) -- [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatMaxFractions) -- [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatMaxFractions) -- [`dataToolTipValueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatMinFractions) -- [`dataToolTipValueFormatMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueFormatMode) -- [`dataToolTipValueTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#dataToolTipValueTextColor) +- [`dataToolTipSummaryTitleText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipSummaryTitleText) +- [`dataToolTipSummaryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipSummaryType) +- [`dataToolTipTitleTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipTitleTextColor) +- [`dataToolTipUnitsTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipUnitsTextColor) +- [`dataToolTipUnitsText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipUnitsText) +- [`dataToolTipValueFormatAbbreviation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatAbbreviation) +- [`dataToolTipValueFormatCulture`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatCulture) +- [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatMaxFractions) +- [`dataToolTipValueFormatMaxFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatMaxFractions) +- [`dataToolTipValueFormatMinFractions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatMinFractions) +- [`dataToolTipValueFormatMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueFormatMode) +- [`dataToolTipValueTextColor`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#dataToolTipValueTextColor) - `MemberAsLegendLabel` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-features.md index d27ec2d92..e744be9fc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-features.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-features.md @@ -22,7 +22,6 @@ Modify or customize all aspects of both the X-Axis and Y-Axis using the differen /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Annotations @@ -34,7 +33,6 @@ These additional layers are on top of the chart which are mouse / touch dependen /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Animations @@ -46,7 +44,6 @@ Animate your chart as it loads a new data source by enabling animations. These a /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Highlighting @@ -58,7 +55,6 @@ Bring focus to visuals such as lines, columns, or markers by highlighting them a /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Markers @@ -98,7 +94,6 @@ export class CountryRenewableElectricity extends Array ## Navigation @@ -165,7 +160,6 @@ export class SampleFinancialData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Overlays @@ -177,7 +171,6 @@ Overlays allows you to annotate important values and thresholds by plotting hori /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Performance @@ -254,7 +247,6 @@ export class CategoryChartSharedData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Tooltips @@ -293,7 +285,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Trendlines @@ -416,7 +407,6 @@ export class StockItem { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-highlight-filter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-highlight-filter.md index ae78f1d0b..01e0f4e18 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-highlight-filter.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-highlight-filter.md @@ -74,18 +74,17 @@ export class CountryRenewableElectricityFiltered extends Array -Similar to the [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html), the [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightedValuesDisplayMode) property is also exposed on the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html). In the case that you do not want to see the overlay, you can set this property to `Hidden`. +Similar to the [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html), the [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#highlightedValuesDisplayMode) property is also exposed on the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html). In the case that you do not want to see the overlay, you can set this property to `Hidden`. The following example demonstrates the usage of the data highlighting overlay feature within the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) control: @@ -263,7 +259,6 @@ export class SalesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - @@ -282,11 +277,11 @@ The following is a list of API members mentioned in the above sections: | [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) Properties | [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html) Properties | | ----------------------------------------------|---------------------------| -| [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightedDataSource) | [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightedDataSource) | +| [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#highlightedDataSource) | [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#highlightedDataSource) | | [`highlightedTitleSuffix`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#highlightedTitleSuffix) | [`highlightedTitleSuffix`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#highlightedTitleSuffix) | | `CategoryChart.HighlightedValueMemberPath` | `Series.HighlightedValueMemberPath` | -| [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightedValuesDisplayMode) | [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#highlightedValuesDisplayMode) | +| [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#highlightedValuesDisplayMode) | [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#highlightedValuesDisplayMode) | | [`highlightedValuesFadeOpacity`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#highlightedValuesFadeOpacity) | [`highlightedValuesFadeOpacity`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#highlightedValuesFadeOpacity) | -| [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightedValuesDisplayMode) | [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#highlightedValuesDisplayMode) | -| [`initialHighlightFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#initialHighlightFilter) | | -| [`initialGroups`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#initialGroups) | | +| [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#highlightedValuesDisplayMode) | [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#highlightedValuesDisplayMode) | +| [`initialHighlightFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#initialHighlightFilter) | | +| [`initialGroups`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#initialGroups) | | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-highlighting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-highlighting.md index 1886b20ca..20b02028e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-highlighting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-highlighting.md @@ -46,14 +46,13 @@ export class TemperatureAnnotatedData extends Array # Web Components Chart Highlighting Modes & Behaviors -All Web Components Charts support a variety of highlighting options. [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingMode) can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingBehavior) can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html), [`IgcFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html), and [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html) controls and they have the same API for using the highlighting feature. +All Web Components Charts support a variety of highlighting options. [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#highlightingMode) can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#highlightingBehavior) can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html), [`IgcFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html), and [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html) controls and they have the same API for using the highlighting feature. -The following example demonstrates the [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingMode) Web Components chart. +The following example demonstrates the [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#highlightingMode) Web Components chart. ```typescript export class TemperatureAnnotatedDataItem { @@ -88,8 +87,7 @@ export class TemperatureAnnotatedData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Highlight Layers The Ignite UI for Web Components [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) can enable three types of highlighting when hovering over data items. -1. Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the [`isSeriesHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#isSeriesHighlightingEnabled) property to true. +1. Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the [`isSeriesHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#isSeriesHighlightingEnabled) property to true. 2. Item Highlighting highlights items in a series either by drawing a banded shape at their position or by rendering a marker at their position. This is enabled by setting the [`isItemHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#isItemHighlightingEnabled) property to true. @@ -181,7 +177,6 @@ The following example demonstrates the different highlighting layers that are av /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Additional Resources You can find more information about related chart features in these topics: @@ -194,12 +189,12 @@ You can find more information about related chart features in these topics: The following is a list of API members mentioned in the above sections: -- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingMode) -- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingBehavior) +- [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#highlightingMode) +- [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#highlightingBehavior) - `LegendHighlightingBehavior` - [`isCategoryHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#isCategoryHighlightingEnabled) - [`isItemHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#isItemHighlightingEnabled) -- [`isSeriesHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#isSeriesHighlightingEnabled) +- [`isSeriesHighlightingEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#isSeriesHighlightingEnabled) - [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) - [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html) - [`IgcFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-markers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-markers.md index fe208793f..8f0bf0a08 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-markers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-markers.md @@ -17,7 +17,7 @@ In Ignite UI for Web Components, markers are visual elements that display the va In the following example, the [Line Chart](../types/line-chart.md) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the [`MarkerType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.markertype.html) property to [`Circle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.markertype.html#Circle) enum value. -The colors of the markers are also managed by setting the [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#markerBrushes) and [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#markerOutlines) properties in the sample below. The markers and [`chartType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#chartType) is configurable in this sample by using the drop-downs as well. +The colors of the markers are also managed by setting the [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#markerBrushes) and [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#markerOutlines) properties in the sample below. The markers and [`chartType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#chartType) is configurable in this sample by using the drop-downs as well. ```typescript export class CountryRenewableElectricityItem { @@ -52,7 +52,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Chart Marker Templates @@ -64,7 +63,6 @@ In addition to marker properties, you can implement your own marker by setting a /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources @@ -78,7 +76,7 @@ You can find more information about related chart features in these topics: The following is a list of API members mentioned in the above sections: -- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#markerBrushes) -- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#markerOutlines) +- [`markerBrushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#markerBrushes) +- [`markerOutlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#markerOutlines) - [`MarkerType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.markertype.html) - [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-navigation.md index e2cfef3c7..ca8c9e7f2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-navigation.md @@ -77,7 +77,6 @@ export class SampleFinancialData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
Like this sample? Get access to our complete Web Components toolkit and start building your own apps in minutes. Download it for free. @@ -86,7 +85,7 @@ Like this sample? Get access to our complete Web Components toolkit and start bu Whether or not zooming is on by default depends on the chart you are using. If you are using [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html), it is on by default, but it is not in the [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html). In order to enable or disable navigation in the UI, you need to set either the [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#isHorizontalZoomEnabled) and/or the [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#isVerticalZoomEnabled) properties of the chart, depending on the direction that you wish to enable or disable zooming. -It is also possible to zoom or pan simply by clicking the mouse or using touch. The [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#defaultInteraction) property of the data chart determines what happens on mouse click or touch events. This property defaults to `DragZoom` and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#defaultInteraction) property can also be set to either `DragPan` to allow panning or `None` to prevent these operations. +It is also possible to zoom or pan simply by clicking the mouse or using touch. The [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#defaultInteraction) property of the data chart determines what happens on mouse click or touch events. This property defaults to `DragZoom` and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#defaultInteraction) property can also be set to either `DragPan` to allow panning or `None` to prevent these operations. ## Chart Navigation with Touch, Mouse and Keyboard @@ -96,9 +95,9 @@ Navigation in the Web Components data chart can happen with either touch, the mo - **Zoom In**: Using the PAGE UP key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch. - **Zoom Out**: Using the PAGE DOWN key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch. - **Fit to Chart Plot Area**: Using the HOME key on the keyboard. There is no mouse or touch operation for this. -- **Area Zoom**: Click and drag the mouse within the plot area with the [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#defaultInteraction) property set to its default - `DragZoom`. +- **Area Zoom**: Click and drag the mouse within the plot area with the [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#defaultInteraction) property set to its default - `DragZoom`. -The zoom and pan operations can also be enabled by using modifier keys by setting the [`dragModifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#dragModifier) and [`panModifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#panModifier) properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed: +The zoom and pan operations can also be enabled by using modifier keys by setting the [`dragModifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#dragModifier) and [`panModifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#panModifier) properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed: | Modifier Value | Corresponding Key | | ---------------|------------------ | @@ -110,7 +109,7 @@ The zoom and pan operations can also be enabled by using modifier keys by settin ## Chart Navigation with Scrollbars -The chart can be scrolled by enabling the [`verticalViewScrollbarMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#verticalViewScrollbarMode) and [`horizontalViewScrollbarMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#horizontalViewScrollbarMode) properties. +The chart can be scrolled by enabling the [`verticalViewScrollbarMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#verticalViewScrollbarMode) and [`horizontalViewScrollbarMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#horizontalViewScrollbarMode) properties. These can be configured to the following options @@ -235,7 +234,6 @@ export class MultipleStocks extends Array> { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Chart Navigation through Code @@ -245,9 +243,9 @@ export class MultipleStocks extends Array> { The Web Components data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties: -- [`windowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowPositionHorizontal): A numeric value describing the X portion of the content view rectangle displayed by the data chart. -- [`windowPositionVertical`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowPositionVertical): A numeric value describing the Y portion of the content view rectangle displayed by the data chart. -- [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowRect): A `Rect` object representing a rectangle that represents the portion of the chart that is currently in view. For example, a [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowRect) of "0, 0, 1, 1" would be the entirety of the data chart. +- [`windowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#windowPositionHorizontal): A numeric value describing the X portion of the content view rectangle displayed by the data chart. +- [`windowPositionVertical`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#windowPositionVertical): A numeric value describing the Y portion of the content view rectangle displayed by the data chart. +- [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#windowRect): A `Rect` object representing a rectangle that represents the portion of the chart that is currently in view. For example, a [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#windowRect) of "0, 0, 1, 1" would be the entirety of the data chart. - [`windowScaleHorizontal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#windowScaleHorizontal): A numeric value describing the width portion of the content view rectangle displayed by the data chart. - [`windowScaleVertical`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#windowScaleVertical): A numeric value describing the height portion of the content view rectangle displayed by the data chart. @@ -262,11 +260,11 @@ You can find more information about related chart features in these topics: The following is a list of API members mentioned in the above sections: -- [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#defaultInteraction) -- [`dragModifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#dragModifier) +- [`defaultInteraction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#defaultInteraction) +- [`dragModifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#dragModifier) - [`isHorizontalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#isHorizontalZoomEnabled) - [`isVerticalZoomEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#isVerticalZoomEnabled) -- [`panModifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#panModifier) +- [`panModifier`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html#panModifier) - [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) - [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html) - [`IgcFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-overlays.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-overlays.md index a60128936..912df4c0d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-overlays.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-overlays.md @@ -22,7 +22,6 @@ The following example depicts a [Column Chart](../types/column-chart.md) with a /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Value Overlay Properties @@ -41,7 +40,7 @@ It is also possible to show an axis annotation on a [`IgcValueOverlayComponent`] The Web Components charting components also expose the ability to use value lines to call out different focal points of your data, such as minimum, maximum, and average values. -Applying the [`IgcValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvaluelayercomponent.html) in the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) and [`IgcFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html) components is done by setting the [`valueLines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#valueLines) property on the chart. This property takes a collection of the [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.valuelayervaluemode.html) enumeration. You can mix and match multiple value layers in the same chart by adding multiple [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.valuelayervaluemode.html) enumerations to the [`valueLines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#valueLines) collection of the chart. +Applying the [`IgcValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvaluelayercomponent.html) in the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html) and [`IgcFinancialChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html) components is done by setting the [`valueLines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#valueLines) property on the chart. This property takes a collection of the [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.valuelayervaluemode.html) enumeration. You can mix and match multiple value layers in the same chart by adding multiple [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.valuelayervaluemode.html) enumerations to the [`valueLines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#valueLines) collection of the chart. In the [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html), this is done by adding a [`IgcValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvaluelayercomponent.html) to the [`IgcSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html) collection of the chart and then setting the `ValueMode` property to one of the [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.valuelayervaluemode.html) enumerations. Each of these enumerations and what they mean is listed below: @@ -55,7 +54,7 @@ In the [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui If you want to prevent any particular series from being taken into account when using the [`IgcValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvaluelayercomponent.html) element, you can set the [`targetSeries`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvaluelayercomponent.html#targetSeries) property on the layer. This will force the layer to target the series that you define. You can have as many [`IgcValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvaluelayercomponent.html) elements within a single [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html) as you want. -The following sample demonstrates usage of the different [`valueLines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#valueLines) in the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html): +The following sample demonstrates usage of the different [`valueLines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#valueLines) in the [`IgcCategoryChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html): ```typescript export class CountryRenewableElectricityItem { @@ -90,7 +89,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Financial Overlays @@ -162,7 +160,6 @@ export class StockTesla extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Styling Overlay Text This code example shows how to style and customize Overlay Text on @@ -207,13 +204,13 @@ The following is a list of API members mentioned in the above sections: - `ItemsSource` - [`IgcValueOverlayComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvalueoverlaycomponent.html) - [`axis`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvalueoverlaycomponent.html#axis) -- [`brush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#brush) +- [`brush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvalueoverlaycomponent.html#brush) - `IsAxisAnnotationsEnabled` - [`IgcSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html) - [`thickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriescomponent.html#thickness) - [`IgcValueLayerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvaluelayercomponent.html) - [`ValueLayerValueMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.valuelayervaluemode.html) -- [`valueLines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#valueLines) +- [`valueLines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#valueLines) - [`overlayText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvalueoverlaycomponent.html#overlayText) - `TargetAxis` - `OverlayTextMemberPath` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-performance.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-performance.md index 8845daa0b..e0d384e34 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-performance.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-performance.md @@ -91,7 +91,6 @@ export class CategoryChartSharedData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Chart with High-Volume @@ -168,7 +167,6 @@ export class CategoryChartSharedData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## General Performance Guidelines @@ -368,7 +366,7 @@ This code snippet shows how to hide axis labels in the Web Components charts. ### Axis Labels Abbreviation -Although, the Web Components charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when [`yAxisAbbreviateLargeNumbers`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisAbbreviateLargeNumbers) is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTitle) to a string that represents factor used used to abbreviate your data values. +Although, the Web Components charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when [`yAxisAbbreviateLargeNumbers`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisAbbreviateLargeNumbers) is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTitle) to a string that represents factor used used to abbreviate your data values. This code snippet shows how to set axis title in the Web Components charts. @@ -408,12 +406,12 @@ For example, changing these properties on the [`IgcCategoryChartComponent`](http | Axis Visual | X-Axis Properties | Y-Axis Properties | | ---------------------|-------------------|------------------- | | All Axis Visual | [`xAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisInterval)
[`xAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorInterval) | [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisInterval)
[`yAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcfinancialchartcomponent.html#yAxisMinorInterval) | -| Axis Tickmarks | [`xAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTickStroke)
[`xAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTickStrokeThickness)
[`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTickLength)
| [`yAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTickStroke)
[`yAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTickStrokeThickness)
[`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTickLength)
| -| Axis Major Gridlines | [`xAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMajorStroke)
[`xAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMajorStrokeThickness)
| [`yAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMajorStroke)
[`yAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMajorStrokeThickness)
| -| Axis Minor Gridlines | [`xAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMinorStroke)
[`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisMinorStrokeThickness)
| [`yAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMinorStroke)
[`yAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisMinorStrokeThickness)
| -| Axis Main Line | [`xAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisStroke)
[`xAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisStrokeThickness)
| [`yAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisStroke)
[`yAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisStrokeThickness)
| -| Axis Titles | [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTitle)
[`xAxisTitleAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisTitleAngle)
| [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTitle)
[`yAxisTitleAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisTitleAngle)
| -| Axis Strips | [`xAxisStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisStrip)
| [`yAxisStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisStrip)
| +| Axis Tickmarks | [`xAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTickStroke)
[`xAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTickStrokeThickness)
[`xAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTickLength)
| [`yAxisTickStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTickStroke)
[`yAxisTickStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTickStrokeThickness)
[`yAxisTickLength`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTickLength)
| +| Axis Major Gridlines | [`xAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMajorStroke)
[`xAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMajorStrokeThickness)
| [`yAxisMajorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMajorStroke)
[`yAxisMajorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMajorStrokeThickness)
| +| Axis Minor Gridlines | [`xAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorStroke)
[`xAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorStrokeThickness)
| [`yAxisMinorStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinorStroke)
[`yAxisMinorStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinorStrokeThickness)
| +| Axis Main Line | [`xAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisStroke)
[`xAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisStrokeThickness)
| [`yAxisStroke`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisStroke)
[`yAxisStrokeThickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisStrokeThickness)
| +| Axis Titles | [`xAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTitle)
[`xAxisTitleAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisTitleAngle)
| [`yAxisTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTitle)
[`yAxisTitleAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisTitleAngle)
| +| Axis Strips | [`xAxisStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisStrip)
| [`yAxisStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisStrip)
| Or changing properties of an [`IgcAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcaxiscomponent.html) in the [`IgcDataChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatachartcomponent.html) control: @@ -516,6 +514,6 @@ The following table lists API members mentioned in above sections: - [`yAxisInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisInterval) - [`xAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisMinorInterval) - [`yAxisMinorInterval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisMinorInterval) -- [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#xAxisLabelVisibility) -- [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcxychartcomponent.html#yAxisLabelVisibility) +- [`xAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#xAxisLabelVisibility) +- [`yAxisLabelVisibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisLabelVisibility) - [`yAxisIsLogarithmic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#yAxisIsLogarithmic) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-synchronization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-synchronization.md index f5a3e5621..d4afcef38 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-synchronization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-synchronization.md @@ -77,7 +77,6 @@ export class SampleFinancialData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Chart Synchronization Properties diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-tooltips.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-tooltips.md index 3b062c5f2..64d5eb89b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-tooltips.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-tooltips.md @@ -49,7 +49,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The [`toolTipType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#toolTipType) property is configurable and can be set to one of the following options: @@ -76,7 +75,6 @@ This example shows how to create custom tooltips for all series in Web Component /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Custom Tooltips in Data Chart @@ -103,7 +101,6 @@ export class SampleCategoryData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-trendlines.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-trendlines.md index d062614f6..7feb8f234 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-trendlines.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-trendlines.md @@ -137,7 +137,6 @@ export class StockItem { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Chart Trendlines Dash Array Example @@ -203,7 +202,6 @@ export class Stock2Years extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Chart Trendline Layer diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-user-annotations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-user-annotations.md index c6cf56c1b..5cd397f48 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-user-annotations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chart-user-annotations.md @@ -47,7 +47,6 @@ export class CountryRenewableElectricity extends Array [!Note] > This feature is designed to support X and Y axes and does not currently support radial or angular axes. @@ -100,7 +99,7 @@ Each of the user annotations can show a tooltip on mouse hover to add even more The chart exposes a `UserAnnotationToolTipContentUpdating` event that you can handle to update the content of the tooltip for the user annotation as the tooltip is shown. The event arguments of this event exposes two properties: `Content` and `AnnotationInfo`. -The tooltip is designed to work in tandem with the `UserAnnotationInformationRequested` event so that you can provide more detail to the user annotation via that event's [`annotationData`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcuserbaseannotation.html#annotationData) property. The `AnnotationInfo` property on the event arguments of the `UserAnnotationToolTipContentUpdating` event will be the same instance as the `AnnotationInfo` property in the `UserAnnotationInformationRequested` that you can modify in that event. This allows you to utilize the information provided to the user annotation on its creation and provide even more information within the tooltip. +The tooltip is designed to work in tandem with the `UserAnnotationInformationRequested` event so that you can provide more detail to the user annotation via that event's [`annotationData`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcuserstripannotation.html#annotationData) property. The `AnnotationInfo` property on the event arguments of the `UserAnnotationToolTipContentUpdating` event will be the same instance as the `AnnotationInfo` property in the `UserAnnotationInformationRequested` that you can modify in that event. This allows you to utilize the information provided to the user annotation on its creation and provide even more information within the tooltip. ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chat.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chat.md index 85a529441..4f2bbbc30 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chat.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chat.md @@ -18,7 +18,6 @@ Unlike a static message list, the [`IgcChatComponent`](https://www.infragistics. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Installation To get started, install the Ignite UI for Web Components by running the following command: @@ -326,7 +325,6 @@ chat.addEventListener('igcMessageCreated', (e) => { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcChatComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcchatcomponent.html) component exposes both **CSS parts** and **slots** for fine-grained customization of its appearance and structure. @@ -493,7 +491,6 @@ igc-chat::part(input-attachments-container) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API Reference - [`IgcChatComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcchatcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/checkbox.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/checkbox.md index 389354fb1..9e57c155e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/checkbox.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/checkbox.md @@ -18,7 +18,6 @@ The Web Components Checkbox is a component that lets you add checkboxes to your /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -88,7 +87,6 @@ The checkbox can also be labelled by elements external to the checkbox. In this /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Checked You can use the [`checked`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccheckboxcomponent.html#checked) attribute of the component to determine whether the checkbox should be toggled on or off by default. @@ -102,7 +100,6 @@ You can use the [`checked`](https://www.infragistics.com/products/ignite-ui-web- /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Indeterminate You can use the [`indeterminate`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccheckboxcomponent.html#indeterminate) property of the component to set the checkbox's value to neither **true** nor **false**. @@ -116,7 +113,6 @@ You can use the [`indeterminate`](https://www.infragistics.com/products/ignite-u /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Required You can use the [`required`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccheckboxcomponent.html#required) property to mark the checkbox as required. @@ -146,7 +142,6 @@ You can use the [`disabled`](https://www.infragistics.com/products/ignite-ui-web /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Forms You can use the [`name`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccheckboxcomponent.html#name) and [`value`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccheckboxcomponent.html#value) attributes when using the checkbox with `Form`. @@ -192,7 +187,6 @@ igc-checkbox::part(control checked)::after { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcCheckboxComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccheckboxcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chip.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chip.md index e43321bd3..ee54f535c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chip.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/chip.md @@ -18,7 +18,6 @@ Ignite UI for Web Components Chips help people enter information, make selection /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -73,7 +72,6 @@ The Ignite UI for Web Components chip supports several pre-defined stylistic var /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Disabled The Ignite UI for Web Components chip can be disabled by using the [`disabled`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcchipcomponent.html#disabled) property. @@ -101,7 +99,6 @@ With the `Prefix` and `Suffix` parts of the [`IgcChipComponent`](https://www.inf /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Size We allow the user to choose the size of the [`IgcChipComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcchipcomponent.html) by utilizing the `--ig-size` CSS variable: @@ -142,7 +139,6 @@ We allow the user to choose the size of the [`IgcChipComponent`](https://www.inf /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcChipComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcchipcomponent.html) component exposes a `base`, `prefix`, `suffix` CSS parts that can be used to change all of its style properties. @@ -173,7 +169,6 @@ igc-chip::part(suffix) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcChipComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcchipcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/circular-progress.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/circular-progress.md index 2feb1eb5c..1282bdeb9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/circular-progress.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/circular-progress.md @@ -25,7 +25,6 @@ The Ignite UI for Web Components Circular Progress Indicator component provides /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -82,7 +81,6 @@ The following sample demonstrates the above configuration: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Animation Duration @@ -117,7 +115,6 @@ Customizing the progress bar in order to use a color gradient instead of a solid /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - > [!Note] > For each [`IgcCircularGradientComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccirculargradientcomponent.html) defined as gradient slot of Ignite UI for Web Components [`IgcCircularProgressComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccircularprogresscomponent.html) a [SVG stop](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop) element would be created. The values passed as `color`, `offset` and `opacity` would be set as stop-color, offset and stop-opacity of the SVG element without further validations. @@ -191,7 +188,6 @@ igc-circular-progress::part(track) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/cli-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/cli-mcp.md index 721e8fb05..e4ea66495 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/cli-mcp.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/cli-mcp.md @@ -1,15 +1,18 @@ --- -title: Web Components Ignite UI CLI MCP | Infragistics -_description: Connect Ignite UI CLI MCP to your AI client to scaffold projects, modify existing apps, create and update components, and ask documentation questions for Ignite UI for Web Components. Learn the setup options for VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients. +title: Ignite UI CLI MCP | Infragistics +_description: Use the Ignite UI CLI MCP server to scaffold Ignite UI for Web Components projects, add components, and answer API questions through your AI assistant. _keywords: Web Components, Ignite UI for Web Components, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains _language: en _license: MIT _canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp" namespace: Infragistics.Controls mentionedTypes: [] +last_updated: "2026-04-24" _tocName: CLI MCP --- + + # Ignite UI CLI MCP

The Ignite UI CLI MCP is a Model Context Protocol (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Web Components applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.

@@ -18,14 +21,10 @@ _tocName: CLI MCP ## Overview -Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside Ignite UI Theming MCP - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session. - -The Ignite UI CLI MCP works alongside the Ignite UI Theming MCP. In practice, the CLI MCP handles project and component workflows, while the Theming MCP handles palettes, themes, tokens, and styling workflows. Most teams will want both servers connected. +Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.md). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session. The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and writes the initial MCP configuration for VS Code. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists. -If you want to see the full build flow after setup, see [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md). - **Example prompts to try once connected:** > _"Create a new Ignite UI for Web Components project in this folder, use the recommended defaults, and add a starter dashboard page with sample data."_ @@ -78,13 +77,13 @@ You can start with Ignite UI CLI MCP in three ways: > Start with a completely empty folder, add the MCP configuration manually, and then ask the assistant to create the project through chat. This path is useful when you want MCP to drive the project creation flow from the beginning instead of running the CLI yourself first. > **Existing project** -> Add MCP configuration to a project you already have and continue working in the current codebase. This path is useful when the project already exists and you want the assistant to help with project changes, component work, and documentation questions without regenerating anything. +> Add MCP configuration to a project you already have and continue working in the current codebase. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config` for Angular projects) to write `.vscode/mcp.json` and copy the Agent Skills into your project automatically. For other AI clients, copy the server entries from the client-specific sections below. All three paths use the same MCP servers. The difference is only how the project is prepared before you start prompting: - in the **CLI-first** path, Ignite UI CLI creates the project and prepares the first MCP configuration for you - in the **empty-folder** path, you create the MCP configuration first and let the assistant create the project after that -- in the **existing-project** path, you attach MCP to the current codebase and continue from what is already there +- in the **existing-project** path, run `ig ai-config` to write `.vscode/mcp.json` and copy the Agent Skills automatically, or add the configuration manually for other clients In all cases, once the MCP servers are connected and visible in your AI client, the assistant can keep working in the same session. @@ -123,22 +122,22 @@ npx --package igniteui-cli igniteui new Use a direct command when you already know the project settings: ```bash -ig new my-app --framework=webcomponents +ig new my-app --framework=webcomponents --template=side-nav ``` Matching `npx` form: ```bash -npx --package igniteui-cli igniteui new my-app --framework=webcomponents +npx ig new my-app --framework=webcomponents --template=side-nav ``` In guided mode, Ignite UI CLI prompts for the project name, framework, template, theme, and whether to add a component or complete the setup. In direct mode, you provide the framework and any supported options in the command itself. -For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see [Ignite UI CLI](../general-cli-overview.md). +For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see the [Ignite UI CLI documentation](../general-cli-overview.md). ### VS Code -GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root: +GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config`) from your project root to generate this file automatically. To configure it manually, create or edit `.vscode/mcp.json` in your project root: ```json { @@ -322,14 +321,14 @@ To get the live list with current parameters, ask: Here is a brief overview of each tool: -| Tool | Description | -|------|-------------| +| Tool | Description | +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `list_components` | Lists available Ignite UI component docs for a framework. Accepts an optional keyword filter (case-insensitive substring match against name, keywords, and summary). | -| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. | -| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. | -| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. | -| `search_api` | Searches API entries by keyword or component name across Angular, React, and Web Components. | -| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, and Web Components. | +| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. | +| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. | +| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. | +| `search_api` | Searches API entries by keyword or component name across Angular, React, Blazor and Web Components. | +| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, Blazor and Web Components. | At a high level, the CLI MCP tools help with: @@ -340,12 +339,10 @@ At a high level, the CLI MCP tools help with: - answering documentation and API questions > [!NOTE] -> Framework detection uses component prefixes: `` for Angular, `` for React, `` for Web Components, `` for Blazor. The assistant picks up the right framework automatically from your open files or prompt context. +> Framework detection uses component prefixes: `for Angular`, `for React`, `for Web Components`, `for Blazor`. The assistant picks up the right framework automatically from your open files or prompt context. The theming server adds styling, theme, palette, and token workflows to the same client session. -For the main hands-on workflow, see [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md). - ## Common Workflows The following setup scenarios show when to use each starting point. @@ -413,10 +410,6 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve ## Additional Resources -- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md) - - - - [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) - [Ignite UI for Web Components Skills](./skills.md) - [Ignite UI Theming MCP](./theming-mcp.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/color-editor.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/color-editor.md index d650aabde..5d8c325e7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/color-editor.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/color-editor.md @@ -20,7 +20,6 @@ The Ignite UI for Web Components Color Editor is a lightweight color picker comp /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Dependencies diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/column-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/column-chart.md index 924b5d207..a0db878e1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/column-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/column-chart.md @@ -49,7 +49,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Column Charts Recommendations @@ -115,7 +114,6 @@ export class TemperatureAverageData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Column Chart with Multiple Series @@ -154,7 +152,6 @@ export class HighestGrossingMovies extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Column Chart Styling @@ -198,7 +195,6 @@ export class EnergyRenewableConsumption extends Array ## Advanced Types of Column Charts @@ -243,7 +239,6 @@ export class CompanyIncomeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked Column Chart @@ -288,7 +283,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked 100% Column Chart @@ -330,7 +324,6 @@ export class OnlineTrafficByDevice extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Range Column Chart @@ -375,7 +368,6 @@ export class TemperatureRangeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Radial Column Chart @@ -416,7 +408,6 @@ export class FootballPlayerStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/combo-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/combo-overview.md deleted file mode 100644 index c14c0246e..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/combo-overview.md +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: Web Components ComboBox Component – Ignite UI for Web Components -_description: Web Components Combo component provides a powerful input, combining features of the basic HTML input, select, filtering and custom drop-down lists. Try it for FREE -_keywords: Ignite UI for Web Components, UI controls, Web Components widgets, web widgets, UI widgets, Web Components, Native Web Components Components Suite, Native Web Components Controls, Native Web Components Components Library, Web Components ComboBox component -_license: MIT -mentionedTypes: ["Combo", "ComboItem", "ComboHeader", "ComboList"] -_tocName: Combo Box ---- - -# Web Components ComboBox Overview - -Web Components ComboBox is a lightweight editor that enables users to easily select, filter, and group different predefined options in a provided list. The component also supports options for Web Components ComboBox keyboard navigation, templates to customize how the items, header, and footer are displayed. - -The Ignite UI for Web Components ComboBox component provides a list of options from which users can make a selection. It displays all options in a virtualized list of items, meaning the ComboBox can simultaneously show thousands of records, where one or more options can be selected. Additionally, the component features case-sensitive filtering, grouping, complex data binding and more. - -## Web Components ComboBox Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Getting Started with Web Components ComboBox - -First, you need to install the Ignite UI for Web Components by running the following command: - -```cmd -npm install igniteui-webcomponents -``` - -Before using the [`IgcComboComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html) component, you need to register it together with its additional components and necessary CSS: - -```ts -import { defineComponents, IgcComboComponent } -from 'igniteui-webcomponents'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; - -defineComponents(IgcComboComponent); -``` - -For a complete introduction to the Ignite UI for Web Components, read the [**Getting Started**](../../general-getting-started.md) topic. - -> [!WARNING] -> The [`IgcComboComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html) component doesn't work with the standard `` element. Use `Form` instead. - -Then, we will bind an array of objects to the combo data source used for building the list of options. - -```ts -interface City { - id: string; - name: string; -} - -const cities: City[] = [ - { name: 'London', id: 'UK01' }, - { name: 'Sofia', id: 'BG01'}, - { name: 'New York', id: 'NY01'} -]; - -export class Sample { - private combo: IgcComboComponent; - - constructor() { - this.combo = document.getElementById('basic-combo') as IgcComboComponent; - this.combo.data = cities; - } -} -``` - -```html - -``` - -### Data value and display properties - -When the combo is bound to a list of complex data (i.e. objects), we need to specify a property that the control will use to handle item selection. The component exposes the following properties: - - - -- `T` - **required**, if [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) is omitted, this should be set to "object", otherwise this needs to match the property type of [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey). - - - -- [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) - **Optional**, **required** for complex data object - Determines which field of the data source will be used to make selections. If [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) is omitted, the selection API will use object references to select items. -- [`displayKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#displayKey) - **Optional**, **recommended** for complex data objects - Determines which field in the data source is used as the display value. If no value is specified for [`displayKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#displayKey), the combo will use the specified [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) (if any). - In our case, we want the combo to display the `name` of each city and use the `id` field for item selection and as the underlying value for each item. Therefore, we provide these properties to the combo's [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) and [`displayKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#displayKey) respectively. - -> [!Note] -> When the data source consists of primitive types (e.g. `strings`, `numbers`, etc.), **do not** specify a [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) and/or [`displayKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#displayKey). - -### Setting Value - -The ComboBox component exposes a [`value`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#value) getter and setter in addition to an attribute, which is also called value. You can use the value attribute to set the selected items on component initialization. - -If you want to read the value, i.e. the list of currently selected items, or to update the value use the value getter and setter respectively. The value getter will return a list of all selected items as represented by the [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey). Likewise, if you want to update the list of selected items by using the value setter, you should provide a list of items by their [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey). - -Example: - -```ts -const combo = document.getElementById('basic-combo') as IgcComboComponent; - -// Given the overview example from above this will return ['BG01'] -console.log(combo.value); - -// Change the selected items to New York and London -combo.value = ['NY01', 'UK01']; -``` - -### Selection API - -The combo component exposes APIs that allow you to change the currently selected items. - -Besides selecting items from the list of options by user interaction, you can select items programmatically. This is done via the [`select`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#select) and [`deselect`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#deselect) methods. You can pass an array of items to both methods. If the methods are called with no arguments all items will be selected/deselected depending on which method is called. If you have specified a [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) for your combo component, then you should pass the value keys of the items you would like to select/deselect: - -#### Select/deselect some items - -```ts -// Select/deselect items by their IDs as valueKey is set to 'id' -combo.select(['BG01', 'BG02', 'BG03', 'BG04']); -combo.deselect(['BG01', 'BG02', 'BG03', 'BG04']); -``` - -#### Select/deselect all items - -```ts -// Select/deselect all items -combo.select(); -combo.deselect(); -``` - -If the [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) property is omitted, you will have to list the items you wish to select/deselect as objects references: - -```ts -// Select/deselect values by object references when no valueKey is provided -combo.select([cities[1], cities[5]]); -combo.deselect([cities[1], cities[5]]); -``` - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.button-container { - display: flex; - margin-top: 16px; - gap: 8px; -} -``` - - -### Validation - -The Ignite UI for Web Components Combo component supports most of the [`IgcInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html) properties, such as [`required`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#required), [`disabled`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#disabled), [`autofocus`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html#autofocus), [`invalid`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#invalid), etc. The component also exposes two methods bound to its validation: - -- [`reportValidity`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#reportValidity) - checks for validity and returns true if the component satisfies the validation constraints. -- [`checkValidity`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#checkValidity) - a wrapper around reportValidity to comply with the native input API. - -## Keyboard Navigation - -When the combo component is focused and the list of options is **not visible**: - -- Open the list of options using Down/Alt + Down keys. - -When the combo component is focused and the list of options is **visible**: - -- Using the Down key will activate the next item in the list. -- Using the Up key will activate the previous item in the list. If the first item is already active it will focus the input. -- Using the HOME or END keys will activate the first or the last item in the list. -- Using the SPACE key will select the active item. -- Using the ENTER key will select the active item and close the list of options. -- Using the ESC or TAB/SHIFT + TAB keys will close the list of options. - -## Styling - -You can change the appearance of the [`IgcComboComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html) component and its items, by using the exposed CSS parts listed below: - -| Part name | Description | -| -------------------- | ------------------------------------------------------------------------------- | -| `label` | The encapsulated text label. | -| `input` | The main input field. | -| `native-input` | The native input of the main input field. | -| `prefix` | The prefix wrapper. | -| `suffix` | The suffix wrapper. | -| `toggle-icon` | The toggle icon wrapper. | -| `clear-icon` | The clear icon wrapper. | -| `case-icon` | A case-icon wrapper that renders content inside the suffix of the filter-input. | -| `helper-text` | The helper text wrapper. | -| `search-input` | The search input field. | -| `list-wrapper` | The list of options wrapper. | -| `list` | The list of options box. | -| `item` | Represents each item in the list of options. | -| `group-header` | Represents each header in the list of options. | -| `active` | Appended to the item parts list when the item is active. | -| `selected` | Appended to the item parts list when the item is selected. | -| `checkbox` | Represents each checkbox of each list item. | -| `checkbox-indicator` | Represents the checkbox indicator of each list item. | -| `checked` | Appended to checkbox parts list when checkbox is checked. | -| `header` | The container holding the header content. | -| `footer` | The container holding the footer content. | -| `empty` | The container holding the empty content. | - -Using the CSS parts we have full control over the Combo styling. - -```css -igc-combo::part(search-input) { - background-color: var(--ig-gray-100); - border-radius: 2px; -} - -igc-combo::part(input) { - background-color: var(--ig-gray-100); -} - -igc-combo::part(prefix) { - background-color: var(--ig-secondary-50); - color: var(--ig-primary-500); -} - -igc-combo::part(toggle-icon) { - color: var(--ig-primary-500); -} -``` - -```css -igc-combo::part(search-input) { - background-color: var(--ig-gray-100); - border-radius: 2px; -} - -igc-combo::part(input) { - background-color: var(--ig-gray-100); -} - -igc-combo::part(prefix) { - background-color: var(--ig-secondary-50); - color: var(--ig-primary-500); -} - -igc-combo::part(toggle-icon) { - color: var(--ig-primary-500); -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-combo::part(label), -igc-combo::part(empty), -igc-combo::part(group-header) { - color: #2B3A55; -} - -igc-combo::part(native-input), -igc-combo::part(list-wrapper) { - background-color: #F2E5E5; -} - -igc-combo::part(item selected) { - background: #E8C4C4; -} - -igc-combo::part(item selected active), -igc-combo::part(item selected):hover { - background: #CE7777; -} - -igc-combo::part(prefix), -igc-combo::part(suffix), -igc-combo::part(case-icon) { - color: #F2E5E5; - background-color: #2B3A55; -} - -igc-combo::part(checkbox checked)::after { - background: #2B3A55; - box-shadow: none; -} -``` - - -## API Reference - -- [`IgcComboComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html) -- [`Styling & Themes`](../../themes/overview.md) - -## Additional Resources - -- [Ignite UI for Web Components **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-web-components) -- [Ignite UI for Web Components **GitHub**](https://github.com/IgniteUI/igniteui-webcomponents) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/composite-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/composite-chart.md index 4e98fb2bb..80af8231b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/composite-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/composite-chart.md @@ -22,7 +22,6 @@ The following example demonstrates how to create Composite Chart using [`IgcColu /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dashboard-tile.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dashboard-tile.md index 08b1de793..f53626214 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dashboard-tile.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dashboard-tile.md @@ -843,7 +843,6 @@ export class RetailSalesPerformanceLocalDataSource extends LocalDataSource { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Dependencies Install the following packages in the Ignite UI for Web Components toolset: @@ -920,7 +919,6 @@ export class DashboardGaugeDataSource extends Array @@ -930,7 +928,7 @@ From left to right: - The first tool will show a data grid with the `DataSource` provided to the control. This is a toggle tool, so if you click it again after showing the grid, it will revert to the visualization. - The second tool allows you to configure the settings of the current data visualization. - The third tool allows you to change the current visualization, allowing you to plot a different series type or show a different type of visualization altogether. This can be set on the control by setting the `VisualizationType` property, mentioned above. -- The last tool allows you to configure which properties on your underlying data item are included for the control. You can configure this by setting the [`includedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#includedProperties) or [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#excludedProperties) collection on the control. +- The last tool allows you to configure which properties on your underlying data item are included for the control. You can configure this by setting the [`includedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#includedProperties) or [`excludedProperties`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategorychartcomponent.html#excludedProperties) collection on the control. This demo demonstrates dashboard tile integration with the Web Components Pie Chart. The toolbar options at the top right provides access to styling and changing the data visualization. @@ -966,7 +964,6 @@ export class EnergyGlobalDemand extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - This demo demonstrates dashboard tile integration with the Web Components Geographic Map. The toolbar options at the top right provides access to styling and changing the data visualization. ```typescript @@ -1004,7 +1001,6 @@ export class WorldCities extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_layouts.igctoolbarcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-accessibility.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-accessibility.md deleted file mode 100644 index c2ac44370..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-accessibility.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Web Components Data Grid | Real-Time Data Grid and Tables | Accessibility Compliance | Infragistics -_description: Use Infragistics' Ignite UI for Web Components Data Table & Grid to support accessibility feature that will enable screen readers to read "speak" keyboard navigation interactions through the cells and columns of the grid. View Ignite UI for Web Components table tutorials! -_keywords: Web Components Table, Data Grid, cell accessibility, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Accessibility Compliance -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Accessibility Compliance - -The Ignite UI for Web Components Data Table / Data Grid supports accessibility and screen readers that interpret keyboard navigation interactions through the cells and columns of the grid. - -This is activated by setting the [`useAccessibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#useAccessibility) property of the grid to **true**. - -## Web Components Grid Accessible Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Section 508 Compliance - -Section 508 of the Rehabilitation Act was amended in 1998 by Congress to require all Federal agencies to make their electronic and information technology accessible to people with disabilities. Since then, Section 508 compliance has not only been a requirement in government agencies, but it's also important when providing software solutions and designing Web pages. - -Section 1194.22 of the Section 508 law specifically targets Web-based intranet and internet information and systems, and contains a set of 16 rules to follow. In order to enable you to keep your Web applications and Web sites compatible with these rules with minimal effort on your part, Infragistics has taken steps to ensure that the Ignite UI for Angular controls and components are compliant with the relevant accessibility rules. - -## WAI-ARIA Support - -In 2014 the W3C finalized their WAI-ARIA specification which defined how to design Web content and Web applications to be more accessible to users with disabilities. - -This section shows the accessibility (ARIA) support of the framework as well as how easily manageable the directionality of the components is. - -ARIA Attributes -In order to give screen readers the contextual information they require to interpret and interact with the grid, ARIA attributes are added to the grid DOM elements. These attributes are particularity useful when plain HTML elements such div and span are used to create complex DOM structures, which is the case with ag-Grid. - -When inspecting the grid's DOM elements the following roles and properties are supported and announced by the screen reader: - -- Grid Cell - element containing a grid cell. -- Row Count - announces the number of rows. -- Column Count - announces the number of rows. -- Row - a row of column headers or grid cells. -- Row Index - announces the visible index of the row. -- Row Selected - only present if the row is selectable, it announces the selection state. -- Group Expanded - only present in row groups, it announces the expand state. -- Column Header - element containing a column header. -- Cell Index - announces the visible index of the column. -- Colspan - only present if the column spans across multiple columns, it helps guide screen readers. -- Sort - only present in sortable columns, it announces the sort state. -- Column Index - announces the visible index of the cell. -- Selected - only present if the cell is selectable, it announces the selection state. -- Expanded - only present in a group cell, it announces the expand state. - -## Keyboard Navigation - -After setting the [`useAccessibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#useAccessibility) property to **true**, this will enable a range of keyboard navigation options in the data grid that screen readers can recognize. Below is a description of each of the key presses / combinations and the effect they will have relative to the currently activated cell: - -Navigating within the Grid - -- CTRL + ALT + →: Navigate one cell up. -- CTRL + ALT + ←: Navigate one cell left. -- CTRL + ALT + ↓: Navigate one cell below. -- CTRL + ALT + ↑: Navigate one cell above. -- CTRL + ALT + HOME: Navigate to first column header. -- CTRL + ALT + END: Navigate to last visible cell. -- CTRL + ALT + SHIFT + ↑ Navigate to current column header. -- CTRL + ALT + SHIFT + ↓ Navigate to last cell in current column. -- CTRL + ALT + SHIFT + ← Navigate to first cell in current row. -- CTRL + ALT + SHIFT + → Navigate to last cell in current row. - -Screen Reader Commands - -- CTRL OR ALT + Num Pad 5: Read current cell. -- INSERT + SHIFT + ↑: Read current row. -- INSERT + SHIFT + HOME: Read from start of row. -- INSERT + SHIFT + PAGE UP: Read to end of row from current cell. -- INSERT + SHIFT + Num Pad 5: Read current column. -- INSERT + SHIFT + END: Read from top of column. -- INSERT + SHIFT + PAGE DOWN: Read to bottom of column. - -## Code Snippet - -The following demonstrates how to implement cell accessibility in the Web Components data grid: - -```html - - -``` - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) -- [`useAccessibility`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#useAccessibility) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-activation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-activation.md deleted file mode 100644 index 445a3f941..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-activation.md +++ /dev/null @@ -1,344 +0,0 @@ ---- -title: Web Components Data Grid | Real-Time Data Grid and Tables | Activation | Infragistics -_description: Use Infragistics' Ignite UI for Web Components Data Table & Grid to support the cell activation feature that will enable keyboard navigation through the cells of the grid. View Ignite UI for Web Components table tutorials! -_keywords: Web Components Table, Data Grid, cell activation, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "GridActivationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Cell Activation -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Cell Activation - -The Ignite UI for Web Components Data Table / Data Grid supports a cell activation feature that will enable keyboard navigation through the cells of the grid. This is activated by setting the [`activationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#activationMode) property of the grid to [`Cell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.gridactivationmode.html#Cell). - -## Web Components Grid Cell Activation Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Excel Style Navigation - -[`enterBehaviorAfterEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#enterBehaviorAfterEdit) property will configure the grid to navigate to the next cell up, down, left or right after the enter key is pressed in edit mode. Otherwise, the [`enterBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#enterBehavior) property of the grid can be used to navigate to other cells, while not in edit mode, up, down, left or right. - -## Keyboard Navigation - -After setting the [`activationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#activationMode) property of the grid to [`Cell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.gridactivationmode.html#Cell), this will enable a range of keyboard navigation options in the data grid. Below is a description of each of the key presses / combinations and the effect they will have relative to the currently activated cell: - -- ↑: Navigate one cell up. -- ↓: Navigate one cell down. -- ←: Navigate one cell to the left on the current row only. -- →: Navigate one cell to the right on the current row only. -- PAGE UP: Scroll the grid one viewport page up. -- PAGE DOWN: Scroll the grid one viewport page down. -- TAB: Move the active cell to the next cell to the right, or the left-most cell of the next row if the last cell of that row is reached. -- SHIFT + TAB: Move the active cell to the next cell to the left, or the right-most cell of the previous row if the first cell of that row is reached. -- CTRL + ↑: Move to the top cell in the column. -- CTRL + ↓: Move to the bottom cell in the column. -- CTRL + ←: Move to the left-most cell in the row. -- CTRL + →: Move to the right-most cell in the row. -- CTRL + HOME: Move to the top-left cell in the grid. -- CTRL + END: Move to the bottom-right cell in the grid. - -## API References - -- [`activationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#activationMode) -- [`Cell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.gridactivationmode.html#Cell) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-editing.md deleted file mode 100644 index b6ac3581e..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-editing.md +++ /dev/null @@ -1,455 +0,0 @@ ---- -title: Web Components Data Grid | Cell and Row Editing with Batch Updating | Infragistics -_description: Use Infragistics' Web Components grid component which supports the cell and row editing feature that can also be configured to batch update all cells of the grid at any given moment. Learn how Ignite UI for Web Components can help you better display your data! -_keywords: Web Components Table, Data Grid, cell and row editing, Ignite UI for Web Components, batch updating, Infragistics -mentionedTypes: ["Grid", "EditModeType", "TransactionType"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/cell-editing -_tocName: Grid Editing -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Editing - -The Ignite UI for Web Components Data Table / Data Grid supports cell and row editing with batch updating. Note, this is currently limited to non-templated columns. - -## Web Components Grid Editing Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Overview - -Editing in the Web Components data grid is configured by using the [`editMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#editMode) option of the Web Components grid. This property takes three different options, listed below: - -- [`None`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.editmodetype.html#None): Editing is not enabled. -- [`Cell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.editmodetype.html#Cell): Allow cells to enter edit mode and commit the value on exiting edit mode. -- [`CellBatch`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.editmodetype.html#CellBatch): Allows cells to enter edit mode but changes will be cached later until they are committed. -- [`Row`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.editmodetype.html#Row): Allow rows to enter edit mode and commit the value on exit. - -When set to [`CellBatch`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.editmodetype.html#CellBatch), in order to commit the changes you must perform the `commitEdits` method from the grid. The grid will italicize the cells until they are committed providing control over when to push changes back to the datasource. - -In addition, error handling can be performed by hooking the `onCellValueChanging` event and inspecting new values before they are committed. The grid exposes a `setEditError` method that can output an error message. This keeps the cell in edit mode until a valid value is entered. Otherwise the grid's `rejectEdit` method can be performed to revert the invalid value. If no invalid value is found, you can also commit your changes by calling the grid's `acceptEdit` method. - -Commits can be approved or declined at the grid level by hooking `onDataCommitting` via the `acceptCommit` or `rejectCommit` methods passing the `commitID` event argument as the parameter. This event also exposes a `changes` collection which stores all the modifications prior to being committed. For example, you can check if a commit was from an add, update, or delete operation via the [`TransactionType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_core.transactiontype.html) property exposed on the `changes` collection and perform an `acceptCommit` or `rejectCommit` when necessary. - -## Excel Style Editing - -[`editOnKeyPress`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#editOnKeyPress) enables you to instantly begin editing when typing similar to how Excel behaves. In addition you may set the [`editModeClickAction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#editModeClickAction) property to `SingleClick` to allow users to quickly edit cells while navigating to other cells. By default double-clicking is required to enter edit mode. - -## Code Snippet - -The following demonstrates how to configure editing on the data grid and committing the data. - -```html - - - -``` - -```ts -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; - -this.onCommitClick = this.onCommitClick.bind(this); - -public onCommitClick() { - this.grid.commitEdits(); -} -``` - -## Undo/Redo batch changes - -The following demonstrates how to revert changes while batch updating is enabled. - -```html - - - - -``` - -```ts -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; - -public onUndoClick() { - this.grid.undo(); - if (this.grid.editMode === EditModeType.CellBatch && this.redo !== null) - { - this.redo.disabled = false; - } -} - -public onRedoClick() { - this.grid.redo(); -} -``` - -## Error Validation and Commit Integrity - -The following demonstrates how incorporate error by checking if cells are empty when leaving edit mode and accepts commits that are from updated cells only. - -```html - -``` - -```ts -import { IgcGridDataCommittingEventArgs } from 'igniteui-webcomponents-data-grids'; -import { TransactionType } from 'igniteui-webcomponents-core' - -this.onCellValueChanging = this.onCellValueChanging.bind(this); -this.grid.cellValueChanging = this.onCellValueChanging; - -this.onDataCommitting = this.onDataCommitting.bind(this); -this.grid.dataCommitting = this.onDataCommitting; - - -public onCellValueChanging (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) { - if (s.editMode === EditModeType.CellBatch && this.undo !== null) - { - this.undo.disabled = false; - } - - //check if value is empty upon exiting edit mode. - if (e.newValue === "") { - s.setEditError(e.editID, "Error, cell is empty"); - //or revert changes - s.rejectEdit(e.editID); - } - else { - s.acceptEdit(e.editID); - } -} - -public onDataCommitting (s: IgcDataGridComponent, e: IgcGridDataCommittingEventArgs) { - if (e.changes[0].transactionType === TransactionType.Update) { - //commit was passed - s.acceptCommit(e.commitID); - } - else{ - //commit was prevented - s.rejectCommit(e.commitID); - } -} -``` - -## API References - -- [`CellBatch`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.editmodetype.html#CellBatch) -- [`editModeClickAction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#editModeClickAction) -- [`editMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#editMode) -- `SingleClick` -- [`TransactionType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_core.transactiontype.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-merging.md deleted file mode 100644 index d5a7c0fbf..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-merging.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Web Components Data Grid | Cell Merging | Merging | Infragistics -_description: Use the cell merging feature of the Infragistics' Web Components data grid to join cells with duplicate values. -_keywords: Web Components Table, Data Grid, cell merging, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "MergedCellMode", "MergedCellEvaluationCriteria"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Cell Merging -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Cell Merging - -The Ignite UI for Web Components Data Table / Data Grid supports cell merging. You may opt-in and detect when adjacent sibling records for a specific column contains the same value. While the cells are not active, selected, or in edit mode, the value displays across the cells. - -## Web Components Grid Cell Merging Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Overview - -Cell Merging in the Web Components data grid can be configured by using the [`mergedCellMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#mergedCellMode) option of the entire Web Components grid or individual columns. This property can be set to one of the following options, listed below: - -- [`Never`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.mergedcellmode.html#Never): The grid or column will never merge cells. This is the default behavior. -- [`Always`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.mergedcellmode.html#Always): The grid or column will always attempt to merge cells. -- [`OnlyWhenSorted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.mergedcellmode.html#OnlyWhenSorted): The grid or column will only attempt to merge cells when a column is sorted. - -Note, regardless of the value of this property, cells can only be merged across sibling records. - -Cell merging can be evaluated based on whether the data is formatted or not using the [`mergedCellEvaluationCriteria`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#mergedCellEvaluationCriteria) property. This is applicable to the entire grid or individual columns and can be set to one of the following options, listed below: - -- [`RawValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.mergedcellevaluationcriteria.html#RawValue): Merge cells from adjacent rows when the raw values from the cells are the same. This is the default value. -- [`FormattedText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.mergedcellevaluationcriteria.html#FormattedText): Merge cells from adjacent rows when the formatted value from the cells is the same. - -
- -## API References - -- [`FormattedText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.mergedcellevaluationcriteria.html#FormattedText) -- [`mergedCellEvaluationCriteria`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#mergedCellEvaluationCriteria) -- [`mergedCellMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#mergedCellMode) -- [`OnlyWhenSorted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.mergedcellmode.html#OnlyWhenSorted) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-selection.md deleted file mode 100644 index 146f2c6b3..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-cell-selection.md +++ /dev/null @@ -1,649 +0,0 @@ ---- -title: Web Components Data Grid | Cell Selection | Selection | Infragistics -_description: Use cell and row selection of the Infragistics' Web Components data grid to highlight areas of the table. Learn how to configure single or multiple row selection for the Ignite UI for Web Components table. -_keywords: Web Components Table, Data Grid, cell selection, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridSelectionMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/cell-selection -_tocName: Cell Selection -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Selection - -The Ignite UI for Web Components Data Table / Data Grid supports single or multiple row and cell selection. - -## Web Components Grid Selection Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Overview - -Selection in the Web Components data grid is enabled on a row and cell level and can be configured by using the [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#selectionMode) option of the Web Components grid. This property takes five different options, listed below: - -- [`None`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#None): Selection is not enabled. -- [`SingleCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#SingleCell): Selection of a single cell is enabled. -- [`SingleRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#SingleRow): Selection of a single row is enabled. -- [`MultipleCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#MultipleCell): Selection of multiple cells is enabled. -- [`MultipleRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#MultipleRow): Selection of multiple rows is enabled. -- [`RangeCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#RangeCell): Selection of a range of multiple cells by clicking and dragging is enabled. - -[`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#selectionBehavior) defaults to `ModifierBased`, where only one row or cell is selected at a time and modifier keys (CTRL) are required to multi-select items. [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#selectionBehavior) set to `Toggle` will allow multiple rows or cells to be selected on single click only. - -[`MultipleRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#MultipleRow) includes the following functionality: - -- Click and drag to select rows -- SHIFT and click to select multiple rows. -- SHIFT and press the ↑ + ↓ arrow keys to select multiple rows. - -Pressing the space bar toggles selection of active row via [`MultipleRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#MultipleRow) or [`SingleRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#SingleRow). - -## Row Range Selection - -The following example demonstrates how to selected or deselected all rows in the grid. Note, [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#selectionMode) must be set to MultipleRow. - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## API References - -- `ModifierBased` -- [`MultipleCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#MultipleCell) -- [`MultipleRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#MultipleRow) -- [`RangeCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#RangeCell) -- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#selectionBehavior) -- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#selectionMode) -- [`SingleCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#SingleCell) -- [`SingleRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.datagridselectionmode.html#SingleRow) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-animation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-animation.md deleted file mode 100644 index e3e7a0c2d..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-animation.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: Web Components Data Grid | Column Animations | Infragistics -_description: Learn how to display column animations through events when moving or hiding columns with Infragistics' Ignite UI for Web Components data table & grid. Check out Ignite UI for Web Components table tutorials! -_keywords: Web Components Table, Data Grid, column animations, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Animations -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Column Animations - -The Ignite UI for Web Components Data Table / Data Grid supports Column Animation during events like Column Hiding or Column Moving. When Column Animation on the Web Components data grid is set, the corresponding animation will fire for all of the cells in that column. - -## Web Components Grid Column Animations Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Animation Properties - -Each column animation property is listed and described below: - -- [`columnAddingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnAddingAnimationMode): When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in. -- [`columnExchangingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnExchangingAnimationMode): When a column is exchanged, you have the option to have the exchanged column header and its cells slide to the left, right, top, or bottom. There are also options to have it fade as well as slide and fade. -- [`columnHidingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnHidingAnimationMode): When a column is hidden, you have the option to have the column header and its cells slide out to the left, right, top, or bottom. There are also options to have it fade out as well as slide and fade out. -- [`columnMovingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnMovingAnimationMode): When a column is moved, you have the option to have the column header and its cells slide over. -- [`columnPropertyUpdatingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnPropertyUpdatingAnimationMode): When a column's property changes, you have the option to have that property change animate by interpolating or deeply interpolating its change. -- [`columnShowingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnShowingAnimationMode): When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in. - -## Code Snippet - -The following demonstrates the implementation of each of the column animations described in this topic: - -```html - - -``` - -## API References - -- [`columnAddingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnAddingAnimationMode) -- [`columnExchangingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnExchangingAnimationMode) -- [`columnHidingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnHidingAnimationMode) -- [`columnMovingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnMovingAnimationMode) -- [`columnPropertyUpdatingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnPropertyUpdatingAnimationMode) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-chooser.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-chooser.md deleted file mode 100644 index c8b34bd93..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-chooser.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Web Components Data Grid | Column Chooser | Infragistics -_description: Learn how Infragistics' Ignite UI for Web Components grid component supports the ability to show and hide columns directly through the UI or by using the Web Components control. View Ignite UI for Web Components table demos for more information! -_keywords: Web Components Table, Data Grid, column chooser, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridColumn", "DataGridToolbar", "Button", "ColumnChooser", "ColumnHidingAnimationMode", "ColumnShowingAnimationMode", "ColumnChooserTitle"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Chooser -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Column Chooser Overview - -The Ignite UI for Web Components Data Grid supports the ability show and hide columns with the UI through the [`IgcDataGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html) component or by the [`columnChooser`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#columnChooser) component that provides flexibility to place it anywhere on the page. The [`isHidden`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcolumncomponent.html#isHidden) property on the columns can also be used to quickly hide or show a single column programmatically for manual column generation, and the value of [`isHidden`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcolumncomponent.html#isHidden) will reflect in the [`columnChooser`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#columnChooser) component. Each approach can be used interchangeably to change the visible state of the columns. - -## Web Components Grid Column Chooser Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Toolbar's Column Chooser UI - -The Column Chooser UI is accessible within the [`IgcDataGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html) component separate from the grid. For this purpose all we have to do is set the toolbar's [`columnChooser`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#columnChooser) property to true. The toolbar will then display a [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html), when clicked, will display the column chooser UI. This button also displays the total of hidden columns. If the toolbar is not created, enabling the [`columnChooser`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#columnChooser) property will have no effect and hide the button. - -The [`IgcDataGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html) provides additional properties such as adding a title to the toolbar by using the [`toolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#toolbarTitle) property, placing text in the [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) by setting the [`columnChooserText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#columnChooserText) property, and adding a title header to the column chooser UI by setting [`columnChooserTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#columnChooserTitle). - -The Column Chooser can be configured with animations by setting the grid's [`columnHidingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnHidingAnimationMode) and [`columnShowingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnShowingAnimationMode) properties. - -## Code Snippet - -The following demonstrates how to implement the Column Chooser Toolbar UI for the Web Components Data Grid: - -```html - - - - -``` - -```ts -import { IgcDataGrid } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbar } from 'igniteui-webcomponents-data-grids'; -import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids'; - -private grid: IgcDataGridComponent; -private toolbar: IgcDataGridToolbarComponent; - -connectedCallback() { - this.toolbar.targetGrid = this.grid; - let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent; - productNameColumn.isHidden = true; - this.toolbar.columnChooser = true; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnChooserText = "Choose Text"; - this.toolbar.columnChooserTitle = "Choose Title Text"; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; -} -``` - -## Simple Column Chooser - -Let's say we want to manually display the [`columnChooser`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#columnChooser) UI without the toolbar and put it anywhere we want on our page. This can be easily done by simply creating an instance of the component in our markup. - -## Demo - -```css -.gridContainer { - height: calc(100% - 20px); - width: calc(100%); - - padding: 10px; - margin: 0px; -} - -.gridOptionsLabel { - font-size: 13px; - font-family: "Verdana"; - padding-left: 1rem; - color: rgb(24, 29, 31); -} - -.columnChooserContainer { - margin: 20px; - min-width: 225px; - height: 500px; - display: flex; - flex-direction: column; - padding-left: 15px; - padding-right: 5px; - border: 1px gray; - border-radius: 10px; - box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25); - background-color: rgb(248, 248, 248); -} - -.columnsOrderOptionsContainer { - margin-top: 20px; - margin-bottom: 20px; -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Code Snippet - -The following demonstrates how to implement the Column Chooser UI for the Data Grid: - -```html - - - - - -``` - -```ts -import { IgcDataGrid } from 'igniteui-webcomponents-data-grids'; -import { IgcColumnChooser } from 'igniteui-webcomponents-data-grids'; -import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids'; - -private grid: IgcDataGridComponent; -private columnChooser: IgcColumnChooserComponent; - -connectedCallback() { - this.columnChooser.targetGrid = this.grid; - this.columnChooser.showAllText = "Show All"; - this.columnChooser.hideAllText = "Hide All"; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; -} -``` - -## API References - -- [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) -- [`columnChooserText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#columnChooserText) -- [`columnChooserTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#columnChooserTitle) -- [`columnChooser`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#columnChooser) -- [`columnHidingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnHidingAnimationMode) -- [`columnShowingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnShowingAnimationMode) -- [`IgcDataGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-filtering.md deleted file mode 100644 index 9f9a3a034..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-filtering.md +++ /dev/null @@ -1,937 +0,0 @@ ---- -title: Web Components Data Grid | Filtering | Infragistics -_description: Use Infragistics' Ignite UI for Web Components grid component to perform expressive sort conditions and return data easily. View Ignite UI for Web Components table's demo for more information! -_keywords: Web Components Table, Data Grid, column, filtering, filter expressions, filter operands, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "FilterExpressions", "FilterLogicalOperator", "FilterOperand"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/filtering -_tocName: Column Filtering -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Filtering Overview - -The Ignite UI for Web Components Data Table / Data Grid includes column filtering with both a filter row and API that gives you the ability to perform expressive sort conditions based on the data type of the column being filtered. - -## Web Components Grid Filtering Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -As seen above, setting the [`filterUIType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#filterUIType) property to FilterRow will enables the record filtering record to the user interface where the user can specify filter criteria to filter records. Records that do not match the specified filter criteria will be hidden. - -Filtering is also exposed in the column options UI by hovering a field and clicking the vertical ellipsis. This is achieved when setting the [`filterUIType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#filterUIType) to ColumnOptions. Please refer to the sample below. - -## Filter Expressions - -In the example below, the data grid's FilterExpressions collection is updated to incorporate custom [`filterExpressions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#filterExpressions). - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Filter Operators - -Columns can be given a custom [`IgcFilterOperand`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcfilteroperand.html) that will appear in the filter-row operand dropdown. The key requirements is to ensure the operand is given a [`displayName`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcfilteroperand.html#displayName) and to utilize the `FilterRequested` event on the operand so you can apply a [`filterFactory`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcfilteroperand.html#filterFactory), which is responsible for assigning the operator and value you wish to the filter the column by, e.g. StartsWith with value of "A". - -In addition, the grid's [`filterLogicalOperator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#filterLogicalOperator) property is responsible for indicating how filters across fields are combined: - -- [`And`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.filterlogicaloperator.html#And) logical operator. In order for a successful match, all conditions have to pass. -- [`Or`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.filterlogicaloperator.html#Or) logical operator. In order for a successful match, at least one of the conditions have to pass. - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## API References - -- [`displayName`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcfilteroperand.html#displayName) -- [`filterExpressions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#filterExpressions) -- [`filterFactory`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcfilteroperand.html#filterFactory) -- [`filterLogicalOperator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#filterLogicalOperator) -- [`IgcFilterOperand`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcfilteroperand.html) -- `FilterRequested` -- [`filterUIType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#filterUIType) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-moving.md deleted file mode 100644 index 580d7394f..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-moving.md +++ /dev/null @@ -1,356 +0,0 @@ ---- -title: Web Components Data Grid | Column Moving | Infragistics -_description: See how Infragistics' Ignite UI for Web Components Data Grid supports the ability to move columns and gives you the flexibility over how you wish to display your columns. View Ignite UI for Web Components table demos for more information! -_keywords: Web Components Table, Data Grid, column moving, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "ColumnMovingMode", "ColumnMovingAnimationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-moving -_tocName: Column Moving -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Column Moving Overview - -The Ignite UI for Web Components Data Grid supports the ability to move columns, giving you the flexibility over how you wish to display your columns with respect to the order of the columns shown. - -## Web Components Grid Column Moving Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -Column moving in the Ignite UI for Web Components Data Grid is on by default, and can be controlled by setting the [`columnMovingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnMovingMode) property of the grid. This property has two options, [`Deferred`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnmovingmode.html#Deferred) or [`None`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnmovingmode.html#None). [`Deferred`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnmovingmode.html#Deferred) will allow column moving, while [`None`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnmovingmode.html#None) will disable column moving for the entire grid. - -When column moving is set to [`Deferred`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnmovingmode.html#Deferred), a separator will show up while moving a column. While moving a column, once the mouse pointer is released, the moved column will take the place of the column placed to the right of the separator. This separator can also be customized in width and color by using the [`columnMovingSeparatorWidth`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnMovingSeparatorWidth) and [`columnMovingSeparatorBackground`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnMovingSeparatorBackground) properties, respectively. - -You can also animate the column movements, if you wish. This can be done by setting the [`columnMovingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnMovingAnimationMode) property of the grid. Animations are not on by default. - -## Code Snippet - -The following demonstrates how to implement column moving in the Ignite UI for Web Components Data Grid with deferred column moving, animations enabled, and a 5px wide separator: - - - -```ts -import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids'; -import { ColumnMovingMode } from 'igniteui-webcomponents-data-grids'; -``` - -```html - - -``` - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - -## API References - -- [`columnMovingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnMovingAnimationMode) -- [`columnMovingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnMovingMode) -- [`columnMovingSeparatorBackground`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnMovingSeparatorBackground) -- [`columnMovingSeparatorWidth`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnMovingSeparatorWidth) -- [`Deferred`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnmovingmode.html#Deferred) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-options.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-options.md deleted file mode 100644 index 0fbe29090..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-options.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Web Components Data Grid | Column Options | Infragistics -_description: See how Infragistics' Ignite UI for Web Components Data Grid supports the ability to pin, move, filter, and sort columns individually through a drop down UI from each column header. Check out Ignite UI for Web Components table's column option! -_keywords: Web Components Table, Data Grid, column options, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "HeaderClickAction", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Options -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Column Options Overview - -The Ignite UI for Web Components Data Grid supports the ability to group, hide, sort, move, pin, filter, and sort columns directly from a UI exposed on each column header. - -To enable the column options ui you can set the grid's [`isColumnOptionsEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#isColumnOptionsEnabled) property to true. - -## Web Components Grid Column Options Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Column Options Configurations - -Filtering can be toggled per column by setting the column's [`isFilteringEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcolumncomponent.html#isFilteringEnabled) property. Setting true or false will show or hide the filtering section in the column's options ui. - -Sorting can be toggled for the entire grid if the [`headerClickAction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#headerClickAction) property is applied. Setting this to [`None`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.headerclickaction.html#None) for example will completely remove sorting from grid and reflect in the options ui for each column. And setting [`SortByOneColumnOnly`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.headerclickaction.html#SortByOneColumnOnly) for example will continue to allow one column to be sorted at a time. - -## Code Snippet - -The following code demonstrates how to programmatically enable the column options ui adjust filtering and sorting in the column options ui by adjusting the grid and column. - - - -```ts -import { HeaderClickAction } from 'igniteui-webcomponents-data-grids'; - -//enable column options -this.grid.isColumnOptionsEnabled="true"; - -//adjust filtering for column -let idColumn = this.grid.actualColumns.item(0); -idColumn.isFilteringEnabled="false"; - -//adjust sorting -this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly; -``` - -```html - - - -``` - -## API References - -- [`headerClickAction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#headerClickAction) -- [`isColumnOptionsEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#isColumnOptionsEnabled) -- [`isFilteringEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcolumncomponent.html#isFilteringEnabled) -- [`SortByOneColumnOnly`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.headerclickaction.html#SortByOneColumnOnly) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-pinning.md deleted file mode 100644 index 5f2635e78..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-pinning.md +++ /dev/null @@ -1,782 +0,0 @@ ---- -title: Web Components Data Grid | Column Pinning | Infragistics -_description: See how Infragistics' Ignite UI for Web Components grid component supports the ability to pin columns and gives you the flexibility over how you wish to position your columns. View Ignite UI for Web Components table demos for more information! -_keywords: Web Components Table, Data Grid, column pinning, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "PinnedPositions", "PinColumn", "ColumnPinning", "DataGridToolbar", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-pinning -_tocName: Column Pinning -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Column Pinning Overview - -The Ignite UI for Web Components Data Grid supports the ability to pin columns, allowing the end users to lock a column in a particular column order. - -A column or multiple columns can be pinned to the left-hand or right-hand side of the Data Grid. In addition, you can change the pin state of the columns by utilizing the [`pinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#pinColumn) function. - -## Web Components Grid Column Pinning Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -The Column Pinning API in the Data Grid can be enabled by setting either a column's [`pinned`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcolumncomponent.html#pinned) property, or when setting it by utilizing the [`pinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#pinColumn) function of the grid. - -The [`pinned`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcolumncomponent.html#pinned) property has three options: - -- Left - enabling [`Left`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.pinnedpositions.html#Left) will position pinned columns to the left-hand side of the grid. -- Right - enabling [`Right`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.pinnedpositions.html#Right) will position pinned columns to the right side of the grid. -- None - enabling [`None`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.pinnedpositions.html#None) will unpin a column and reposition its default placement within the grid. - -Unpinned columns that are adjacent to pinned columns will still maintain horizontal scrolling. - -The [`pinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#pinColumn) function contains two required parameters. The first parameter is the column to be pinned, and the second is with the [`PinnedPositions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.pinnedpositions.html) enumeration setting. - -## Code Snippet - -The following code demonstrates how to implement column pinning in the Web Components Data Grid with column pinning by using the [`pinned`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcolumncomponent.html#pinned) property and [`pinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#pinColumn) function: - - - -```html - - - - - - - - - - - - - -``` - - - -```ts -import { PinnedPositions } from 'igniteui-webcomponents-data-grids'; - -onButtonPinLeft() { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - // pinColumn Function - this.grid.pinColumn(idColumn, PinnedPositions.Left); - this.grid.pinColumn(firstNameColumn, PinnedPositions.Left); - this.grid.pinColumn(lastNameColumn, PinnedPositions.Left); -} - -onButtonPinRight() { - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.Right; - cityColumn.pinned = PinnedPositions.Right; - countryColumn.pinned = PinnedPositions.Right; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.Right); - this.grid.pinColumn(cityColumn, PinnedPositions.Right); - this.grid.pinColumn(countryColumn, PinnedPositions.Right); -} - -onButtonUnPin() { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - //pinColumn function - this.grid.pinColumn(idColumn, PinnedPositions.None); - this.grid.pinColumn(firstNameColumn, PinnedPositions.None); - this.grid.pinColumn(lastNameColumn, PinnedPositions.None); - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.None; - cityColumn.pinned = PinnedPositions.None; - countryColumn.pinned = PinnedPositions.None; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.None); - this.grid.pinColumn(cityColumn, PinnedPositions.None); - this.grid.pinColumn(countryColumn, PinnedPositions.None); -} -``` - -## Toolbar's Column Pinning UI - -The Column Pinning UI is accessible within the [`IgcDataGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html) component separate from the grid. For this purpose all we have to do is set the toolbar's `columnPinning` property to true. The toolbar will then display a [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html), when clicked, will display the column pinning UI. This button also displays the total of pinned-left columns. If the toolbar is not created, enabling the `columnPinning` property will have no effect and hide the button. - -The [`IgcDataGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html) provides additional properties such as adding a title to the toolbar by using the [`toolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html#toolbarTitle) property, placing text in the [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) by setting the `columnPinningText` property, and adding a title header to the column hiding UI by setting `columnPinningTitle`. - -## Demo - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -## Code Snippet - - - -```html - - - - -``` - - - -```ts -import { IgcDataGrid } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbar } from 'igniteui-webcomponents-data-grids'; - -private grid: IgcDataGridComponent; -private toolbar: IgcToolbarComponent; - -connectedCallback() { - this.toolbar.targetGrid = this.grid; - let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent; - productNameColumn.pinned = true; - this.toolbar.columnPinning = true; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnPinningText = "Pinning Text"; - this.toolbar.columnPinningTitle = "Pinning Title Text"; -} -``` - -## API References - -- [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) -- [`IgcDataGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridtoolbarcomponent.html) -- [`pinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#pinColumn) -- [`PinnedPositions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.pinnedpositions.html) -- [`pinned`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcolumncomponent.html#pinned) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-resizing.md deleted file mode 100644 index 3ff262c60..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-resizing.md +++ /dev/null @@ -1,370 +0,0 @@ ---- -title: Web Components Data Grid | Column Resizing | Infragistics -_description: Start using Infragistics' Web Components grid component to resize columns, giving you flexibility over how you wish to display your columns with respect to the width of each. View Ignite UI for Web Components table demos for more information! -_keywords: Web Components Table, Data Grid, column resizing, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "ColumnResizingMode", "ColumnResizingAnimationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-resizing -_tocName: Column Resizing -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Column Resizing - -The Ignite UI for Web Components Data Grid supports the ability to resize columns, giving you flexibility over how you wish to display your columns with respect to the width of each. - -## Web Components Grid Column Resizing Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -Column resizing in the Ignite UI for Web Components DataGrid is on by default, and can be controlled by using the [`columnResizingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnResizingMode) property of the grid. This property has three options. Each option is explained below: - -- [`Deferred`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnresizingmode.html#Deferred): The default option. When resizing, a separator will appear showing how large or small the column will become when resized. -- [`Immediate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnresizingmode.html#Immediate): When resizing, there will be no separator. The column's width will follow the pointer as you drag the edge of the column and resize accordingly. -- [`None`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnresizingmode.html#None): Columns cannot be resized. - -When column resizing is set to [`Deferred`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnresizingmode.html#Deferred), the separator that shows up can be modified in color and width by using the [`columnResizingSeparatorBackground`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnResizingSeparatorBackground) and [`columnResizingSeparatorWidth`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnResizingSeparatorWidth) properties of the grid, respectively. - -You can also animate the columns as they resize when the resizing mode is set to [`Deferred`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnresizingmode.html#Deferred) only. This is done by setting the [`columnResizingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnResizingAnimationMode) property to [`Interpolate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnresizinganimationmode.html#Interpolate). - -Each column in the grid can be determined whether or not it can resize individually. If you want to enable or disable resizing on a particular column, you can set the IsResizingEnabled property of that column. - -When resizing a star-width column, it will change that column to a fixed column. - -## Code Snippet - -The following code snippet demonstrates how to implement column resizing in the Web Components data grid, where the Street column in this case will not be resizable. In this case, the column resizing separator will be 5 pixels wide and the columns that are resizable would animate when resized as well: - - - -```ts -import { ColumnResizingMode } from 'igniteui-webcomponents-data-grids'; -import { ColumnResizingAnimationMode } from 'igniteui-webcomponents-data-grids'; -``` - -```html - - - - - - -``` - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - -## API References - -- [`columnResizingAnimationMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnResizingAnimationMode) -- [`columnResizingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnResizingMode) -- [`columnResizingSeparatorBackground`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnResizingSeparatorBackground) -- [`columnResizingSeparatorWidth`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#columnResizingSeparatorWidth) -- [`Deferred`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnresizingmode.html#Deferred) -- [`Interpolate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.columnresizinganimationmode.html#Interpolate) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-sorting.md deleted file mode 100644 index d39889484..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-sorting.md +++ /dev/null @@ -1,362 +0,0 @@ ---- -title: Web Components Data Grid | Column Sorting | Infragistics -_description: Use Infragistics' Web Components grid component's sorting feature to configure a mix of sortable and non-sortable columns, with rich API and data sorting. View Ignite UI for Web Components tutorials! -_keywords: Web Components Table, Data Grid, column, sorting, row, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "HeaderClickAction"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/sorting -_tocName: Column Sorting -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Sorting Overview - -The Ignite UI for Web Components Data Table / Data Grid supports ascending and descending column sorting with a Single Column, Multi-Column and Tri-State Column Sorting configuration. - -## Web Components Grid Sorting Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Code Snippet - -You can sort by a single or multiple column ascending or descending in the Web Components data grid by using the [`headerClickAction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#headerClickAction) property. If TriState is enabled you can remove the sort applied to a column. - -- [`SortByMultipleColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.headerclickaction.html#SortByMultipleColumns) -- [`SortByMultipleColumnsTriState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.headerclickaction.html#SortByMultipleColumnsTriState) -- [`SortByOneColumnOnly`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.headerclickaction.html#SortByOneColumnOnly) -- [`SortByOneColumnOnlyTriState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.headerclickaction.html#SortByOneColumnOnlyTriState) - - - -```ts -import { HeaderClickAction } from 'igniteui-webcomponents-data-grids'; -``` - -```html - - -``` - -## Sorting through API - -```ts -import { IgcColumnSortDescription } from 'igniteui-webcomponents-data-grids'; -import { ListSortDirection } from 'igniteui-webcomponents-core'; - -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; - -let colSortDesc = new IgcColumnSortDescription(); -colSortDesc.field = "UnitsInStock"; -colSortDesc.sortDirection = ListSortDirection.Descending; -grid1.sortDescriptions.add(colSortDesc); -``` - -## API References - -- [`headerClickAction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#headerClickAction) -- [`SortByMultipleColumnsTriState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.headerclickaction.html#SortByMultipleColumnsTriState) -- [`SortByMultipleColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.headerclickaction.html#SortByMultipleColumns) -- [`SortByOneColumnOnlyTriState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.headerclickaction.html#SortByOneColumnOnlyTriState) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-summaries.md deleted file mode 100644 index 646e17dbe..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-summaries.md +++ /dev/null @@ -1,444 +0,0 @@ ---- -title: Web Components Data Grid | Column Summaries | Infragistics -_description: Use Infragistics' Web Components grid component's column summaries feature to display summarized data such as count, max, min and many more. Check out Ignite UI for Web Components table demos! -_keywords: Web Components Table, Data Grid, column, summaries, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Implementation.Grid", "SummaryScope", "GroupSummaryDisplayMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/summaries -_tocName: Column Summaries -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Column Summaries - -The Ignite UI for Web Components Data Table / Data Grid supports column summaries. In some cases, your end users may be overwhelmed by the amount of data displayed in the grid, and often may be looking for a summary of the data. Your end users may also want to derive additional information from the data of a specific column. Summaries help your end users achieve this, and you can enable them by setting the [`SummaryScope`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.summaryscope.html) property. - -## Web Components Column Summaries Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Summary Scope Property - -The Web Components data grid supports 4 summary settings that you can configure using the [`SummaryScope`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.summaryscope.html) property. These are listed and described below: - -- [`Root`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.summaryscope.html#Root): This will display a grand total for all rows in the grid for the column the summary is applied to. -- [`Groups`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.summaryscope.html#Groups): This is specific to grouped rows and shows the grand total for all rows in a particular group. -- [`Both`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.summaryscope.html#Both): This will use the [`Groups`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.summaryscope.html#Groups) and [`Root`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.summaryscope.html#Root) options simultaneously. -- [`None`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.summaryscope.html#None): This will disable summaries for the grid. - -## Group Summary Display Mode Property - -The Web Components data grid supports configuration of the locations that summaries are displayed. You can configure this by using the [`GroupSummaryDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.groupsummarydisplaymode.html) property. The different options for this property are listed and described below: - -- **List**: This will render the group summaries in a flat list in the spanning group header. -- **Cells**: This will render the group header as cells, and the summary values will be rendered inside the cells, aligned with their corresponding column. The grid will only display a single summary per column using this option. -- **RowTop**: This will render the group summaries as summary rows at the top of the group. -- **RowBottom**: This will render the group summaries as summary rows at the bottom of the group. -- **None**: This will disable group summary rendering. - -## Code Snippets - -```html - - - - - - - -``` - -```ts -import { IgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids'; -import { IgcColumnSummaryDescription } from 'igniteui-webcomponents-data-grids' -import { SummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-webcomponents-core'; - -connectedCallback() { - - // Count Operand - const productCount = new IgcColumnSummaryDescription(); - productCount.field = "ProductName"; - productCount.operand = SummaryOperand.Count; - this.grid.summaryDescriptions.add(productCount); - // Min Operand with formatting - const priceMin = new IgcColumnSummaryDescription(); - priceMin.field = "BundlePrice"; - priceMin.operand = SummaryOperand.Min; - priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMin); - // Max Operand and formatting - const priceMax = new IgcColumnSummaryDescription(); - priceMax.field = "BundlePrice"; - priceMax.operand = SummaryOperand.Max; - priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMax); - // Sum Operand - const orderSum = new IgcColumnSummaryDescription(); - orderSum.field = "OrderItems"; - orderSum.operand = SummaryOperand.Sum; - this.grid.summaryDescriptions.add(orderSum); - // Average Operand and formatting - const orderValueAvg = new IgcColumnSummaryDescription(); - orderValueAvg.field = "OrderValue"; - orderValueAvg.operand = SummaryOperand.Average; - orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(orderValueAvg); -} -``` - -## Custom Summaries - -In some situations, you may want to expand the default set of summaries. For example, if you were looking to show the number of times a particular value in a column appears, a custom summary would be required for this. - -The snippets below demonstrate how to display a Count for number of "USA" values appear in the column. - -```ts -import { IgcProvideCalculatorEventArgs } from 'igniteui-webcomponents-core'; - -onLoad() { - - const countries = new IgcColumnSummaryDescription(); - countries.field = "Countries"; - countries.operand = SummaryOperand.Custom; - countries.provideCalculator = this.onProvideCalculator; //refer to class below - this.grid.summaryDescriptions.add(countries); - -} - -onProvideCalculator(s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) { - e.calculator = new CustomDomestic(); -} - -// Custom Calculator - calculates the count for all USA. -class CustomDomestic extends SummaryCalculator -{ - get displayName(): string { - return "USA"; - } - public usCountries: number; - - public beginCalculation(a: IDataSource, b: string): void { - super.beginCalculation(a,b); - this.usCountries = 0; - } - public endCalculation(): ISummaryResult { - return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries) - } - public aggregate(a: any): void { - if (a.Countries === "USA") - { - this.usCountries++; - } - } -} -``` - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) -- [`groupSummaryDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#groupSummaryDisplayMode) -- [`summaryScope`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#summaryScope) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-types.md deleted file mode 100644 index db0c450ed..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-column-types.md +++ /dev/null @@ -1,540 +0,0 @@ ---- -title: Web Components Data Grid | Column Types | Infragistics -_description: Learn how Infragistics' Ignite UI for Web Components data table & grid supports four column types to display your content such as Image, Text, Numeric, DataTime or a Template Column. View Ignite UI for Web Components tutorials! -_keywords: Web Components Table, Data Grid, column types, Ignite UI for Web Components, Infragistics -mentionedTypes: [ "Grid","CellInfo", "TemplateCellInfo", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/column-types -_tocName: Column Types -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Column Types - -The Ignite UI for Web Components Data Table / Data Grid supports 5 column types, plus a Template Column type, giving you complete flexibility over the way your data is displayed in the Web Components data grid. Column types supported are Text column, Numeric column, DateTime column, Image column, ComboBox and Template. - -Each column binds to data by setting the [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcolumncomponent.html#field) property to the name of the corresponding property on the items of your underlying data source bound to the Web Components data grid. - -## Web Components Column Types Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Text Column - -The Web Components data grid is used for displaying formatted text in its associated cells. This is the default column type used to display data of the string type. - -## Numeric Column - -The [`IgcNumericColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcnumericcolumncomponent.html) is used for displaying a formatted numeric value in its associated cells and enables control of decimal place placement within cells and displaying fractional digits. - -## DateTime Column - -The [`IgcDateTimeColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatetimecolumncomponent.html) is used for displaying Date objects in its associated cells and enables control to format the Date objects how you see fit. - -## Image Column - -The [`IgcImageColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcimagecolumncomponent.html) is used for displaying an image within a cell and exposes options for image stretch customization for cells by using its [`imageStretchOption`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcimagecolumncomponent.html#imageStretchOption) option. - -You can also choose what type of resource your image is by setting the [`ImageResourceType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.imageresourcetype.html) option. - -## ComboBox Column - -The [`IgcComboBoxColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igccomboboxcolumncomponent.html) is used for displaying a drop-down list from which your end users can select a single item. - -Data binding can be achieved using an array of complex objects via the column's `DataSource` property. - -The [`textField`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igccomboboxcolumncomponent.html#textField) property determines which value is shown when users make a selection. - -The [`valueField`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igccomboboxcolumncomponent.html#valueField) property determines the bound value of the underlying data item selected. This is necessary if your list of objects have several properties. - -## Template Column - -The [`IgcTemplateColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igctemplatecolumncomponent.html) is used in conjunction with a cell template. It enables you to apply a custom template to the column's cell. This is done by handling the `CellUpdating` event of the template column. - -The `CellUpdating` event's arguments expose the [`IgcTemplateColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igctemplatecolumncomponent.html) that fires the event as well as a [`IgcTemplateCellUpdatingEventArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igctemplatecellupdatingeventargs.html) parameter. This event arguments parameter exposes a `Content` property that returns the HTMLDivElement that will be placed within the associated cells of the column. You can then append new elements to this div. - -The [`IgcTemplateCellUpdatingEventArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igctemplatecellupdatingeventargs.html) also exposes a `CellInfo` property that you can use to get a `TemplateCellInfo` object. This object exposes information about the cell and the row, such as the index, underlying data item, and appearance of the cell. - -## Sparkline Column - -You can embed Sparkline components in [`IgcTemplateColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igctemplatecolumncomponent.html) to show more complex data structures. -Refer to the [Column Sparkline](type-sparkline-table.md) topic for information on how to do this. - -## Code Snippet - -The following demonstrates the implementation of each of the columns described in this topic: - -```html - - - - - - - - - -``` - -```ts -import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellInfo } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids'; - -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; - -let cityComboColumn = document.getElementById('city') as IgcComboBoxColumnComponent; - -if (cityComboColumn) - this.allCities = DataGridSharedData.getAllCities(); - cityComboColumn.dataSource = this.cityList; - cityComboColumn.textField = "name"; - -let TemplateColumn = (document.getElementById("Address") as IgcTemplateColumnComponent); -TemplateColumn.cellUpdating = onCellUpdating; - -onCellUpdating(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs): void { - // alert("onAddressCellUpdating"); - const content = e.content as HTMLDivElement; - let span1: HTMLSpanElement | null = null; - let span2: HTMLSpanElement | null = null; - const info = e.cellInfo as IgcTemplateCellInfo ; - const item = info.rowItem; - - if (content.childElementCount === 0) { - - span1 = document.createElement("span"); - span2 = document.createElement("span"); - - content.style.verticalAlign = "top"; - content.style.marginTop = "15px"; - content.style.lineHeight = "normal"; - content.style.display = "inline-grid"; - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0] as HTMLSpanElement; - span2 = content.children[1] as HTMLSpanElement; - } - - if (span1 && span2) { - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } -} -``` - -The following is a sample data source to use with the above columns. - -```ts -const maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Torrey", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; -const femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; -const lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "Betts", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Newberry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adama", "Power", "Tesla"]; -const genders: string[] = ["male", "female"]; -const cities: string[] = ["New York, New York", "Columbus, Ohio", "Los Angeles, California", "Orlando, Florida", "New Orleans, Louisiana", "Las Vegas, Nevada", "Atlanta, Georgia"]; -const roadSuffixes: string[] = ["Road", "Street", "Court", "Way"]; -const roadNames: string[] = ["Alpha", "Beta", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Julia", "Kilo", "Lima", "Mike", "November"]; - -const people: any[] = []; - -let maleCount: number = 0; -let femaleCount: number = 0; -for (let i = 0; i < 250; i++) { - - const age: number = Math.round(this.getRandomNumber(20, 40)); - const today: Date = new Date(); - const gender: string = this.getRandomItem(genders); - - let firstName: string; - const lastName: string = this.getRandomItem(lastNames); - - const propertyNum: string = Math.round(this.getRandomNumber(1, 300)).toString(); - const cityState: string = this.getRandomItem(cities); - const road: string = this.getRandomItem(roadNames) + " " + this.getRandomItem(roadSuffixes); - - let photoPath: string; - - if (gender === "male") { - firstName = this.getRandomItem(maleNames); - maleCount++; - - if (maleCount > 26) { - maleCount = 0; - } - - if (maleCount < 10) { - photoPath = '/assets/GUY0' + maleCount.toString() + '.png'; - } - else { - photoPath = '/assets/GUY' + maleCount.toString() + '.png'; - } - } - else { - firstName = this.getRandomItem(femaleNames); - femaleCount++; - - if (femaleCount > 24) { - femaleCount = 0; - } - - if (femaleCount < 10) { - photoPath = '/assets/GIRL0' + femaleCount.toString() + '.png'; - } - else { - photoPath = '/assets/GIRL' + femaleCount.toString() + '.png'; - } - } - - const path: string = './assets/GIRL01.png'; - - const birthday: Date = new Date(today.getFullYear() - age, Math.round(this.getRandomNumber(1, 12)), Math.round(this.getRandomNumber(1, 28))); - - people.push({ - Address: propertyNum + " " + road + ", " + cityState, - Age: age, - Birthday: birthday, - City: cityState, - FirstName: firstName, - LastName: lastName, - Photo: path, - Street: propertyNum + " " + road + "," - }); -} - -this.data = people; - -public getRandomNumber(min: number, max: number): number { - return min + Math.random() * (max - min); -} - -public getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; -} -``` - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) -- `CellInfo` -- `CellUpdating` -- [`IgcComboBoxColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igccomboboxcolumncomponent.html) -- `Content` -- `DataSource` -- [`IgcDateTimeColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatetimecolumncomponent.html) -- [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcolumncomponent.html#field) -- [`IgcImageColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcimagecolumncomponent.html) -- [`ImageResourceType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_grids.imageresourcetype.html) -- `ImageStretchOption` -- [`IgcNumericColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcnumericcolumncomponent.html) -- `TemplateCellInfo` -- [`IgcTemplateCellUpdatingEventArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igctemplatecellupdatingeventargs.html) -- [`IgcTemplateColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igctemplatecolumncomponent.html) -- `TextField` -- `ValueField` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-horizontal-scrolling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-horizontal-scrolling.md deleted file mode 100644 index 6a59d634a..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-horizontal-scrolling.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -title: Web Components Data Grid | Horizontal Scrolling | Infragistics -_description: Use Infragistics' Web Components grid component's horizontal scrolling feature to scroll seamlessly through the columns. Check out Ignite UI for Web Components table demos! -_keywords: Web Components Table, Data Grid, column, horizontal, scrolling, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Horizontal Scrolling -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Horizontal Scrolling - -The Ignite UI for Web Components Data Table / Data Grid supports Horizontal Scrolling is enabled by setting the total width of the columns greater than the width of the Web Components data grid. - -## Web Components Horizontal Scrolling Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Setting Default Column Width - -```html - - -``` - -## Setting Individual Column Widths - -```html - - - - - - - - - - -``` - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-live-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-live-data.md deleted file mode 100644 index aad378891..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-live-data.md +++ /dev/null @@ -1,1059 +0,0 @@ ---- -title: Web Components Data Grid | Data Animation | Data Binding | Infragistics -_description: Use Infragistics' Web Components table to handle thousands of updates per seconds while remaining responsive. View Ignite UI for Web Components table demos! -_keywords: Web Components Table, Data Grid, live data updates, Ignite UI for Web Components, Infragistics, data binding -mentionedTypes: ["Implementation.Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Live Data -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Binding Live Data - -The Ignite UI for Web Components Data Table / Data Grid is able to handle thousands of updates per seconds, while keeping the grid responsive for any interaction that the user may undertake. You can use the following sample to check performance of the Grid handling under various live data scenarios by adjusting interval between data updates as well as volume of data updates. - -## Web Components Binding Live Data Example - -```typescript -/* tslint:disable */ -export const Regions: any[] = [ - { - "Name": "North America", - "Countries": [ "Canada", "United States", "Mexico" ] - }, - { - "Name": "Middle East", - "Countries": [ "Turkey", "Iraq", "Saudi Arabia", "Syria", "UAE", "Israel", "Jordan", "Lebanon", "Oman", "Kuwait", "Qatar", "Bahrain", "Iran" ] - }, - { - "Name": "Europe", - "Countries": [ "Russia", "Germany", "France", "United Kingdom", "Italy", "Spain", "Poland", "Romania", "Netherlands", "Belgium", "Greece", - "Portugal", "Czechia", "Hungary", "Sweden", "Austria", "Switzerland", "Bulgaria", "Denmark", "Finland", "Slovakia", "Norway", - "Ireland", "Croatia", "Slovenia", "Estonia", "Iceland",] - }, - { - "Name": "Africa", - "Countries": [ "Nigeria", "Ethiopia", "Egypt", "South Africa", "Algeria", "Morocco", "Cameroon", "Niger", "Senegal", "Tunisia", "Libya"] - }, - { - "Name": "Asia Pacific", - "Countries": [ "Afghanistan", "Australia", "Azerbaijan", "China", "Hong Kong", "India", "Indonesia", - "Japan", "Malaysia", "New Zealand", "Pakistan", "Philippines", "Korea", "Singapore", "Taiwan", "Thailand"] - }, - { - "Name": "South America", - "Countries": [ "Argentina", "Bolivia", "Brazil", "Chile", "Colombia", "Ecuador", "Guyana", "Paraguay", "Peru", "Suriname", "Uruguay", "Venezuela" ] - } -] - -export const DealType: any[] = [ - "Buy", "Sell" -] - -export const Contracts: any[] = [ - "Forwards", "Futures", "Options", "Swap", "CFD" -] - -export const Settlements: any[] = [ - "Credit", "Cash", "Loan" -] - -export const SectorTypes: any[] = [ - "Public", "Private", "Government" -] - -export const CurrencyTypes: any[] = [ - "USD", "EUR", "PLN", "GBP", "YEN" -] - -export const CountryRisks: any[] = [ - "Low", "High", -] - -export const SecurityTypes: any[] = [ - "Poor", "Good", "High", -] - -export const IssuerNames: any[] = [ - "American Airlines", "Delta Airlines", "Southwest", "FedEx", -] - -export const RatingTypes: any[] = [ - "AAA", "BBB", "CCC", -] - -export const DefaultData: any[] = [ -{ - "IndGroup": "Airlines", - "IndSector": "Consumer, Cyclical", - "IndCategory": "Airlines", - // "Sector": "Public", - // "Sector": "Pfd", - // "Contract": "Complete", - // "Issuer": "AMERICAN AIRLINES GROUP", - // "Rating": "WR", - "Fitch": "N.A.", - "Collateral": "Assets", - // "Currency": "USD", - // "Security": "001765866 Pfd", - "Transactions": "1765866", - // "Ticker": "AAL", - "CPN": "7.875", - "Maturity": "7/13/2022", - "Spread": 28.302, - "KRD_3YR": 0.06, - "KRD_5YR": 0.36, - "KRD_1YR": -0.17, -}]; - -export const DataItems: any[] = [ -{ - "Category": "Metal", - "Type": "Gold", - "Spread": 0.01, - "Open": 1281.10, - "Price": 1280.7317, - "Buy": 1280.7267, - "Sell": 1280.7367, - "Change": -0.3683, - "Change (%)": -0.0287, - "Volume": 48387, - "High (D)": 1289.50, - "Low (D)": 1279.10, - "High (Y)": 1306, - "Low (Y)": 1047.20, - "Start (Y)": 1176.60, - "Change On Year(%)": 8.8502 -}, -{ - "Category": "Metal", - "Type": "Silver", - "Spread": 0.01, - "Open": 17.43, - "Price": 17.42, - "Buy": 17.43, - "Sell": 17.43, - "Change": -0.01, - "Change (%)": -0.0574, - "Volume": 11720, - "High (D)": 17.51, - "Low (D)": 17.37, - "High (Y)": 18.06, - "Low (Y)": 13.73, - "Start (Y)": 15.895, - "Change On Year(%)": 9.5942 -}, -{ - "Category": "Metal", - "Type": "Copper", - "Spread": 0.02, - "Open": 2.123, - "Price": 2.113, - "Buy": 2.123, - "Sell": 2.123, - "Change": -0.01, - "Change (%)": -0.471, - "Volume": 28819, - "High (D)": 2.16, - "Low (D)": 2.11, - "High (Y)": 2.94, - "Low (Y)": 1.96, - "Start (Y)": 2.45, - "Change On Year(%)": -13.7551 -}, -{ - "Category": "Metal", - "Type": "Platinum", - "Spread": 0.01, - "Open": 1071.60, - "Price": 1071.0993, - "Buy": 1071.0943, - "Sell": 1071.1043, - "Change": -0.5007, - "Change (%)": -0.0467, - "Volume": 3039, - "High (D)": 1081.20, - "Low (D)": 1070.50, - "High (Y)": 1120.60, - "Low (Y)": 812.40, - "Start (Y)": 966.50, - "Change On Year(%)": 10.8225 -}, -{ - "Category": "Metal", - "Type": "Palladium", - "Spread": 0.01, - "Open": 600.55, - "Price": 601.0005, - "Buy": 600.9955, - "Sell": 601.0055, - "Change": 0.4505, - "Change (%)": 0.075, - "Volume": 651, - "High (D)": 607.20, - "Low (D)": 598.40, - "High (Y)": 690, - "Low (Y)": 458.6, - "Start (Y)": 574.3, - "Change On Year(%)": 4.6492 -}, -{ - "Category": "Oil", - "Type": "Oil", - "Spread": 0.015, - "Open": 45.54, - "Price": 45.7899, - "Buy": 45.7824, - "Sell": 45.7974, - "Change": 0.2499, - "Change (%)": 0.5487, - "Volume": 107196, - "High (D)": 45.94, - "Low (D)": 45.00, - "High (Y)": 65.28, - "Low (Y)": 30.79, - "Start (Y)": 48.035, - "Change On Year(%)": -4.6739 -}, -{ - "Category": "Oil", - "Type": "Brent", - "Spread": 0.01, - "Open": 46.06, - "Price": 46.05, - "Buy": 46.06, - "Sell": 46.06, - "Change": -0.01, - "Change (%)": -0.0217, - "Volume": 59818, - "High (D)": 46.48, - "Low (D)": 45.60, - "High (Y)": 71.14, - "Low (Y)": 30.02, - "Start (Y)": 50.58, - "Change On Year(%)": -8.9561 -}, -{ - "Category": "Oil", - "Type": "Natural Gas", - "Spread": 0.02, - "Open": 2.094, - "Price": 2.104, - "Buy": 2.094, - "Sell": 2.094, - "Change": 0.01, - "Change (%)": 0.4776, - "Volume": 2783, - "High (D)": 2.11, - "Low (D)": 2.09, - "High (Y)": 3.20, - "Low (Y)": 1.84, - "Start (Y)": 2.52, - "Change On Year(%)": -16.5079 -}, -{ - "Category": "Oil", - "Type": "Gas", - "Spread": 0.015, - "Open": 1.5086, - "Price": 1.9532, - "Buy": 1.9457, - "Sell": 1.9607, - "Change": 0.4446, - "Change (%)": 29.4686, - "Volume": 2646, - "High (D)": 1.9532, - "Low (D)": 1.50, - "High (Y)": 2.05, - "Low (Y)": 1.15, - "Start (Y)": 1.60, - "Change On Year(%)": 22.0727 -}, -{ - "Category": "Oil", - "Type": "Diesel", - "Spread": 0.015, - "Open": 1.3474, - "Price": 1.3574, - "Buy": 1.3474, - "Sell": 1.3474, - "Change": 0.01, - "Change (%)": 0.7422, - "Volume": 2971, - "High (D)": 1.36, - "Low (D)": 1.34, - "High (Y)": 2.11, - "Low (Y)": 0.92, - "Start (Y)": 1.515, - "Change On Year(%)": -10.4026 -}, -{ - "Category": "Oil", - "Type": "Ethanol", - "Spread": 0.01, - "Open": 1.512, - "Price": 2.7538, - "Buy": 2.7488, - "Sell": 2.7588, - "Change": 1.2418, - "Change (%)": 82.1323, - "Volume": 14, - "High (D)": 2.7538, - "Low (D)": 1.1168, - "High (Y)": 2.7538, - "Low (Y)": 1.1168, - "Start (Y)": 1.475, - "Change On Year(%)": 86.7011 -}, -{ - "Category": "Oil", - "Type": "Crude", - "Spread": 0.02, - "Open": 27.55, - "Price": 27.58, - "Buy": 27.55, - "Sell": 27.55, - "Change": 0.03, - "Change (%)": 0.1089, - "Volume": 12, - "High (D)": 27.55, - "Low (D)": 27.55, - "High (Y)": 29.32, - "Low (Y)": 21.28, - "Start (Y)": 25.30, - "Change On Year(%)": 9.0119 -}, -{ - "Category": "Oil", - "Type": "Coal", - "Spread": 0.015, - "Open": 0.4363, - "Price": 0.4163, - "Buy": 0.4363, - "Sell": 0.4363, - "Change": -0.02, - "Change (%)": -4.584, - "Volume": 3, - "High (D)": 0.4363, - "Low (D)": 0.4363, - "High (Y)": 0.4841, - "Low (Y)": 0.3954, - "Start (Y)": 0.4398, - "Change On Year(%)": -5.3326 -}, -{ - "Category": "Agriculture", - "Type": "Wheat", - "Spread": 0.01, - "Open": 465.50, - "Price": 465.52, - "Buy": 465.50, - "Sell": 465.50, - "Change": 0.02, - "Change (%)": 0.0043, - "Volume": 4318, - "High (D)": 467.00, - "Low (D)": 463.25, - "High (Y)": 628.50, - "Low (Y)": 449.50, - "Start (Y)": 539.00, - "Change On Year(%)": -13.6327 -}, -{ - "Category": "Agriculture", - "Type": "Corn", - "Spread": 0.01, - "Open": 379.50, - "Price": 379.8026, - "Buy": 379.7976, - "Sell": 379.8076, - "Change": 0.3026, - "Change (%)": 0.0797, - "Volume": 11266, - "High (D)": 381.00, - "Low (D)": 377.75, - "High (Y)": 471.25, - "Low (Y)": 351.25, - "Start (Y)": 411.25, - "Change On Year(%)": -7.6468 -}, -{ - "Category": "Agriculture", - "Type": "Sugar", - "Spread": 0.01, - "Open": 15.68, - "Price": 14.6742, - "Buy": 14.6692, - "Sell": 14.6792, - "Change": -1.0058, - "Change (%)": -6.4146, - "Volume": 4949, - "High (D)": 15.70, - "Low (D)": 14.6742, - "High (Y)": 16.87, - "Low (Y)": 11.37, - "Start (Y)": 14.12, - "Change On Year(%)": 3.9249 -}, -{ - "Category": "Agriculture", - "Type": "Soybean", - "Spread": 0.01, - "Open": 1038.00, - "Price": 1038.6171, - "Buy": 1038.6121, - "Sell": 1038.6221, - "Change": 0.6171, - "Change (%)": 0.0595, - "Volume": 20356, - "High (D)": 1044.00, - "Low (D)": 1031.75, - "High (Y)": 1057.00, - "Low (Y)": 859.50, - "Start (Y)": 958.25, - "Change On Year(%)": 8.3869 -}, -{ - "Category": "Agriculture", - "Type": "Soy oil", - "Spread": 0.01, - "Open": 33.26, - "Price": 33.7712, - "Buy": 33.7662, - "Sell": 33.7762, - "Change": 0.5112, - "Change (%)": 1.5371, - "Volume": 10592, - "High (D)": 33.7712, - "Low (D)": 33.06, - "High (Y)": 35.43, - "Low (Y)": 26.61, - "Start (Y)": 31.02, - "Change On Year(%)": 8.8692 -}, -{ - "Category": "Agriculture", - "Type": "Soy Meat", - "Spread": 0.01, - "Open": 342.60, - "Price": 342.62, - "Buy": 342.60, - "Sell": 342.60, - "Change": 0.02, - "Change (%)": 0.0058, - "Volume": 5646, - "High (D)": 345.40, - "Low (D)": 340.30, - "High (Y)": 353.40, - "Low (Y)": 261.70, - "Start (Y)": 307.55, - "Change On Year(%)": 11.403 -}, -{ - "Category": "Agriculture", - "Type": "OJ Future", - "Spread": 0.01, - "Open": 140.60, - "Price": 140.1893, - "Buy": 140.1843, - "Sell": 140.1943, - "Change": -0.4107, - "Change (%)": -0.2921, - "Volume": 7, - "High (D)": 140.1893, - "Low (D)": 0.00, - "High (Y)": 155.95, - "Low (Y)": 113.00, - "Start (Y)": 134.475, - "Change On Year(%)": 4.2493 -}, -{ - "Category": "Agriculture", - "Type": "Coffee", - "Spread": 0.01, - "Open": 125.70, - "Price": 125.69, - "Buy": 125.70, - "Sell": 125.70, - "Change": -0.01, - "Change (%)": -0.008, - "Volume": 1654, - "High (D)": 125.80, - "Low (D)": 125.00, - "High (Y)": 155.75, - "Low (Y)": 115.35, - "Start (Y)": 135.55, - "Change On Year(%)": -7.2741 -}, -{ - "Category": "Agriculture", - "Type": "Cocoa", - "Spread": 0.01, - "Open": 3076.00, - "Price": 3076.03, - "Buy": 3076.00, - "Sell": 3076.00, - "Change": 0.03, - "Change (%)": 0.001, - "Volume": 978, - "High (D)": 3078.00, - "Low (D)": 3066.00, - "High (Y)": 3406.00, - "Low (Y)": 2746.00, - "Start (Y)": 3076.00, - "Change On Year(%)": 0.001 -}, -{ - "Category": "Agriculture", - "Type": "Rice", - "Spread": 0.01, - "Open": 11.245, - "Price": 10.4154, - "Buy": 10.4104, - "Sell": 10.4204, - "Change": -0.8296, - "Change (%)": -7.3779, - "Volume": 220, - "High (D)": 11.38, - "Low (D)": 10.4154, - "High (Y)": 14.14, - "Low (Y)": 9.70, - "Start (Y)": 11.92, - "Change On Year(%)": -12.6228 -}, -{ - "Category": "Agriculture", - "Type": "Oats", - "Spread": 0.01, - "Open": 194.50, - "Price": 194.2178, - "Buy": 194.2128, - "Sell": 194.2228, - "Change": -0.2822, - "Change (%)": -0.1451, - "Volume": 64, - "High (D)": 195.75, - "Low (D)": 194.00, - "High (Y)": 241.25, - "Low (Y)": 183.75, - "Start (Y)": 212.50, - "Change On Year(%)": -8.6034 -}, -{ - "Category": "Agriculture", - "Type": "Milk", - "Spread": 0.01, - "Open": 12.87, - "Price": 12.86, - "Buy": 12.87, - "Sell": 12.87, - "Change": -0.01, - "Change (%)": -0.0777, - "Volume": 7, - "High (D)": 12.89, - "Low (D)": 12.81, - "High (Y)": 16.96, - "Low (Y)": 12.81, - "Start (Y)": 14.885, - "Change On Year(%)": -13.6043 -}, -{ - "Category": "Agriculture", - "Type": "Cotton", - "Spread": 0.01, - "Open": 61.77, - "Price": 61.76, - "Buy": 61.77, - "Sell": 61.77, - "Change": -0.01, - "Change (%)": -0.0162, - "Volume": 3612, - "High (D)": 62.06, - "Low (D)": 61.32, - "High (Y)": 67.59, - "Low (Y)": 54.33, - "Start (Y)": 60.96, - "Change On Year(%)": 1.3123 -}, -{ - "Category": "Agriculture", - "Type": "Lumber", - "Spread": 0.01, - "Open": 303.90, - "Price": 304.5994, - "Buy": 304.5944, - "Sell": 304.6044, - "Change": 0.6994, - "Change (%)": 0.2302, - "Volume": 2, - "High (D)": 304.5994, - "Low (D)": 303.90, - "High (Y)": 317.10, - "Low (Y)": 236.00, - "Start (Y)": 276.55, - "Change On Year(%)": 10.1426 -}, -{ - "Category": "Livestock", - "Type": "LV Cattle", - "Spread": 0.01, - "Open": 120.725, - "Price": 120.705, - "Buy": 120.725, - "Sell": 120.725, - "Change": -0.02, - "Change (%)": -0.0166, - "Volume": 4, - "High (D)": 120.725, - "Low (D)": 120.725, - "High (Y)": 147.98, - "Low (Y)": 113.90, - "Start (Y)": 130.94, - "Change On Year(%)": -7.8166 -}, -{ - "Category": "Livestock", - "Type": "FD Cattle", - "Spread": 0.01, - "Open": 147.175, - "Price": 148.6065, - "Buy": 148.6015, - "Sell": 148.6115, - "Change": 1.4315, - "Change (%)": 0.9727, - "Volume": 5, - "High (D)": 148.6065, - "Low (D)": 147.175, - "High (Y)": 190.00, - "Low (Y)": 138.10, - "Start (Y)": 164.05, - "Change On Year(%)": -9.4139 -}, -{ - "Category": "Livestock", - "Type": "Lean Hogs", - "Spread": 0.01, - "Open": 81.275, - "Price": 81.8146, - "Buy": 81.8096, - "Sell": 81.8196, - "Change": 0.5396, - "Change (%)": 0.664, - "Volume": 1, - "High (D)": 81.8146, - "Low (D)": 81.275, - "High (Y)": 83.98, - "Low (Y)": 70.25, - "Start (Y)": 77.115, - "Change On Year(%)": 6.0943 -}, -{ - "Category": "Currencies", - "Type": "USD IDX Future", - "Spread": 0.02, - "Open": 93.88, - "Price": 93.7719, - "Buy": 93.7619, - "Sell": 93.7819, - "Change": -0.1081, - "Change (%)": -0.1151, - "Volume": 5788, - "High (D)": 94.05, - "Low (D)": 93.7534, - "High (Y)": 100.70, - "Low (Y)": 91.88, - "Start (Y)": 96.29, - "Change On Year(%)": -2.6151 -}, -{ - "Category": "Currencies", - "Type": "USD/JPY Future", - "Spread": 0.02, - "Open": 9275.50, - "Price": 9277.3342, - "Buy": 9277.3242, - "Sell": 9277.3442, - "Change": 1.8342, - "Change (%)": 0.0198, - "Volume": 47734, - "High (D)": 9277.3342, - "Low (D)": 0.93, - "High (Y)": 9483.00, - "Low (Y)": 0.93, - "Start (Y)": 4741.965, - "Change On Year(%)": 95.6432 -}, -{ - "Category": "Currencies", - "Type": "GBP/USD Future", - "Spread": 0.02, - "Open": 1.4464, - "Price": 1.1941, - "Buy": 1.1841, - "Sell": 1.2041, - "Change": -0.2523, - "Change (%)": -17.4441, - "Volume": 29450, - "High (D)": 1.45, - "Low (D)": 1.1941, - "High (Y)": 1.59, - "Low (Y)": 1.1941, - "Start (Y)": 1.485, - "Change On Year(%)": -19.59 -}, -{ - "Category": "Currencies", - "Type": "AUD/USD Future", - "Spread": 0.02, - "Open": 0.7344, - "Price": 0.7444, - "Buy": 0.7344, - "Sell": 0.7344, - "Change": 0.01, - "Change (%)": 1.3617, - "Volume": 36764, - "High (D)": 0.74, - "Low (D)": 0.73, - "High (Y)": 0.79, - "Low (Y)": 0.68, - "Start (Y)": 0.735, - "Change On Year(%)": 1.2789 -}, -{ - "Category": "Currencies", - "Type": "USD/CAD Future", - "Spread": 0.02, - "Open": 0.7744, - "Price": 0.9545, - "Buy": 0.9445, - "Sell": 0.9645, - "Change": 0.1801, - "Change (%)": 23.2622, - "Volume": 13669, - "High (D)": 0.9545, - "Low (D)": 0.77, - "High (Y)": 0.9545, - "Low (Y)": 0.68, - "Start (Y)": 0.755, - "Change On Year(%)": 26.4295 -}, -{ - "Category": "Currencies", - "Type": "USD/CHF Future", - "Spread": 0.02, - "Open": 1.0337, - "Price": 1.0437, - "Buy": 1.0337, - "Sell": 1.0337, - "Change": 0.01, - "Change (%)": 0.9674, - "Volume": 5550, - "High (D)": 1.03, - "Low (D)": 1.03, - "High (Y)": 1.11, - "Low (Y)": 0.98, - "Start (Y)": 1.045, - "Change On Year(%)": -0.1244 -}, -{ - "Category": "Index", - "Type": "DOW Future", - "Spread": 0.01, - "Open": 17711.00, - "Price": 17712.1515, - "Buy": 17712.1465, - "Sell": 17712.1565, - "Change": 1.1515, - "Change (%)": 0.0065, - "Volume": 22236, - "High (D)": 17727.00, - "Low (D)": 17642.00, - "High (Y)": 18083.00, - "Low (Y)": 15299.00, - "Start (Y)": 16691.00, - "Change On Year(%)": 6.118 -}, -{ - "Category": "Index", - "Type": "S&P Future", - "Spread": 0.01, - "Open": 2057.50, - "Price": 2056.6018, - "Buy": 2056.5968, - "Sell": 2056.6068, - "Change": -0.8982, - "Change (%)": -0.0437, - "Volume": 142780, - "High (D)": 2059.50, - "Low (D)": 2049.00, - "High (Y)": 2105.50, - "Low (Y)": 1794.50, - "Start (Y)": 1950.00, - "Change On Year(%)": 5.4668 -}, -{ - "Category": "Index", - "Type": "NAS Future", - "Spread": 0.01, - "Open": 4341.25, - "Price": 4341.28, - "Buy": 4341.25, - "Sell": 4341.25, - "Change": 0.03, - "Change (%)": 0.0007, - "Volume": 18259, - "High (D)": 4347.00, - "Low (D)": 4318.00, - "High (Y)": 4719.75, - "Low (Y)": 3867.75, - "Start (Y)": 4293.75, - "Change On Year(%)": 1.107 -}, -{ - "Category": "Index", - "Type": "S&P MID MINI", - "Spread": 0.01, - "Open": 1454.30, - "Price": 1455.7812, - "Buy": 1455.7762, - "Sell": 1455.7862, - "Change": 1.4812, - "Change (%)": 0.1018, - "Volume": 338, - "High (D)": 1455.7812, - "Low (D)": 1448.00, - "High (Y)": 1527.30, - "Low (Y)": 1236.00, - "Start (Y)": 1381.65, - "Change On Year(%)": 5.3654 -}, -{ - "Category": "Index", - "Type": "S&P 600 MINI", - "Spread": 0.01, - "Open": 687.90, - "Price": 687.88, - "Buy": 687.90, - "Sell": 687.90, - "Change": -0.02, - "Change (%)": -0.0029, - "Volume": 0, - "High (D)": 0.00, - "Low (D)": 0.00, - "High (Y)": 620.32, - "Low (Y)": 595.90, - "Start (Y)": 608.11, - "Change On Year(%)": 13.1177 -}, -{ - "Category": "Interest Rate", - "Type": "US 30YR Future", - "Spread": 0.01, - "Open": 164.875, - "Price": 164.1582, - "Buy": 164.1532, - "Sell": 164.1632, - "Change": -0.7168, - "Change (%)": -0.4347, - "Volume": 28012, - "High (D)": 165.25, - "Low (D)": 164.0385, - "High (Y)": 169.38, - "Low (Y)": 151.47, - "Start (Y)": 160.425, - "Change On Year(%)": 2.3271 -}, -{ - "Category": "Interest Rate", - "Type": "US 2Y Future", - "Spread": 0.01, - "Open": 109.3984, - "Price": 109.3884, - "Buy": 109.3984, - "Sell": 109.3984, - "Change": -0.01, - "Change (%)": -0.0091, - "Volume": 17742, - "High (D)": 109.41, - "Low (D)": 109.38, - "High (Y)": 109.80, - "Low (Y)": 108.62, - "Start (Y)": 109.21, - "Change On Year(%)": 0.1634 -}, -{ - "Category": "Interest Rate", - "Type": "US 10YR Future", - "Spread": 0.01, - "Open": 130.5625, - "Price": 130.5825, - "Buy": 130.5625, - "Sell": 130.5625, - "Change": 0.02, - "Change (%)": 0.0153, - "Volume": 189310, - "High (D)": 130.63, - "Low (D)": 130.44, - "High (Y)": 132.64, - "Low (Y)": 125.48, - "Start (Y)": 129.06, - "Change On Year(%)": 1.1797 -}, -{ - "Category": "Interest Rate", - "Type": "Euro$ 3M", - "Spread": 0.01, - "Open": 99.18, - "Price": 99.17, - "Buy": 99.18, - "Sell": 99.18, - "Change": -0.01, - "Change (%)": -0.0101, - "Volume": 29509, - "High (D)": 99.18, - "Low (D)": 99.17, - "High (Y)": 99.38, - "Low (Y)": 98.41, - "Start (Y)": 98.895, - "Change On Year(%)": 0.2781 -} -]; - -interface UpdateResponse { - data: any[]; - recordsUpdated: number; -} - -/* tslint:enable */ -export class LiveFinancialData { - - public static generateData(count: number): any[] { - const data: any[] = []; - for (let i = 0; i < count; i++) { - const rand = Math.floor(Math.random() * Math.floor(DataItems.length)); - - const item = Object.assign({}, DataItems[rand]); - item.Settlement = this.getRandomItem(Settlements); - item.Contract = this.getRandomItem(Contracts); - const region = this.getRandomItem(Regions); - item.Region = region.Name; - item.Country = this.getRandomItem(region.Countries); - item.Risk = this.getRandomItem(CountryRisks); - item.Sector = this.getRandomItem(SectorTypes); - item.Currency = this.getRandomItem(CurrencyTypes); - item.Security = this.getRandomItem(SecurityTypes); - item.Issuer = this.getRandomItem(IssuerNames); - item.Maturity = this.getRandomDate(); - item.Rating = this.getRandomItem(RatingTypes); - - for (const mockData of DefaultData) { - for (const prop in mockData) { - if (mockData.hasOwnProperty(prop)) { - item[prop] = mockData[prop]; - } - } - } - item.ID = i; - this.randomizeDataValues(item); - data.push(item); - } - return data; - } - - public static updateAllPrices(data: any[]): any[] { - const currData = []; - for (const dataRow of data) { - const item = Object.assign({}, dataRow); - this.randomizeDataValues(item); - currData.push(item); - } - return currData; - } - - public static updateRandomPrices(data: any[]): any { - const currData = data.slice(0, data.length + 1); - let y = 0; - for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) { - const item = Object.assign({}, data[i]); - this.randomizeDataValues(item); - currData[i] = item; - y++; - } - return currData; - } - - public static updateRandomPrices2(data: any[]): UpdateResponse { - const currData = data.slice(0, data.length + 1); - let y = 0; - for (let i = Math.round(Math.random() * 10); i < data.length; i += Math.round(Math.random() * 10)) { - const item = Object.assign({}, data[i]); - this.randomizeDataValues(item); - currData[i] = item; - y++; - } - return {data: currData, recordsUpdated: y }; - } - - public static randomizeDataValues(item: any) { - const changeP = "Change (%)"; - const res = this.getRandomPrice(item.Price); - item.Change = res.Price - item.Price; - item.Price = res.Price; - item[changeP] = res.ChangePercent; - } - - public static getRandomPrice(oldPrice: any): any { - const rnd = parseFloat(Math.random().toFixed(2)); - const volatility = 2; - let newPrice = 0; - - let changePercent = 2 * volatility * rnd; - if (changePercent > volatility) { - changePercent -= (2 * volatility); - } - const changeAmount = oldPrice * (changePercent / 100); - newPrice = oldPrice + changeAmount; - const result = { Price: 0, ChangePercent: 0 }; - result.Price = Math.round(newPrice * 100) / 100; - result.ChangePercent = Math.round(changePercent * 100) / 100; - return result; - } - - public static getRandomDate() { - const now: Date = new Date(); - const month = this.getRandomNumber(0, 8); - const day = this.getRandomNumber(10, 27); - return new Date(now.getFullYear(), month, day); - } - - public static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - public static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - public static getRandomCountry(region: any): string { - if (region.Countries === undefined) { - return this.getRandomItem(Regions[2].Countries); - } else { - return this.getRandomItem(region.Countries); - } - } -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-load-save-layout.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-load-save-layout.md deleted file mode 100644 index 25a1bb907..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-load-save-layout.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Web Components Data Grid | Real-Time Data Grid and Tables | Load & Save | Infragistics -_description: Use Infragistics' Ignite UI for Web Components Data Table & Grid which supports loading and saving the layout the user makes. -_keywords: Web Components Table, Data Grid, cell activation, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Load & Save Grid Layout -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Load & Save Layout - -The Ignite UI for Web Components Data Table / Data Grid supports loading and saving the grid layout. This is performed by calling the [`loadLayout`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#loadLayout) and [`saveLayout`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#saveLayout) methods of the grid. These features are useful when an end user can move, sort, and group columns, and wants to preserve the state of the grid and be able to recover the layout and resume work at a later time. - -## Web Components Grid Load & Save Layout Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Supported Features - -The grid supports saving the following features: - -- [Column Visibility](column-chooser.md) -- [Column Pinning](column-pinning.md) -- [Column Moving](column-moving.md) -- [Column Resizing](column-resizing.md) -- [Column Sorting](column-sorting.md) -- [Column Filtering](column-filtering.md) -- [Row Grouping](row-grouping.md) - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) -- [`loadLayout`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#loadLayout) -- [`saveLayout`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#saveLayout) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-local-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-local-data.md deleted file mode 100644 index 9a329a788..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-local-data.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Web Components Data Grid | Binding Local Data | Infragistics -_description: Use Infragistics' Web Components grid control to bind to an array of data. Learn how Ignite UI for Web Components table can help you better display your data! -_keywords: Web Components Table, Data Grid, binding to data, Ignite UI for Web Components, Infragistics, data binding -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Local Data -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Binding Local Data - -The following sample demonstrates the Ignite UI for Web Components Data Table / Data Grid data binding to an array of data. - -## Web Components Binding Local Data Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -## Code Snippet - -```ts -public data: any[]; -public initData() { - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - - const countries: string[] = ["USA", "UK", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain",]; - const status: string[] = [ "Packing", "Shipped", "Delivered"] - const sales: any[] = []; - - for (let i = 0; i < 200; i++) { - const price = this.getRandomNumber(10000, 90000) / 100; - const items = this.getRandomNumber(4, 30); - const value = Math.round(price * items); - const margin = this.getRandomNumber(2, 5); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - Country: country, - CountryFlag: this.getCountryFlag(country), - Margin: margin, - OrderDate: this.getRandomDate(), - OrderItems: items, - OrderValue: value, - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - ProductPrice: price, - Profit: Math.round(profit), - Status: this.getRandomItem(status), - }); - } - - this.data = sales; - } -``` - - - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-localization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-localization.md deleted file mode 100644 index 0106c5a40..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-localization.md +++ /dev/null @@ -1,614 +0,0 @@ ---- -title: Web Components Data Grid | Real-Time Data Grid and Tables | Localization | Infragistics -_description: Use Infragistics' Ignite UI for Web Components Data Table & Grid which supports localization. View Ignite UI for Web Components table tutorials! -_keywords: Web Components Table, Data Grid, cell accessibility, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Localization -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Localization - -The Ignite UI for Web Components Data Table / Data Grid supports localizing the resource strings specific to the column options pop-up and summaries. Note, this is not intended to be used nor capable of translating the data. - -## Web Components Grid Localization Example - -```typescript -export class DataGridLocalizationJa { - [key: string]: string; - "Apply": string = "適用"; - "Cancel": string = "キャンセル"; - "Clear_Column_Filter": string = "列フィルターをクリア"; - "Column_Move": string = "移動"; - "Column_Move_Left": string = "左"; - "Column_Move_Right": string = "右"; - "Column_Pin": string = "ピン固定"; - "Column_Pin_Left": string = "左"; - "Column_Pin_Right": string = "右"; - "Column_Sort": string = "ソート"; - "Column_Sort_Ascending": string = "昇順"; - "Column_Sort_Descending": string = "降順"; - "Filter_Columns_List": string = "列リストのフィルター"; - "Search": string = "検索"; - "Select_All": string = "すべて選択"; - "ComparisonOperator_Bottom": string = "下"; - "ComparisonOperator_BottomPercentile": string = "下位の百分位数"; - "ComparisonOperator_Contains": string = "～を含む"; - "ComparisonOperator_DoesNotContain": string = "～を含まない"; - "ComparisonOperator_DoesNotEndWith": string = "～で終わらない"; - "ComparisonOperator_DoesNotMatch": string = "～と一致しない"; - "ComparisonOperator_DoesNotStartWith": string = "～で始まらない"; - "ComparisonOperator_Empty": string = "空"; - "ComparisonOperator_EndsWith": string = "次の値で終わる"; - "ComparisonOperator_Equals": string = "等しい"; - "ComparisonOperator_False": string = "False"; - "ComparisonOperator_GreaterThan": string = "次の値より大きい"; - "ComparisonOperator_GreaterThanOrEqualTo": string = "次の値より大きいまたは等しい"; - "ComparisonOperator_LastMonth": string = "先月"; - "ComparisonOperator_LastQuater": string = "前四半期"; - "ComparisonOperator_LastWeek": string = "先週"; - "ComparisonOperator_LastYear": string = "昨年"; - "ComparisonOperator_LessThan": string = "次の値より小さい"; - "ComparisonOperator_LessThanOrEqualTo": string = "次の値より小さいまたは等しい"; - "ComparisonOperator_NextMonth": string = "翌月"; - "ComparisonOperator_NextQuater": string = "翌四半期"; - "ComparisonOperator_NextWeek": string = "来週"; - "ComparisonOperator_NextYear": string = "翌年"; - "ComparisonOperator_NotEmpty": string = "空ではない"; - "ComparisonOperator_NotEquals": string = "次の値に等しくない"; - "ComparisonOperator_StartsWith": string = "～で始まる"; - "ComparisonOperator_ThisMonth": string = "今月"; - "ComparisonOperator_ThisQuarter": string = "本四半期"; - "ComparisonOperator_ThisWeek": string = "今週"; - "ComparisonOperator_ThisYear": string = "今年"; - "ComparisonOperator_Today": string = "今日"; - "ComparisonOperator_Tomorrow": string = "明日"; - "ComparisonOperator_Top": string = "上"; - "ComparisonOperator_TopPercentile": string = "上位の百分位数"; - "ComparisonOperator_True": string = "True"; - "ComparisonOperator_Yesterday": string = "昨日"; - "Column_Options_Summary_Average": string = "平均"; - "Column_Options_Summary_Count": string = "カウント"; - "Column_Options_Summary_Maximum": string = "最大値"; - "Column_Options_Summary_Minimum": string = "最小値"; - "Column_Options_Summary_Sum": string = "合計値"; - "Column_Options_Summaries": string = "集計"; -} - -export class DataGridSummariesLocalizationJa { - [key: string]: string; - "DataSource_Summary_Avg": string = "平均"; - "DataSource_Summary_Count": string = "カウント"; - "DataSource_Summary_Max": string = "最大値"; - "DataSource_Summary_Min": string = "最小値"; - "DataSource_Summary_Sum": string = "合計値"; -} - -export class DataGridDateTimeColumnLocalizationJa { - [key: string]: string; - "April_Full" = "4月"; - "April_Short" = "4月"; - "August_Full" = "August"; - "August_Short" = "8月"; - "December_Full" = "December"; - "December_Short" = "12月"; - "February_Full" = "February"; - "February_Short" = "2月"; - "Friday_Full" = "Friday"; - "Friday_Short" = "Fri"; - "Friday_Single" = "金"; - "January_Full" = "January"; - "January_Short" = "1月"; - "July_Full" = "July"; - "July_Short" = "7月"; - "June_Full" = "June"; - "June_Short" = "6月"; - "March_Full" = "March"; - "March_Short" = "3月"; - "May_Full" = "May"; - "May_Short" = "5月"; - "Monday_Full" = "Monday"; - "Monday_Short" = "Mon"; - "Monday_Single" = "月"; - "November_Full" = "November"; - "November_Short" = "11月"; - "October_Full" = "October"; - "October_Short" = "10月"; - "Saturday_Full" = "Saturday"; - "Saturday_Short" = "Sat"; - "Saturday_Single" = "土"; - "September_Full" = "September"; - "September_Short" = "9月"; - "Sunday_Full" = "Sunday"; - "Sunday_Short" = "Sun"; - "Sunday_Single" = "日"; - "Thursday_Full" = "Thursday"; - "Thursday_Short" = "Thu"; - "Thursday_Single" = "木"; - "Today" = "Today"; - "Tuesday_Full" = "Tuesday"; - "Tuesday_Short" = "Tue"; - "Tuesday_Single" = "火"; - "Wednesday_Full" = "Wednesday"; - "Wednesday_Short" = "Wed"; - "Wednesday_Single" = "水"; -} - -export class DataGridMultiColumnComboBoxLocalizationJa { - [key: string]: string; - "NoMatches" = "一致なし"; -} -``` -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "男") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "低い"; - } else if (person.Salary < 100000) { - person.Income = "平均"; - } else { - person.Income = "高い"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド", "日本", "ドイツ"]; - const status: string[] = ["梱包中", "出荷完了", "配達完了"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "タウンハウス", "戸建て", "マンション", "別荘"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド", "日本", "ドイツ"]; - - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["男", "女"]; - private static maleNames: string[] = ["カイル", "オスカー", "ラルフ", "マイク", "ビル", "フランク", "ハワード", "ジャック", "ラリー", "ピート", "スティーブ", "ヴィンス", "マーク", "アレックス", "マックス", "ブライアン", "クリス", "アンドリュー", "マーティン", "マイク", "スティーブ", "グレン", "ブルース"]; - private static femaleNames: string[] = ["ジーナ", "アイリーン", "ケイティ", "ブレンダ", "ケーシー", "フィオナ", "ホリー", "ケイト", "リズ", "パメラ", "ネリー", "マリサ", "モニカ", "アンナ", "ジェシカ", "ソフィア", "イザベラ", "マーゴ", "ジェーン", "オードリー", "サリー", "メラニー", "グレタ", "オーロラ", "サリー"]; - private static lastNames: string[] = ["アダムス", "クローリー", "エリス", "マルチネス", "アーバイン", "マクスウェル", "クラーク", "オーエンス", "ルーニー", "リンカーン", "トーマス", "スペーシー", "モーガン", "キング", "ニュートン", "フィッツジェラルド", "ホームズ", "ジェファーソン", "ランドリー", "ベリー", "ペレス", "スペンサー", "スター", "カーター", "エドワーズ", "スターク", "ジョンソン", "フィッツ", "チーフ", "ブランク", "ペリー", "ストーン", "ウィリアムズ", "レーン", "ジョブズ", "アダムス", "パワー", "テスラ"]; - private static countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド"]; - private static citiesUS: string[] = ["ニューヨーク", "ロサンゼルス", "マイアミ", "サンフランシスコ", "サンディエゴ", "ラスベガス"]; - private static citiesUK: string[] = ["ロンドン", "リバプール", "マンチェスター"]; - private static citiesFR: string[] = ["パリ", "マルセイユ", "リヨン"]; - private static citiesCA: string[] = ["トロント", "バンクーバー", "モントリオール"]; - private static citiesPL: string[] = ["クラクフ", "ワルシャワ", "ヴロツワフ", "グダニスク"]; - private static citiesJP: string[] = ["東京", "大阪", "京都", "横浜"]; - private static citiesGR: string[] = ["ベルリン", "ボン", "ケルン", "ミュンヘン", "ハンブルク"]; - private static roadSuffixes: string[] = ["通り", "筋", "小路"]; - private static roadNames: string[] = ["メイン", "ガーデン", "ブロード", "オーク", "シダー", "パーク", "パイン", "エルム", "マーケット", "ヒル"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date): Date { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "男") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "カナダ") { - return this.getRandomItem(this.citiesCA); - } else if (country === "フランス") { - return this.getRandomItem(this.citiesFR); - } else if (country === "ポーランド") { - return this.getRandomItem(this.citiesPL); - } else if (country === "アメリカ合衆国") { - return this.getRandomItem(this.citiesUS); - } else if (country === "日本") { - return this.getRandomItem(this.citiesJP); - } else if (country === "ドイツ") { - return this.getRandomItem(this.citiesGR); - } else { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - // Note: Mapping between En and Ja. - // This comment is for the sake of coding and debugging. - // private static genders: string[] = ["male", "female"]; - // private static genders: string[] = ["男", "女"]; - - const genderEn = (gender == "男" ? "male" : "female"); - return 'https://dl.infragistics.com/x/img/genders/' + genderEn + '.png'; - } - - private static getCountryFlag(country: string): string { - // Note: Mapping between En and Ja. - // This comment is for the sake of coding and debugging. - // const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - // const countries: string[] = ["アメリカ合衆国", "イギリス", "フランス", "カナダ", "ポーランド", "日本", "ドイツ"]; - - let countryEn = ""; - if (country == "カナダ") - { - countryEn = "Canada"; - } - else if (country == "フランス") - { - countryEn = "France"; - } - else if (country == "ポーランド") - { - countryEn = "Poland"; - } - else if (country == "アメリカ合衆国") - { - countryEn = "United-States"; - } - else if (country == "日本") - { - countryEn = "Japan"; - } - else if (country == "ドイツ") - { - countryEn = "Germany"; - } - else - { // if (country === "United-Kingdom") { - countryEn = "United-Kingdom"; - } - - return 'https://dl.infragistics.com/x/img/flags/' + countryEn + '.png'; - } - - private static pad(num: number, size: number): string{ - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Resource Strings - -This is the full list of strings to localize the grid. - -### Column Option Strings - -- Apply -- Cancel -- Clear_Column_Filter -- Column_Move -- Column_Move_Left -- Column_Move_Right -- Column_Pin -- Column_Pin_Left -- Column_Pin_Right -- Column_Sort -- Column_Sort_Ascending -- Column_Sort_Descending -- Filter_Columns_List -- Search -- Select_All -- ComparisonOperator_Bottom -- ComparisonOperator_BottomPercentile -- ComparisonOperator_Contains -- ComparisonOperator_DoesNotContain -- ComparisonOperator_DoesNotEndWith -- ComparisonOperator_DoesNotMatch -- ComparisonOperator_DoesNotStartWith -- ComparisonOperator_Empty -- ComparisonOperator_EndsWith -- ComparisonOperator_Equals -- ComparisonOperator_False -- ComparisonOperator_GreaterThan -- ComparisonOperator_GreaterThanOrEqualTo -- ComparisonOperator_LastMonth -- ComparisonOperator_LastQuarter -- ComparisonOperator_LastWeek -- ComparisonOperator_LastYear -- ComparisonOperator_LessThan -- ComparisonOperator_LessThanOrEqualTo -- ComparisonOperator_NextMonth -- ComparisonOperator_NextQuarter -- ComparisonOperator_NextWeek -- ComparisonOperator_NextYear -- ComparisonOperator_NotEmpty -- ComparisonOperator_NotEquals -- ComparisonOperator_StartsWith -- ComparisonOperator_ThisMonth -- ComparisonOperator_ThisQuarter -- ComparisonOperator_ThisWeek -- ComparisonOperator_ThisYear -- ComparisonOperator_Today -- ComparisonOperator_Tomorrow -- ComparisonOperator_Top -- ComparisonOperator_TopPercentile -- ComparisonOperator_True -- ComparisonOperator_Yesterday -- Column_Options_Summary_Average -- Column_Options_Summary_Count -- Column_Options_Summary_Maximum -- Column_Options_Summary_Minimum -- Column_Options_Summary_Sum -- Column_Options_Summaries - -### Summary Strings - -- DataSource_Summary_Avg -- DataSource_Summary_Count -- DataSource_Summary_Max -- DataSource_Summary_Min -- DataSource_Summary_Sum - -### Date-Time Column Strings - -- January_Full -- January_Short -- February_Full -- February_Short -- March_Full -- March_Short -- April_Full -- April_Short -- May_Full -- May_Short -- June_Full -- June_Short -- July_Full -- July_Short -- August_Full -- August_Short -- September_Full -- September_Short -- October_Full -- October_Short -- November_Full -- November_Short -- December_Full -- December_Short -- Monday_Full -- Monday_Short -- Monday_Single -- Thursday_Single -- Today -- Tuesday_Full -- Tuesday_Short -- Tuesday_Single -- Wednesday_Full -- Wednesday_Short -- Wednesday_Single -- Thursday_Full -- Thursday_Short -- Friday_Full -- Friday_Short -- Friday_Single -- Saturday_Full -- Saturday_Short -- Saturday_Single -- Sunday_Full -- Sunday_Short -- Sunday_Single - -### ComboBox Column Strings - -- NoMatches - -## API References - -- `ActualDataSource` -- `SetCustomizedStringAsync` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-overview.md deleted file mode 100644 index fbe34a428..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-overview.md +++ /dev/null @@ -1,506 +0,0 @@ ---- -title: Web Components Data Grid Component | Real-Time Web Components Tables | Infragistics -_description: Infragistics' Web Components grid component helps you create a fast, real-time react data grid. Learn how Ignite UI for Web Components can help you better display your data! -_keywords: Web Components Table, Data Grid, overview, Ignite UI for Web Components, data binding, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Table / Grid ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md), and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Data Grid Overview - -The Ignite UI for Web Components Data Table / Data Grid is a tabular Web Components grid component that allows you to quickly bind and display your data with little coding or configuration. Features of the Web Components data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The Web Components tables are optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns. - -## Web Components Data Grid Example - -This demo implements some of the features that are available in the Grid: -Filtering, Grouping, Pin/Unpin columns, Reposition columns, Sorting, and Summaries - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Getting Started - -### Dependencies - -When installing the Web Components grid package, the core package must also be installed. - -```cmd -npm install --save igniteui-webcomponents-core -npm install --save igniteui-webcomponents-grids -npm install --save igniteui-webcomponents-inputs -``` - -### Component Modules - -The [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) requires the following modules: - -```ts -import { ModuleManager } from 'igniteui-webcomponents-core'; -import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; - -ModuleManager.register( - IgcDataGridModule -); -``` - -
- -### Optional Modules - -The optional [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) features, seen above, requires the following modules: - -```ts -import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-data-grids'; -import { IgcGridColumnOptionsComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbarModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbarComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcSparklineModule } from 'igniteui-webcomponents-charts'; -import { IgcSparklineComponent } from 'igniteui-webcomponents-charts'; - -ModuleManager.register( - IgcGridColumnOptionsModule, - IgcDataGridToolbarModule, - IgcSparklineModule -); -``` - -
- -### Sample Data Source - -Now that the Web Components data grid module is imported, next is the basic configuration of the Web Components grid that binds to local data. - -```ts - this.data = [{ - Discontinued: false, - OrderDate: new Date("2012-02-12"), - ProductID: 1, - ProductName: "Chai", - QuantityPerUnit: "10 boxes x 20 bags", - ReorderLevel: 10, - UnitPrice: 18.0000, - UnitsInStock: 39 - }, { - Discontinued: false, - OrderDate: new Date("2003-03-17"), - ProductID: 2, - ProductName: "Chang", - QuantityPerUnit: "24 - 12 oz bottles", - ReorderLevel: 25, - UnitPrice: 19.0000, - UnitsInStock: 17 - }, { - Discontinued: false, - OrderDate: new Date("2006-03-17"), - ProductID: 3, - ProductName: "Aniseed Syrup", - QuantityPerUnit: "12 - 550 ml bottles", - ReorderLevel: 25, - UnitPrice: 10.0000, - UnitsInStock: 13 - }, { - Discontinued: false, - OrderDate: new Date("2016-03-17"), - ProductID: 4, - ProductName: "Chef Antony Cajun Seasoning", - QuantityPerUnit: "48 - 6 oz jars", - ReorderLevel: 0, - UnitPrice: 22.0000, - UnitsInStock: 53 - }, { - Discontinued: true, - OrderDate: new Date("2011-11-11"), - ProductID: 5, - ProductName: "Chef Antony Gumbo Mix", - QuantityPerUnit: "36 boxes", - ReorderLevel: 0, - UnitPrice: 21.3500, - UnitsInStock: 0 - }]; -``` - -### Auto-Generate Columns - -The following code demonstrates how to bind the Web Components data grid to the above local data. - -```html - - -``` - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - -### Manually Define Columns - -```html - - - - - - - -``` - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - -### Styling Columns - -The following code demonstrates how to style specific columns using the provided column's properties. - -```html - -``` - -## Additional Resources - -- [Accessibility Compliance](accessibility.md) -- [Cell Activation](cell-activation.md) -- [Grid Editing](cell-editing.md) -- [Cell Selection](cell-selection.md) -- [Column Animation](column-animation.md) -- [Column Chooser](column-chooser.md) -- [Column Filtering](column-filtering.md) -- [Column Moving](column-moving.md) -- [Column Options](column-options.md) -- [Column Resizing](column-resizing.md) -- [Column Sorting](column-sorting.md) -- [Column Types](column-types.md) -- [Performance](performance.md) -- [Row Pinning](row-pinning.md) -- [Row Grouping](row-grouping.md) -- [Row Highlighting](row-highlighting.md) - - - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-performance.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-performance.md deleted file mode 100644 index 81baba3de..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-performance.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Web Components Data Grid | Performance | Infragistics -_description: Use the Infragistics' Web Components table for high performance data scenarios. Scroll through an unlimited number of rows and columns with full virtualization. View Ignite UI for Web Components table tutorials! -_keywords: Web Components Table, Data Grid, performance, Ignite UI for Web Components, Infragistics, data binding -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: High Performance -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components High Performance with Live Data - -The Ignite UI for Web Components Data Table / Data Grid is optimized for high-performance with live data scenarios. With fast load time, smooth scrolling with zero lag time or screen flicker, you can seamlessly scroll through an unlimited number of rows and columns in your Web Components data grid application with full virtualization of grid's columns and rows. - -## Web Components High Performance with Live Data Example - -This sample demonstrates this performance by binding thousands of financial records to the Web Components data grid, grouping them by 1 column (eg. Territory), and live-updating multiple columns every couple of milliseconds. You can change various options in real-time and the Data Grid performance with no lag, screen flicker, or visual delay - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Additional Resources - - - - - -- [Column Types](column-types.md) -- [Row Grouping](row-grouping.md) - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-remote-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-remote-data.md deleted file mode 100644 index 86d4603e5..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-remote-data.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Web Components Data Grid | Remote Data | Infragistics -_description: Use the Infragistics Web Components grid component's Virtual Data Source to bind remote data. View Ignite UI for Web Components table tutorials! -_keywords: Web Components Table, Data Grid, virtual data, Ignite UI for Web Components, Infragistics, data binding -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Virtual Data -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Binding Virtual Data - -The Ignite UI for Web Components Data Table / Data Grid supports data binding to remote datasources with one line of code. With the Web Components data table’s Virtual Data Source, you simply configure the Web Components grid with your remote URI and which OData Entity you’d like returned, and the Web Components grid does the rest of the work for you. - -## Web Components Grid Binding Virtual Data Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- - -- **npm install --save igniteui-webcomponents-core** -- **npm install --save igniteui-webcomponents-grids** -- **npm install --save igniteui-webcomponents-inputs** -- **npm install --save igniteui-webcomponents-datasources** - -## Component Modules - -The [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) requires the following modules: - -```ts -import './odatajs-4.0.0'; -import { ModuleManager } from 'igniteui-webcomponents-core'; -import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; -import { ODataVirtualDataSource } from 'igniteui-webcomponents-dataSource'; - -ModuleManager.register(IgcDataGridModule); -``` - -
- -## Code Snippet - -Now that the Web Components data grid module is imported, the next step is the basic configuration of the Web Components grid that binds to remote data. Create the virtual data source. Assign the url where the data will be retrieved from to the baseUri property. Setting the entitySet property will inform which table to retrieve from the virtual data source. - -```html - - -``` - -Assign the data source to the grid. - -```ts -private virtualData: ODataVirtualDataSource; -// ... -const vds = new ODataVirtualDataSource(); -vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc"); -vds.entitySet = ("Orders"); -this.virtualData = vds; -``` - -```ts -const vds = new ODataVirtualDataSource(); -vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc"); -vds.entitySet = ("Orders"); - -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = vds; -``` - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-grouping.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-grouping.md deleted file mode 100644 index 9f6e0a3e4..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-grouping.md +++ /dev/null @@ -1,686 +0,0 @@ ---- -title: Web Components Data Grid | Row Grouping | Infragistics -_description: Use Infragistics' Web Components grid component's Group Row feature to group rows into a sticky header Row Group. This is an easy way to visually group data based on your criteria. Check out Ignite UI for Web Components table demos! -_keywords: Web Components Table, Data Grid, row grouping, groupby area, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/groupby -_tocName: Row Grouping -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Row Grouping - -The Ignite UI for Web Components Data Table / Data Grid lets you group rows into a ‘sticky header’ Row Group. This is similar to the Group By feature in Microsoft Outlook, which is an easy way to visually group data based on your own criteria. - -## Web Components Row Group-By Area Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Group-By Area - -Set [`isGroupByAreaVisible`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#isGroupByAreaVisible) property on the DataGrid to True, as shown in the example above, to the user interface. The group-by area allows users more options to group and sort columns without interact when interacting the DataGrid indirectly. Groups can be positioned and reordered based on the users needs. This area also populates when columns are programmatically added as [`groupDescriptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#groupDescriptions) on the DataGrid as well. - -## Using Group Descriptions Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Hierarchical Groups - -The [`groupHeaderDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#groupHeaderDisplayMode) property allows the groups to be hierarchical. By default, each group description that is added gets aggregated together. Setting the [`groupHeaderDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#groupHeaderDisplayMode) to `Split` will create a section header for ever group defined in [`groupDescriptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#groupDescriptions) property of the [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html). - - - -```ts -import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core'; - -public connectedCallback() { - // ... - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - -## Collapsible Groups - -Also, the [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) can display a toggle on each group section to allow the end user to expand or collapse the grouped data via the [`isGroupCollapsable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#isGroupCollapsable) property. - - - -```ts -public connectedCallback() { - // ... - this.grid.isGroupCollapsable = true; -} -``` - -## Summary - -For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. - -```ts -import { IgcIgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids'; -import { ListSortDirection } from 'igniteui-webcomponents-core'; -import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core'; - -public connectedCallback() { - const state = new IgcColumnGroupDescription(); - state.field = "Country"; - state.displayName = "Location"; - state.sortDirection = ListSortDirection.Descending; - const city = new IgcColumnGroupDescription(); - city.field = "City"; - city.displayName = ""; - const income = new IgcColumnGroupDescription(); - income.field = "Income"; - income.displayName = "Income"; - - this.grid = document.getElementById("grid") as IgcDataGridComponent; - this.grid.groupDescriptions.add(state); - this.grid.groupDescriptions.add(city); - this.grid.groupDescriptions.add(income); - - this.grid.isGroupCollapsable = true; - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) -- [`groupDescriptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#groupDescriptions) -- [`groupHeaderDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#groupHeaderDisplayMode) -- [`isGroupByAreaVisible`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#isGroupByAreaVisible) -- [`isGroupCollapsable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#isGroupCollapsable) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-highlighting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-highlighting.md deleted file mode 100644 index 873b33c14..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-highlighting.md +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: Web Components Data Grid | Row Highlighting | Infragistics -_description: Configuring the row highlight of the Infragistics' Web Components data grid on mouse over. Learn how to configure row highlight for the Ignite UI for Web Components table. -_keywords: Web Components Table, Data Grid, row highlighting, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Row Highlighting -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid Highlighting - -The Ignite UI for Web Components Data Table / Data Grid supports configuring the appearance of row highlighting. - -## Web Components Grid Highlighting Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Overview - -Highlighting records in the Web Components data can be toggled by setting the [`isRowHoverEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#isRowHoverEnabled) boolean property of the Web Components grid. Note, this is enabled by default. - -In addition, the color is configurable by setting the [`rowHoverBackground`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#rowHoverBackground) string property to a hex value. - -## Code Snippet - -The following demonstrates how to enable row highlighting on the Web Components data grid and applies the color blue: - -```html - - -``` - -## API References - -- [`isRowHoverEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#isRowHoverEnabled) -- [`rowHoverBackground`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#rowHoverBackground) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-paging.md deleted file mode 100644 index 1d7c5548d..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-paging.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Web Components grid/table pagination – Ignite UI for Web Components  -_description: View Infragistics' Web Components grid component's Pager, which was designed to take in an array of data and output portions of that data as a page. -_keywords: Web Components Table, Data Grid, row, paging, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/paging -_tocName: Row Paging -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Grid/Table Pagination - -Tabular table UIs are used commonly in many web products. Building a tabular table UI from scratch isn't easy, however, Ignite UI for Web Components grid, creating a Table UI is simple, and binding large amounts of local or remote data to the Web Components grid is easy. Since the grid is virtualized by default, you are not required to include table pagination to show large data sets. It is mainly used due to its most efficient ways of organizing complex data in the UI. With table pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without actually needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows / buttons that let users flip through pages, as demonstrated here: - -Row Paging is enabled within the Ignite UI for Web Components Data Table / Data Grid by setting the [`isPagerVisible`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#isPagerVisible) property. In addition, you can limit the maximum number of visible rows by setting [`pageSize`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#pageSize). - -## Web Components Row Paging Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Overview - -From a UX perspective, table pagination has pros and cons. According to a [recent article](https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php) on UX Matters, here is a breakdown of the good and the bad when it comes to table pagination. - -Table Pagination Benefits: - -- Limits user choice -- Clicks are measurable - -Table Pagination Negatives: - -- Users still have to scrolls -- Pagers work and behave differently from site to site -- Too many UI controls can be confusing -- Users perceive paging and slow and cumbersome -- Users may not notice pagination controls -- Page loading may be slow -- Users are confused whether actions apply to Page or entire set of data - -With the Ignite UI Web Components grid, we allow the developer to add paging, however, as the grid has infinite scrolling built in by default, we recommend infinite (or virtual) scrolling vs. adding a pager to the grid. With virtualized, infinite scrolling as the default user experience, you get: - -- Best performance while still having control or how much data is ‘paged’ via the scrolling interaction -- Natural approach to scrolling all content -- All interactions are clear to the end user -- Maps to the natural interactions on a mobile UX - -## Web Components Grid/Page Synchronization - -When users interact with the Grid like sorting and grouping, and you have enabled the Web Components Pager on the grid, you need to use the following functions to ensure that the Web Components Pagination data is synchronized with the Web Components table display. - -- applySorts -- applyGroups -- applyFilters - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) -- [`isPagerVisible`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#isPagerVisible) -- [`pageSize`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html#pageSize) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-pinning.md deleted file mode 100644 index 426ed5d38..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-row-pinning.md +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Web Components Data Grid | Row Pinning | Infragistics -_description: Use Infragistics' Web Components grid component's row pinning feature in order to lock row change row order with a rich and easy to use API. Check out Ignite UI for Web Components table demos! -_keywords: Web Components Table, Data Grid, row pinning, Ignite UI for Web Components, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/grid/row-pinning -_tocName: Row Pinning -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Row Pinning - -The Ignite UI for Web Components Data Table / Data Grid allows Row Pinning by either using keys or the underlying data source items. When a row is pinned, it will be duplicated at the top of the web-components data grid and remain fixed there with light gray background and its actual row will be rendered with low opacity. - -## Web Components Row Pinning Example - -```typescript -export class DataGridSharedData { - - public static getEmployees(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const employees: any[] = []; - let maleCount: number = 10; - let femaleCount: number = 10; - for (let i = 0; i < count; i++) { - const age: number = Math.round(this.getRandomNumber(20, 40)); - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(this.countries); - const city: string = this.getRandomCity(country); - const generation = Math.floor(age / 10) * 10 + "s"; - const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails); - const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites); - let photoPath: any; - - if (gender === "male") { - maleCount++; - if (maleCount > 39) { - maleCount = 10; - } - photoPath = this.getPhotoMale(maleCount); - } - else { - femaleCount++; - if (femaleCount > 39) { - femaleCount = 10; - } - photoPath = this.getPhotoFemale(femaleCount); - } - - let person: any = {}; - person.Address = street + "," + city; - person.Age = age; - person.Birthday = this.getBirthday(age); - person.City = city; - person.Country = country; - person.CountryFlag = this.getCountryFlag(country); - person.Email = email; - person.FirstName = firstName; - person.Gender = this.getGenderPhoto(gender); - person.Generation = generation; - person.ID = this.pad(i + 1, 5); - person.LastName = lastName; - person.Name = firstName + " " + lastName; - person.Phone = this.getRandomPhone(); - person.Photo = photoPath; - person.Street = street; - person.Salary = this.getRandomNumber(40, 200) * 1000; - person.Sales = this.getRandomNumber(200, 980) * 1000; - person.Website = website; - person.Productivity = this.getProductivity(); - - if (person.Salary < 50000) { - person.Income = "Low"; - } else if (person.Salary < 100000) { - person.Income = "Average"; - } else { - person.Income = "High"; - } - - employees.push(person); - } - return employees; - } - - public static getProductivity(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const productivity: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-50, 50); - productivity.push({Value: value, Week: w}); - } - return productivity; - } - - public static getSales(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard", - "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - const status: string[] = ["Packing", "Shipped", "Delivered"]; - const sales: any[] = []; - - for (let i = 0; i < count; i++) { - const price = this.getRandomNumber(100, 900); - const items = this.getRandomNumber(10, 80); - const value = price * items; - const margin = this.getRandomNumber(3, 10); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - BundlePrice: price, - ProductPrice: price, - Margin: margin, - OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), - OrderItems: items, - OrderValue: value, // Math.round(value / 1000) + "," + Math.round(value % 1000), - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - Profit: profit, - Countries: country, - CountryFlag: this.getCountryFlag(country), - Status: this.getRandomItem(status) - }); - } - return sales; - } - - public static getHouses(count?: number): any[] { - if (count === undefined) { - count = 250; - } - - const houses: any[] = []; - const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"]; - const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"]; - const countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", "Japan", "Germany"]; - - for (let i = 0; i < count; i++) { - const year: number = this.getRandomNumber(1950, 2015); - const age: number = 2020 - year; - - const gender: string = this.getRandomGender(); - const firstName: string = this.getRandomNameFirst(gender); - const lastName: string = this.getRandomNameLast(); - const initials = firstName.substr(0, 1).toLowerCase(); - const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails); - - const street: string = this.getRandomStreet(); - const country: string = this.getRandomItem(countries); - const city: string = this.getRandomCity(country); - - houses.push({ - Address: street + "," + city, - Age: age, - Agent: firstName + " " + lastName, - Area: this.getRandomNumber(50, 300), - Baths: this.getRandomNumber(1, 3), - Built: year, - City: city, - Country: country, - CountryFlag: this.getCountryFlag(country), - Email: email, - ID: this.pad(i + 1, 5), - Phone: this.getRandomPhone(), - Price: this.getRandomNumber(210, 900) * 1000, - Property: this.getRandomItem(property), - Rooms: this.getRandomNumber(2, 5), - SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), - Street: street, - }); - } - return houses; - } - - private static websites: string[] = [ ".com", ".gov", ".edu", ".org"]; - private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"]; - private static genders: string[] = ["male", "female"]; - private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; - private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; - private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"]; - private static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland"]; - private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"]; - private static citiesUK: string[] = ["London", "Liverpool", "Manchester"]; - private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"]; - private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"]; - private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"]; - private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"]; - private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"]; - private static roadSuffixes: string[] = ["Road", "Street", "Way"]; - private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"]; - - private static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - private static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - private static getRandomDate(start: Date, end: Date) { - return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); - } - - private static getRandomPhone(): string { - const phoneCode = this.getRandomNumber(100, 900); - const phoneNum1 = this.getRandomNumber(100, 900); - const phoneNum2 = this.getRandomNumber(1000, 9000); - const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2; - return phone; - } - - private static getRandomGender(): string { - return this.getRandomItem(this.genders); - } - - private static getRandomNameLast(): string { - return this.getRandomItem(this.lastNames); - } - - private static getRandomNameFirst(gender: string): string { - if (gender === "male") { - return this.getRandomItem(this.maleNames); - } - else { - return this.getRandomItem(this.femaleNames); - } - } - - private static getRandomCity(country: string): string { - if (country === "Canada") { - return this.getRandomItem(this.citiesCA); - } else if (country === "France") { - return this.getRandomItem(this.citiesFR); - } else if (country === "Poland") { - return this.getRandomItem(this.citiesPL); - } else if (country === "United-States") { - return this.getRandomItem(this.citiesUS); - } else if (country === "Japan") { - return this.getRandomItem(this.citiesJP); - } else if (country === "Germany") { - return this.getRandomItem(this.citiesGR); - } else { // if (country === "United-Kingdom") { - return this.getRandomItem(this.citiesUK); - } - } - - private static getRandomStreet(): string { - const num = Math.round(this.getRandomNumber(100, 300)).toString(); - const road = this.getRandomItem(this.roadNames); - const suffix = this.getRandomItem(this.roadSuffixes); - return num + " " + road + " " + suffix; - } - - private static getBirthday(age: number): Date { - const today: Date = new Date(); - const year: number = today.getFullYear() - age; - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - private static getPhotoMale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/men/' + this.pad(id, 2) + '.png'; - } - - private static getPhotoFemale(id: number): string { - return 'https://dl.infragistics.com/x/img/people/women/' + this.pad(id, 2) + '.png'; - } - - private static getGenderPhoto(gender: string): string { - return 'https://dl.infragistics.com/x/img/genders/' + gender + '.png'; - } - - private static getCountryFlag(country: string): string { - return 'https://dl.infragistics.com/x/img/flags/' + country + '.png'; - } - - private static pad(num: number, size: number) { - let s = num + ""; - while (s.length < size) { - s = "0" + s; - } - return s; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -You can pin rows in the Web Components data grid by adding the target row’s underlying data item to the pinnedItems collection of the Web Components grid. - -## Code Snippet - -```html - - -``` - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -grid1.pinnedItems.add(data[2]); -grid1.pinnedItems.add(data[4]); -``` - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-comparison-table.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-comparison-table.md deleted file mode 100644 index 5d542b2d1..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-comparison-table.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Web Components Data Grid | Comparison Table | Data Binding | Infragistics -_description: Use Infragistics' Web Components grid component to bind to comparison data. View our Ignite UI for Web Components table demos! -_keywords: Web Components Table, Data Grid, column template, comparison data, Ignite UI for Web Components, data binding, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Comparison Data -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Binding Comparison Data - -The Ignite UI for Web Components Data Table / Data Grid supports [template columns](column-types.md#template-column) to insert images. - -## Web Components Binding Comparison Data Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-heatmap-table.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-heatmap-table.md deleted file mode 100644 index f0ef76973..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-heatmap-table.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Web Components Data Grid | HeatMap Table | Data Binding | Infragistics -_description: Use Infragistics' Web Components grid component's template columns to create a heatmap table. View our Ignite UI for Web Components table demos! -_keywords: Web Components Table, Data Grid, column template, heatmap table, Ignite UI for Web Components, data binding, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Heatmap Data -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Binding Heatmap Data - -The Ignite UI for Web Components Data Table / Data Grid supports [template columns](column-types.md#template-column) to create a heatmap. - -## Web Components Binding Heatmap Data Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-matrix-table.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-matrix-table.md deleted file mode 100644 index f2c87d6ee..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-matrix-table.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Web Components Data Grid | Matrix Data | Data Binding | Infragistics -_description: Use Infragistics' Web Components grid component's template columns to create a matrix table. View our Ignite UI for Web Components table demos! -_keywords: Web Components Table, Data Grid, column template, matrix table, Ignite UI for Web Components, data binding, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Matrix Data -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Binding Matrix Data - -The Ignite UI for Web Components Data Table / Data Grid supports [template columns](column-types.md#template-column) to create a matrix table. - -## Web Components Binding Matrix Data Example - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-periodic-table.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-periodic-table.md deleted file mode 100644 index a949f762a..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-periodic-table.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: Web Components Data Grid | Periodic Table | Data Binding | Infragistics -_description: Use Infragistics' Web Components grid component's template columns to create a periodic table. View our Ignite UI for Web Components table demos! -_keywords: Web Components Table, Data Grid, column template, periodic table, Ignite UI for Web Components, data binding, Infragistics -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Binding Periodic Data -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Binding Periodic Table - -The Ignite UI for Web Components Data Table / Data Grid supports [template columns](column-types.md#template-column) to create a periodic table. - -## Web Components Binding Periodic Table Example - -```css -.gridContainer { - height: calc(100% - 20px); - width: calc(100%); - - padding: 10px; - margin: 0px; -} - -.gridOptionsLabel { - font-size: 13px; - font-family: "Verdana"; - padding-left: 1rem; - color: rgb(24, 29, 31); -} - -.columnChooserContainer { - margin: 20px; - min-width: 225px; - height: 500px; - display: flex; - flex-direction: column; - padding-left: 15px; - padding-right: 5px; - border: 1px gray; - border-radius: 10px; - box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25); - background-color: rgb(248, 248, 248); -} - -.columnsOrderOptionsContainer { - margin-top: 20px; - margin-bottom: 20px; -} -``` -```typescript -export class PeriodicElements { - - public static getData(): any[] { - return [ - {"atomic": 1, "symbol": "H", "name": "Hydrogen", "mass": "1.00794(4)", "color": "FFFFFF", "electronicConfiguration": "1s1", "gravity": 2.2, "atomicRadius": 37, "ionRadius": "", "vdwRadius": 120, "ionizationEnergy": 1312, "electronAffinity": -73, "oxidationStates": "-1, 1", "standardState": "gas", "bondingType": "diatomic", "meltingPoint": 14, "boilingPoint": 20, "density": 0.0000899, "groupBlock": "nonmetal", "yearDiscovered": 1766}, - {"atomic": 2, "symbol": "He", "name": "Helium", "mass": "4.002602(2)", "color": "D9FFFF", "electronicConfiguration": "1s2", "gravity": "", "atomicRadius": 32, "ionRadius": "", "vdwRadius": 140, "ionizationEnergy": 2372, "electronAffinity": 0, "oxidationStates": "", "standardState": "gas", "bondingType": "atomic", "meltingPoint": "", "boilingPoint": 4, "density": 0.0001785, "groupBlock": "noble gas", "yearDiscovered": 1868}, - {"atomic": 3, "symbol": "Li", "name": "Lithium", "mass": "6.941(2)", "color": "CC80FF", "electronicConfiguration": "[He] 2s1", "gravity": 0.98, "atomicRadius": 134, "ionRadius": "76 (+1)", "vdwRadius": 182, "ionizationEnergy": 520, "electronAffinity": -60, "oxidationStates": 1, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 454, "boilingPoint": 1615, "density": 0.535, "groupBlock": "alkali metal", "yearDiscovered": 1817}, - {"atomic": 4, "symbol": "Be", "name": "Beryllium", "mass": "9.012182(3)", "color": "C2FF00", "electronicConfiguration": "[He] 2s2", "gravity": 1.57, "atomicRadius": 90, "ionRadius": "45 (+2)", "vdwRadius": "", "ionizationEnergy": 900, "electronAffinity": 0, "oxidationStates": 2, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1560, "boilingPoint": 2743, "density": 1.848, "groupBlock": "alkaline earth metal", "yearDiscovered": 1798}, - {"atomic": 5, "symbol": "B", "name": "Boron", "mass": "10.811(7)", "color": "FFB5B5", "electronicConfiguration": "[He] 2s2 2p1", "gravity": 2.04, "atomicRadius": 82, "ionRadius": "27 (+3)", "vdwRadius": "", "ionizationEnergy": 801, "electronAffinity": -27, "oxidationStates": "1, 2, 3", "standardState": "solid", "bondingType": "covalent network", "meltingPoint": 2348, "boilingPoint": 4273, "density": 2.46, "groupBlock": "metalloid", "yearDiscovered": 1807}, - {"atomic": 6, "symbol": "C", "name": "Carbon", "mass": "12.0107(8)", "color": "909090", "electronicConfiguration": "[He] 2s2 2p2", "gravity": 2.55, "atomicRadius": 77, "ionRadius": "16 (+4)", "vdwRadius": 170, "ionizationEnergy": 1087, "electronAffinity": -154, "oxidationStates": "-4, -3, -2, -1, 1, 2, 3, 4", "standardState": "solid", "bondingType": "covalent network", "meltingPoint": 3823, "boilingPoint": 4300, "density": 2.26, "groupBlock": "nonmetal", "yearDiscovered": "Ancient"}, - {"atomic": 7, "symbol": "N", "name": "Nitrogen", "mass": "14.0067(2)", "color": "3050F8", "electronicConfiguration": "[He] 2s2 2p3", "gravity": 3.04, "atomicRadius": 75, "ionRadius": "146 (-3)", "vdwRadius": 155, "ionizationEnergy": 1402, "electronAffinity": -7, "oxidationStates": "-3, -2, -1, 1, 2, 3, 4, 5", "standardState": "gas", "bondingType": "diatomic", "meltingPoint": 63, "boilingPoint": 77, "density": 0.001251, "groupBlock": "nonmetal", "yearDiscovered": 1772}, - {"atomic": 8, "symbol": "O", "name": "Oxygen", "mass": "15.9994(3)", "color": "FF0D0D", "electronicConfiguration": "[He] 2s2 2p4", "gravity": 3.44, "atomicRadius": 73, "ionRadius": "140 (-2)", "vdwRadius": 152, "ionizationEnergy": 1314, "electronAffinity": -141, "oxidationStates": "-2, -1, 1, 2", "standardState": "gas", "bondingType": "diatomic", "meltingPoint": 55, "boilingPoint": 90, "density": 0.001429, "groupBlock": "nonmetal", "yearDiscovered": 1774}, - {"atomic": 9, "symbol": "F", "name": "Fluorine", "mass": "18.9984032(5)", "color": "9e+51", "electronicConfiguration": "[He] 2s2 2p5", "gravity": 3.98, "atomicRadius": 71, "ionRadius": "133 (-1)", "vdwRadius": 147, "ionizationEnergy": 1681, "electronAffinity": -328, "oxidationStates": -1, "standardState": "gas", "bondingType": "atomic", "meltingPoint": 54, "boilingPoint": 85, "density": 0.001696, "groupBlock": "halogen", "yearDiscovered": 1670}, - {"atomic": 10, "symbol": "Ne", "name": "Neon", "mass": "20.1797(6)", "color": "B3E3F5", "electronicConfiguration": "[He] 2s2 2p6", "gravity": "", "atomicRadius": 69, "ionRadius": "", "vdwRadius": 154, "ionizationEnergy": 2081, "electronAffinity": 0, "oxidationStates": "", "standardState": "gas", "bondingType": "atomic", "meltingPoint": 25, "boilingPoint": 27, "density": 0.0009, "groupBlock": "noble gas", "yearDiscovered": 1898}, - {"atomic": 11, "symbol": "Na", "name": "Sodium", "mass": "22.98976928(2)", "color": "AB5CF2", "electronicConfiguration": "[Ne] 3s1", "gravity": 0.93, "atomicRadius": 154, "ionRadius": "102 (+1)", "vdwRadius": 227, "ionizationEnergy": 496, "electronAffinity": -53, "oxidationStates": "-1, 1", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 371, "boilingPoint": 1156, "density": 0.968, "groupBlock": "alkali metal", "yearDiscovered": 1807}, - {"atomic": 12, "symbol": "Mg", "name": "Magnesium", "mass": "24.3050(6)", "color": "8AFF00", "electronicConfiguration": "[Ne] 3s2", "gravity": 1.31, "atomicRadius": 130, "ionRadius": "72 (+2)", "vdwRadius": 173, "ionizationEnergy": 738, "electronAffinity": 0, "oxidationStates": "1, 2", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 923, "boilingPoint": 1363, "density": 1.738, "groupBlock": "alkaline earth metal", "yearDiscovered": 1808}, - {"atomic": 13, "symbol": "Al", "name": "Aluminum", "mass": "26.9815386(8)", "color": "BFA6A6", "electronicConfiguration": "[Ne] 3s2 3p1", "gravity": 1.61, "atomicRadius": 118, "ionRadius": "53.5 (+3)", "vdwRadius": "", "ionizationEnergy": 578, "electronAffinity": -43, "oxidationStates": "1, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 933, "boilingPoint": 2792, "density": 2.7, "groupBlock": "metal", "yearDiscovered": "Ancient"}, - {"atomic": 14, "symbol": "Si", "name": "Silicon", "mass": "28.0855(3)", "color": "F0C8A0", "electronicConfiguration": "[Ne] 3s2 3p2", "gravity": 1.9, "atomicRadius": 111, "ionRadius": "40 (+4)", "vdwRadius": 210, "ionizationEnergy": 787, "electronAffinity": -134, "oxidationStates": "-4, -3, -2, -1, 1, 2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1687, "boilingPoint": 3173, "density": 2.33, "groupBlock": "metalloid", "yearDiscovered": 1854}, - {"atomic": 15, "symbol": "P", "name": "Phosphorus", "mass": "30.973762(2)", "color": "FF8000", "electronicConfiguration": "[Ne] 3s2 3p3", "gravity": 2.19, "atomicRadius": 106, "ionRadius": "44 (+3)", "vdwRadius": 180, "ionizationEnergy": 1012, "electronAffinity": -72, "oxidationStates": "-3, -2, -1, 1, 2, 3, 4, 5", "standardState": "solid", "bondingType": "covalent network", "meltingPoint": 317, "boilingPoint": 554, "density": 1.823, "groupBlock": "nonmetal", "yearDiscovered": 1669}, - {"atomic": 16, "symbol": "S", "name": "Sulfur", "mass": "32.065(5)", "color": "FFFF30", "electronicConfiguration": "[Ne] 3s2 3p4", "gravity": 2.58, "atomicRadius": 102, "ionRadius": "184 (-2)", "vdwRadius": 180, "ionizationEnergy": 1000, "electronAffinity": -200, "oxidationStates": "-2, -1, 1, 2, 3, 4, 5, 6", "standardState": "solid", "bondingType": "covalent network", "meltingPoint": 388, "boilingPoint": 718, "density": 1.96, "groupBlock": "nonmetal", "yearDiscovered": "Ancient"}, - {"atomic": 17, "symbol": "Cl", "name": "Chlorine", "mass": "35.453(2)", "color": "1FF01F", "electronicConfiguration": "[Ne] 3s2 3p5", "gravity": 3.16, "atomicRadius": 99, "ionRadius": "181 (-1)", "vdwRadius": 175, "ionizationEnergy": 1251, "electronAffinity": -349, "oxidationStates": "-1, 1, 2, 3, 4, 5, 6, 7", "standardState": "gas", "bondingType": "covalent network", "meltingPoint": 172, "boilingPoint": 239, "density": 0.003214, "groupBlock": "halogen", "yearDiscovered": 1774}, - {"atomic": 18, "symbol": "Ar", "name": "Argon", "mass": "39.948(1)", "color": "80D1E3", "electronicConfiguration": "[Ne] 3s2 3p6", "gravity": "", "atomicRadius": 97, "ionRadius": "", "vdwRadius": 188, "ionizationEnergy": 1521, "electronAffinity": 0, "oxidationStates": "", "standardState": "gas", "bondingType": "atomic", "meltingPoint": 84, "boilingPoint": 87, "density": 0.001784, "groupBlock": "noble gas", "yearDiscovered": 1894}, - {"atomic": 19, "symbol": "K", "name": "Potassium", "mass": "39.0983(1)", "color": "8F40D4", "electronicConfiguration": "[Ar] 4s1", "gravity": 0.82, "atomicRadius": 196, "ionRadius": "138 (+1)", "vdwRadius": 275, "ionizationEnergy": 419, "electronAffinity": -48, "oxidationStates": 1, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 337, "boilingPoint": 1032, "density": 0.856, "groupBlock": "alkali metal", "yearDiscovered": 1807}, - {"atomic": 20, "symbol": "Ca", "name": "Calcium", "mass": "40.078(4)", "color": "3DFF00", "electronicConfiguration": "[Ar] 4s2", "gravity": 1, "atomicRadius": 174, "ionRadius": "100 (+2)", "vdwRadius": "", "ionizationEnergy": 590, "electronAffinity": -2, "oxidationStates": 2, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1115, "boilingPoint": 1757, "density": 1.55, "groupBlock": "alkaline earth metal", "yearDiscovered": "Ancient"}, - {"atomic": 21, "symbol": "Sc", "name": "Scandium", "mass": "44.955912(6)", "color": "E6E6E6", "electronicConfiguration": "[Ar] 3d1 4s2", "gravity": 1.36, "atomicRadius": 144, "ionRadius": "74.5 (+3)", "vdwRadius": "", "ionizationEnergy": 633, "electronAffinity": -18, "oxidationStates": "1, 2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1814, "boilingPoint": 3103, "density": 2.985, "groupBlock": "transition metal", "yearDiscovered": 1876}, - {"atomic": 22, "symbol": "Ti", "name": "Titanium", "mass": "47.867(1)", "color": "BFC2C7", "electronicConfiguration": "[Ar] 3d2 4s2", "gravity": 1.54, "atomicRadius": 136, "ionRadius": "86 (+2)", "vdwRadius": "", "ionizationEnergy": 659, "electronAffinity": -8, "oxidationStates": "-1, 2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1941, "boilingPoint": 3560, "density": 4.507, "groupBlock": "transition metal", "yearDiscovered": 1791}, - {"atomic": 23, "symbol": "V", "name": "Vanadium", "mass": "50.9415(1)", "color": "A6A6AB", "electronicConfiguration": "[Ar] 3d3 4s2", "gravity": 1.63, "atomicRadius": 125, "ionRadius": "79 (+2)", "vdwRadius": "", "ionizationEnergy": 651, "electronAffinity": -51, "oxidationStates": "-1, 2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2183, "boilingPoint": 3680, "density": 6.11, "groupBlock": "transition metal", "yearDiscovered": 1803}, - {"atomic": 24, "symbol": "Cr", "name": "Chromium", "mass": "51.9961(6)", "color": "8A99C7", "electronicConfiguration": "[Ar] 3d5 4s1", "gravity": 1.66, "atomicRadius": 127, "ionRadius": "80 (+2*)", "vdwRadius": "", "ionizationEnergy": 653, "electronAffinity": -64, "oxidationStates": "-2, -1, 1, 2, 3, 4, 5, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2180, "boilingPoint": 2944, "density": 7.14, "groupBlock": "transition metal", "yearDiscovered": "Ancient"}, - {"atomic": 25, "symbol": "Mn", "name": "Manganese", "mass": "54.938045(5)", "color": "9C7AC7", "electronicConfiguration": "[Ar] 3d5 4s2", "gravity": 1.55, "atomicRadius": 139, "ionRadius": "67 (+2)", "vdwRadius": "", "ionizationEnergy": 717, "electronAffinity": 0, "oxidationStates": "-3, -2, -1, 1, 2, 3, 4, 5, 6, 7", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1519, "boilingPoint": 2334, "density": 7.47, "groupBlock": "transition metal", "yearDiscovered": 1774}, - {"atomic": 26, "symbol": "Fe", "name": "Iron", "mass": "55.845(2)", "color": "E06633", "electronicConfiguration": "[Ar] 3d6 4s2", "gravity": 1.83, "atomicRadius": 125, "ionRadius": "78 (+2*)", "vdwRadius": "", "ionizationEnergy": 763, "electronAffinity": -16, "oxidationStates": "-2, -1, 1, 2, 3, 4, 5, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1811, "boilingPoint": 3134, "density": 7.874, "groupBlock": "transition metal", "yearDiscovered": "Ancient"}, - {"atomic": 27, "symbol": "Co", "name": "Cobalt", "mass": "58.933195(5)", "color": "F090A0", "electronicConfiguration": "[Ar] 3d7 4s2", "gravity": 1.88, "atomicRadius": 126, "ionRadius": "74.5 (+2*)", "vdwRadius": "", "ionizationEnergy": 760, "electronAffinity": -64, "oxidationStates": "-1, 1, 2, 3, 4, 5", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1768, "boilingPoint": 3200, "density": 8.9, "groupBlock": "transition metal", "yearDiscovered": "Ancient"}, - {"atomic": 28, "symbol": "Ni", "name": "Nickel", "mass": "58.6934(4)", "color": "50D050", "electronicConfiguration": "[Ar] 3d8 4s2", "gravity": 1.91, "atomicRadius": 121, "ionRadius": "69 (+2)", "vdwRadius": 163, "ionizationEnergy": 737, "electronAffinity": -112, "oxidationStates": "-1, 1, 2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1728, "boilingPoint": 3186, "density": 8.908, "groupBlock": "transition metal", "yearDiscovered": 1751}, - {"atomic": 29, "symbol": "Cu", "name": "Copper", "mass": "63.546(3)", "color": "C88033", "electronicConfiguration": "[Ar] 3d10 4s1", "gravity": 1.9, "atomicRadius": 138, "ionRadius": "77 (+1)", "vdwRadius": 140, "ionizationEnergy": 746, "electronAffinity": -118, "oxidationStates": "1, 2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1358, "boilingPoint": 3200, "density": 8.92, "groupBlock": "transition metal", "yearDiscovered": "Ancient"}, - {"atomic": 30, "symbol": "Zn", "name": "Zinc", "mass": "65.38(2)", "color": "7D80B0", "electronicConfiguration": "[Ar] 3d10 4s2", "gravity": 1.65, "atomicRadius": 131, "ionRadius": "74 (+2)", "vdwRadius": 139, "ionizationEnergy": 906, "electronAffinity": 0, "oxidationStates": 2, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 693, "boilingPoint": 1180, "density": 7.14, "groupBlock": "transition metal", "yearDiscovered": 1746}, - {"atomic": 31, "symbol": "Ga", "name": "Gallium", "mass": "69.723(1)", "color": "C28F8F", "electronicConfiguration": "[Ar] 3d10 4s2 4p1", "gravity": 1.81, "atomicRadius": 126, "ionRadius": "62 (+3)", "vdwRadius": 187, "ionizationEnergy": 579, "electronAffinity": -29, "oxidationStates": "1, 2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 303, "boilingPoint": 2477, "density": 5.904, "groupBlock": "metal", "yearDiscovered": 1875}, - {"atomic": 32, "symbol": "Ge", "name": "Germanium", "mass": "72.64(1)", "color": "668F8F", "electronicConfiguration": "[Ar] 3d10 4s2 4p2", "gravity": 2.01, "atomicRadius": 122, "ionRadius": "73 (+2)", "vdwRadius": "", "ionizationEnergy": 762, "electronAffinity": -119, "oxidationStates": "-4, 1, 2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1211, "boilingPoint": 3093, "density": 5.323, "groupBlock": "metalloid", "yearDiscovered": 1886}, - {"atomic": 33, "symbol": "As", "name": "Arsenic", "mass": "74.92160(2)", "color": "BD80E3", "electronicConfiguration": "[Ar] 3d10 4s2 4p3", "gravity": 2.18, "atomicRadius": 119, "ionRadius": "58 (+3)", "vdwRadius": 185, "ionizationEnergy": 947, "electronAffinity": -78, "oxidationStates": "-3, 2, 3, 5", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1090, "boilingPoint": 887, "density": 5.727, "groupBlock": "metalloid", "yearDiscovered": "Ancient"}, - {"atomic": 34, "symbol": "Se", "name": "Selenium", "mass": "78.96(3)", "color": "FFA100", "electronicConfiguration": "[Ar] 3d10 4s2 4p4", "gravity": 2.55, "atomicRadius": 116, "ionRadius": "198 (-2)", "vdwRadius": 190, "ionizationEnergy": 941, "electronAffinity": -195, "oxidationStates": "-2, 2, 4, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 494, "boilingPoint": 958, "density": 4.819, "groupBlock": "nonmetal", "yearDiscovered": 1817}, - {"atomic": 35, "symbol": "Br", "name": "Bromine", "mass": "79.904(1)", "color": "A62929", "electronicConfiguration": "[Ar] 3d10 4s2 4p5", "gravity": 2.96, "atomicRadius": 114, "ionRadius": "196 (-1)", "vdwRadius": 185, "ionizationEnergy": 1140, "electronAffinity": -325, "oxidationStates": "-1, 1, 3, 4, 5, 7", "standardState": "liquid", "bondingType": "covalent network", "meltingPoint": 266, "boilingPoint": 332, "density": 3.12, "groupBlock": "halogen", "yearDiscovered": 1826}, - {"atomic": 36, "symbol": "Kr", "name": "Krypton", "mass": "83.798(2)", "color": "5CB8D1", "electronicConfiguration": "[Ar] 3d10 4s2 4p6", "gravity": "", "atomicRadius": 110, "ionRadius": "", "vdwRadius": 202, "ionizationEnergy": 1351, "electronAffinity": 0, "oxidationStates": 2, "standardState": "gas", "bondingType": "atomic", "meltingPoint": 116, "boilingPoint": 120, "density": 0.00375, "groupBlock": "noble gas", "yearDiscovered": 1898}, - {"atomic": 37, "symbol": "Rb", "name": "Rubidium", "mass": "85.4678(3)", "color": "702EB0", "electronicConfiguration": "[Kr] 5s1", "gravity": 0.82, "atomicRadius": 211, "ionRadius": "152 (+1)", "vdwRadius": "", "ionizationEnergy": 403, "electronAffinity": -47, "oxidationStates": 1, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 312, "boilingPoint": 961, "density": 1.532, "groupBlock": "alkali metal", "yearDiscovered": 1861}, - {"atomic": 38, "symbol": "Sr", "name": "Strontium", "mass": "87.62(1)", "color": "00FF00", "electronicConfiguration": "[Kr] 5s2", "gravity": 0.95, "atomicRadius": 192, "ionRadius": "118 (+2)", "vdwRadius": "", "ionizationEnergy": 550, "electronAffinity": -5, "oxidationStates": 2, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1050, "boilingPoint": 1655, "density": 2.63, "groupBlock": "alkaline earth metal", "yearDiscovered": 1790}, - {"atomic": 39, "symbol": "Y", "name": "Yttrium", "mass": "88.90585(2)", "color": "94FFFF", "electronicConfiguration": "[Kr] 4d1 5s2", "gravity": 1.22, "atomicRadius": 162, "ionRadius": "90 (+3)", "vdwRadius": "", "ionizationEnergy": 600, "electronAffinity": -30, "oxidationStates": "1, 2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1799, "boilingPoint": 3618, "density": 4.472, "groupBlock": "transition metal", "yearDiscovered": 1794}, - {"atomic": 40, "symbol": "Zr", "name": "Zirconium", "mass": "91.224(2)", "color": "94E0E0", "electronicConfiguration": "[Kr] 4d2 5s2", "gravity": 1.33, "atomicRadius": 148, "ionRadius": "72 (+4)", "vdwRadius": "", "ionizationEnergy": 640, "electronAffinity": -41, "oxidationStates": "1, 2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2128, "boilingPoint": 4682, "density": 6.511, "groupBlock": "transition metal", "yearDiscovered": 1789}, - {"atomic": 41, "symbol": "Nb", "name": "Niobium", "mass": "92.90638(2)", "color": "73C2C9", "electronicConfiguration": "[Kr] 4d4 5s1", "gravity": 1.6, "atomicRadius": 137, "ionRadius": "72 (+3)", "vdwRadius": "", "ionizationEnergy": 652, "electronAffinity": -86, "oxidationStates": "-1, 2, 3, 4, 5", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2750, "boilingPoint": 5017, "density": 8.57, "groupBlock": "transition metal", "yearDiscovered": 1801}, - {"atomic": 42, "symbol": "Mo", "name": "Molybdenum", "mass": "95.96(2)", "color": "54B5B5", "electronicConfiguration": "[Kr] 4d5 5s1", "gravity": 2.16, "atomicRadius": 145, "ionRadius": "69 (+3)", "vdwRadius": "", "ionizationEnergy": 684, "electronAffinity": -72, "oxidationStates": "-2, -1, 1, 2, 3, 4, 5, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2896, "boilingPoint": 4912, "density": 10.28, "groupBlock": "transition metal", "yearDiscovered": 1778}, - {"atomic": 43, "symbol": "Tc", "name": "Technetium", "mass": "98", "color": "3B9E9E", "electronicConfiguration": "[Kr] 4d5 5s2", "gravity": 1.9, "atomicRadius": 156, "ionRadius": "64.5 (+4)", "vdwRadius": "", "ionizationEnergy": 702, "electronAffinity": -53, "oxidationStates": "-3, -1, 1, 2, 3, 4, 5, 6, 7", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2430, "boilingPoint": 4538, "density": 11.5, "groupBlock": "transition metal", "yearDiscovered": 1937}, - {"atomic": 44, "symbol": "Ru", "name": "Ruthenium", "mass": "101.07(2)", "color": "248F8F", "electronicConfiguration": "[Kr] 4d7 5s1", "gravity": 2.2, "atomicRadius": 126, "ionRadius": "68 (+3)", "vdwRadius": "", "ionizationEnergy": 710, "electronAffinity": -101, "oxidationStates": "-2, 1, 2, 3, 4, 5, 6, 7, 8", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2607, "boilingPoint": 4423, "density": 12.37, "groupBlock": "transition metal", "yearDiscovered": 1827}, - {"atomic": 45, "symbol": "Rh", "name": "Rhodium", "mass": "102.90550(2)", "color": "0A7D8C", "electronicConfiguration": "[Kr] 4d8 5s1", "gravity": 2.28, "atomicRadius": 135, "ionRadius": "66.5 (+3)", "vdwRadius": "", "ionizationEnergy": 720, "electronAffinity": -110, "oxidationStates": "-1, 1, 2, 3, 4, 5, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2237, "boilingPoint": 3968, "density": 12.45, "groupBlock": "transition metal", "yearDiscovered": 1803}, - {"atomic": 46, "symbol": "Pd", "name": "Palladium", "mass": "106.42(1)", "color": "6985", "electronicConfiguration": "[Kr] 4d10", "gravity": 2.2, "atomicRadius": 131, "ionRadius": "59 (+1)", "vdwRadius": 163, "ionizationEnergy": 804, "electronAffinity": -54, "oxidationStates": "2, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1828, "boilingPoint": 3236, "density": 12.023, "groupBlock": "transition metal", "yearDiscovered": 1803}, - {"atomic": 47, "symbol": "Ag", "name": "Silver", "mass": "107.8682(2)", "color": "C0C0C0", "electronicConfiguration": "[Kr] 4d10 5s1", "gravity": 1.93, "atomicRadius": 153, "ionRadius": "115 (+1)", "vdwRadius": 172, "ionizationEnergy": 731, "electronAffinity": -126, "oxidationStates": "1, 2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1235, "boilingPoint": 2435, "density": 10.49, "groupBlock": "transition metal", "yearDiscovered": "Ancient"}, - {"atomic": 48, "symbol": "Cd", "name": "Cadmium", "mass": "112.411(8)", "color": "FFD98F", "electronicConfiguration": "[Kr] 4d10 5s2", "gravity": 1.69, "atomicRadius": 148, "ionRadius": "95 (+2)", "vdwRadius": 158, "ionizationEnergy": 868, "electronAffinity": 0, "oxidationStates": 2, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 594, "boilingPoint": 1040, "density": 8.65, "groupBlock": "transition metal", "yearDiscovered": 1817}, - {"atomic": 49, "symbol": "In", "name": "Indium", "mass": "114.818(3)", "color": "A67573", "electronicConfiguration": "[Kr] 4d10 5s2 5p1", "gravity": 1.78, "atomicRadius": 144, "ionRadius": "80 (+3)", "vdwRadius": 193, "ionizationEnergy": 558, "electronAffinity": -29, "oxidationStates": "1, 2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 430, "boilingPoint": 2345, "density": 7.31, "groupBlock": "metal", "yearDiscovered": 1863}, - {"atomic": 50, "symbol": "Sn", "name": "Tin", "mass": "118.710(7)", "color": "668080", "electronicConfiguration": "[Kr] 4d10 5s2 5p2", "gravity": 1.96, "atomicRadius": 141, "ionRadius": "112 (+2)", "vdwRadius": 217, "ionizationEnergy": 709, "electronAffinity": -107, "oxidationStates": "-4, 2, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 505, "boilingPoint": 2875, "density": 7.31, "groupBlock": "metal", "yearDiscovered": "Ancient"}, - {"atomic": 51, "symbol": "Sb", "name": "Antimony", "mass": "121.760(1)", "color": "9E63B5", "electronicConfiguration": "[Kr] 4d10 5s2 5p3", "gravity": 2.05, "atomicRadius": 138, "ionRadius": "76 (+3)", "vdwRadius": "", "ionizationEnergy": 834, "electronAffinity": -103, "oxidationStates": "-3, 3, 5", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 904, "boilingPoint": 1860, "density": 6.697, "groupBlock": "metalloid", "yearDiscovered": "Ancient"}, - {"atomic": 52, "symbol": "Te", "name": "Tellurium", "mass": "127.60(3)", "color": "D47A00", "electronicConfiguration": "[Kr] 4d10 5s2 5p4", "gravity": 2.1, "atomicRadius": 135, "ionRadius": "221 (-2)", "vdwRadius": 206, "ionizationEnergy": 869, "electronAffinity": -190, "oxidationStates": "-2, 2, 4, 5, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 723, "boilingPoint": 1261, "density": 6.24, "groupBlock": "metalloid", "yearDiscovered": 1782}, - {"atomic": 53, "symbol": "I", "name": "Iodine", "mass": "126.90447(3)", "color": "940094", "electronicConfiguration": "[Kr] 4d10 5s2 5p5", "gravity": 2.66, "atomicRadius": 133, "ionRadius": "220 (-1)", "vdwRadius": 198, "ionizationEnergy": 1008, "electronAffinity": -295, "oxidationStates": "-1, 1, 3, 5, 7", "standardState": "solid", "bondingType": "covalent network", "meltingPoint": 387, "boilingPoint": 457, "density": 4.94, "groupBlock": "halogen", "yearDiscovered": 1811}, - {"atomic": 54, "symbol": "Xe", "name": "Xenon", "mass": "131.293(6)", "color": "429EB0", "electronicConfiguration": "[Kr] 4d10 5s2 5p6", "gravity": "", "atomicRadius": 130, "ionRadius": "48 (+8)", "vdwRadius": 216, "ionizationEnergy": 1170, "electronAffinity": 0, "oxidationStates": "2, 4, 6, 8", "standardState": "gas", "bondingType": "atomic", "meltingPoint": 161, "boilingPoint": 165, "density": 0.0059, "groupBlock": "noble gas", "yearDiscovered": 1898}, - {"atomic": 55, "symbol": "Cs", "name": "Cesium", "mass": "132.9054519(2)", "color": "57178F", "electronicConfiguration": "[Xe] 6s1", "gravity": 0.79, "atomicRadius": 225, "ionRadius": "167 (+1)", "vdwRadius": "", "ionizationEnergy": 376, "electronAffinity": -46, "oxidationStates": 1, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 302, "boilingPoint": 944, "density": 1.879, "groupBlock": "alkali metal", "yearDiscovered": 1860}, - {"atomic": 56, "symbol": "Ba", "name": "Barium", "mass": "137.327(7)", "color": "00C900", "electronicConfiguration": "[Xe] 6s2", "gravity": 0.89, "atomicRadius": 198, "ionRadius": "135 (+2)", "vdwRadius": "", "ionizationEnergy": 503, "electronAffinity": -14, "oxidationStates": 2, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1000, "boilingPoint": 2143, "density": 3.51, "groupBlock": "alkaline earth metal", "yearDiscovered": 1808}, - {"atomic": 57, "symbol": "La", "name": "Lanthanum", "mass": "138.90547(7)", "color": "70D4FF", "electronicConfiguration": "[Xe] 5d1 6s2", "gravity": 1.1, "atomicRadius": 169, "ionRadius": "103.2 (+3)", "vdwRadius": "", "ionizationEnergy": 538, "electronAffinity": -48, "oxidationStates": "2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1193, "boilingPoint": 3737, "density": 6.146, "groupBlock": "lanthanoid", "yearDiscovered": 1839}, - {"atomic": 58, "symbol": "Ce", "name": "Cerium", "mass": "140.116(1)", "color": "FFFFC7", "electronicConfiguration": "[Xe] 4f1 5d1 6s2", "gravity": 1.12, "atomicRadius": "", "ionRadius": "102 (+3)", "vdwRadius": "", "ionizationEnergy": 534, "electronAffinity": -50, "oxidationStates": "2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1071, "boilingPoint": 3633, "density": 6.689, "groupBlock": "lanthanoid", "yearDiscovered": 1803}, - {"atomic": 59, "symbol": "Pr", "name": "Praseodymium", "mass": "140.90765(2)", "color": "D9FFC7", "electronicConfiguration": "[Xe] 4f3 6s2", "gravity": 1.13, "atomicRadius": "", "ionRadius": "99 (+3)", "vdwRadius": "", "ionizationEnergy": 527, "electronAffinity": -50, "oxidationStates": "2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1204, "boilingPoint": 3563, "density": 6.64, "groupBlock": "lanthanoid", "yearDiscovered": 1885}, - {"atomic": 60, "symbol": "Nd", "name": "Neodymium", "mass": "144.242(3)", "color": "C7FFC7", "electronicConfiguration": "[Xe] 4f4 6s2", "gravity": 1.14, "atomicRadius": "", "ionRadius": "129 (+2)", "vdwRadius": "", "ionizationEnergy": 533, "electronAffinity": -50, "oxidationStates": "2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1294, "boilingPoint": 3373, "density": 7.01, "groupBlock": "lanthanoid", "yearDiscovered": 1885}, - {"atomic": 61, "symbol": "Pm", "name": "Promethium", "mass": "145", "color": "A3FFC7", "electronicConfiguration": "[Xe] 4f5 6s2", "gravity": 1.13, "atomicRadius": "", "ionRadius": "97 (+3)", "vdwRadius": "", "ionizationEnergy": 540, "electronAffinity": -50, "oxidationStates": 3, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1373, "boilingPoint": 3273, "density": 7.264, "groupBlock": "lanthanoid", "yearDiscovered": 1947}, - {"atomic": 62, "symbol": "Sm", "name": "Samarium", "mass": "150.36(2)", "color": "8FFFC7", "electronicConfiguration": "[Xe] 4f6 6s2", "gravity": 1.17, "atomicRadius": "", "ionRadius": "122 (+2)", "vdwRadius": "", "ionizationEnergy": 545, "electronAffinity": -50, "oxidationStates": "2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1345, "boilingPoint": 2076, "density": 7.353, "groupBlock": "lanthanoid", "yearDiscovered": 1853}, - {"atomic": 63, "symbol": "Eu", "name": "Europium", "mass": "151.964(1)", "color": "61FFC7", "electronicConfiguration": "[Xe] 4f7 6s2", "gravity": 1.2, "atomicRadius": "", "ionRadius": "117 (+2)", "vdwRadius": "", "ionizationEnergy": 547, "electronAffinity": -50, "oxidationStates": "2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1095, "boilingPoint": 1800, "density": 5.244, "groupBlock": "lanthanoid", "yearDiscovered": 1901}, - {"atomic": 64, "symbol": "Gd", "name": "Gadolinium", "mass": "157.25(3)", "color": "45FFC7", "electronicConfiguration": "[Xe] 4f7 5d1 6s2", "gravity": 1.2, "atomicRadius": "", "ionRadius": "93.8 (+3)", "vdwRadius": "", "ionizationEnergy": 593, "electronAffinity": -50, "oxidationStates": "1, 2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1586, "boilingPoint": 3523, "density": 7.901, "groupBlock": "lanthanoid", "yearDiscovered": 1880}, - {"atomic": 65, "symbol": "Tb", "name": "Terbium", "mass": "158.92535(2)", "color": "30FFC7", "electronicConfiguration": "[Xe] 4f9 6s2", "gravity": 1.2, "atomicRadius": "", "ionRadius": "92.3 (+3)", "vdwRadius": "", "ionizationEnergy": 566, "electronAffinity": -50, "oxidationStates": "1, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1629, "boilingPoint": 3503, "density": 8.219, "groupBlock": "lanthanoid", "yearDiscovered": 1843}, - {"atomic": 66, "symbol": "Dy", "name": "Dysprosium", "mass": "162.500(1)", "color": "1FFFC7", "electronicConfiguration": "[Xe] 4f10 6s2", "gravity": 1.22, "atomicRadius": "", "ionRadius": "107 (+2)", "vdwRadius": "", "ionizationEnergy": 573, "electronAffinity": -50, "oxidationStates": "2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1685, "boilingPoint": 2840, "density": 8.551, "groupBlock": "lanthanoid", "yearDiscovered": 1886}, - {"atomic": 67, "symbol": "Ho", "name": "Holmium", "mass": "164.93032(2)", "color": "00FF9C", "electronicConfiguration": "[Xe] 4f11 6s2", "gravity": 1.23, "atomicRadius": "", "ionRadius": "90.1 (+3)", "vdwRadius": "", "ionizationEnergy": 581, "electronAffinity": -50, "oxidationStates": 3, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1747, "boilingPoint": 2973, "density": 8.795, "groupBlock": "lanthanoid", "yearDiscovered": 1878}, - {"atomic": 68, "symbol": "Er", "name": "Erbium", "mass": "167.259(3)", "color": "0", "electronicConfiguration": "[Xe] 4f12 6s2", "gravity": 1.24, "atomicRadius": "", "ionRadius": "89 (+3)", "vdwRadius": "", "ionizationEnergy": 589, "electronAffinity": -50, "oxidationStates": 3, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1770, "boilingPoint": 3141, "density": 9.066, "groupBlock": "lanthanoid", "yearDiscovered": 1842}, - {"atomic": 69, "symbol": "Tm", "name": "Thulium", "mass": "168.93421(2)", "color": "00D452", "electronicConfiguration": "[Xe] 4f13 6s2", "gravity": 1.25, "atomicRadius": "", "ionRadius": "103 (+2)", "vdwRadius": "", "ionizationEnergy": 597, "electronAffinity": -50, "oxidationStates": "2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1818, "boilingPoint": 2223, "density": 9.321, "groupBlock": "lanthanoid", "yearDiscovered": 1879}, - {"atomic": 70, "symbol": "Yb", "name": "Ytterbium", "mass": "173.054(5)", "color": "00BF38", "electronicConfiguration": "[Xe] 4f14 6s2", "gravity": 1.1, "atomicRadius": "", "ionRadius": "102 (+2)", "vdwRadius": "", "ionizationEnergy": 603, "electronAffinity": -50, "oxidationStates": "2, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1092, "boilingPoint": 1469, "density": 6.57, "groupBlock": "lanthanoid", "yearDiscovered": 1878}, - {"atomic": 71, "symbol": "Lu", "name": "Lutetium", "mass": "174.9668(1)", "color": "00AB24", "electronicConfiguration": "[Xe] 4f14 5d1 6s2", "gravity": 1.27, "atomicRadius": 160, "ionRadius": "86.1 (+3)", "vdwRadius": "", "ionizationEnergy": 524, "electronAffinity": -50, "oxidationStates": 3, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1936, "boilingPoint": 3675, "density": 9.841, "groupBlock": "lanthanoid", "yearDiscovered": 1907}, - {"atomic": 72, "symbol": "Hf", "name": "Hafnium", "mass": "178.49(2)", "color": "4DC2FF", "electronicConfiguration": "[Xe] 4f14 5d2 6s2", "gravity": 1.3, "atomicRadius": 150, "ionRadius": "71 (+4)", "vdwRadius": "", "ionizationEnergy": 659, "electronAffinity": 0, "oxidationStates": "2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2506, "boilingPoint": 4876, "density": 13.31, "groupBlock": "transition metal", "yearDiscovered": 1923}, - {"atomic": 73, "symbol": "Ta", "name": "Tantalum", "mass": "180.94788(2)", "color": "4DA6FF", "electronicConfiguration": "[Xe] 4f14 5d3 6s2", "gravity": 1.5, "atomicRadius": 138, "ionRadius": "72 (+3)", "vdwRadius": "", "ionizationEnergy": 761, "electronAffinity": -31, "oxidationStates": "-1, 2, 3, 4, 5", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 3290, "boilingPoint": 5731, "density": 16.65, "groupBlock": "transition metal", "yearDiscovered": 1802}, - {"atomic": 74, "symbol": "W", "name": "Tungsten", "mass": "183.84(1)", "color": "2194D6", "electronicConfiguration": "[Xe] 4f14 5d4 6s2", "gravity": 2.36, "atomicRadius": 146, "ionRadius": "66 (+4)", "vdwRadius": "", "ionizationEnergy": 770, "electronAffinity": -79, "oxidationStates": "-2, -1, 1, 2, 3, 4, 5, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 3695, "boilingPoint": 5828, "density": 19.25, "groupBlock": "transition metal", "yearDiscovered": 1783}, - {"atomic": 75, "symbol": "Re", "name": "Rhenium", "mass": "186.207(1)", "color": "267DAB", "electronicConfiguration": "[Xe] 4f14 5d5 6s2", "gravity": 1.9, "atomicRadius": 159, "ionRadius": "63 (+4)", "vdwRadius": "", "ionizationEnergy": 760, "electronAffinity": -15, "oxidationStates": "-3, -1, 1, 2, 3, 4, 5, 6, 7", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 3459, "boilingPoint": 5869, "density": 21.02, "groupBlock": "transition metal", "yearDiscovered": 1925}, - {"atomic": 76, "symbol": "Os", "name": "Osmium", "mass": "190.23(3)", "color": "266696", "electronicConfiguration": "[Xe] 4f14 5d6 6s2", "gravity": 2.2, "atomicRadius": 128, "ionRadius": "63 (+4)", "vdwRadius": "", "ionizationEnergy": 840, "electronAffinity": -106, "oxidationStates": "-2, -1, 1, 2, 3, 4, 5, 6, 7, 8", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 3306, "boilingPoint": 5285, "density": 22.61, "groupBlock": "transition metal", "yearDiscovered": 1803}, - {"atomic": 77, "symbol": "Ir", "name": "Iridium", "mass": "192.217(3)", "color": "175487", "electronicConfiguration": "[Xe] 4f14 5d7 6s2", "gravity": 2.2, "atomicRadius": 137, "ionRadius": "68 (+3)", "vdwRadius": "", "ionizationEnergy": 880, "electronAffinity": -151, "oxidationStates": "-3, -1, 1, 2, 3, 4, 5, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2739, "boilingPoint": 4701, "density": 22.65, "groupBlock": "transition metal", "yearDiscovered": 1803}, - {"atomic": 78, "symbol": "Pt", "name": "Platinum", "mass": "195.084(9)", "color": "D0D0E0", "electronicConfiguration": "[Xe] 4f14 5d9 6s1", "gravity": 2.28, "atomicRadius": 128, "ionRadius": "86 (+2)", "vdwRadius": 175, "ionizationEnergy": 870, "electronAffinity": -205, "oxidationStates": "2, 4, 5, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2041, "boilingPoint": 4098, "density": 21.09, "groupBlock": "transition metal", "yearDiscovered": "Ancient"}, - {"atomic": 79, "symbol": "Au", "name": "Gold", "mass": "196.966569(4)", "color": "FFD123", "electronicConfiguration": "[Xe] 4f14 5d10 6s1", "gravity": 2.54, "atomicRadius": 144, "ionRadius": "137 (+1)", "vdwRadius": 166, "ionizationEnergy": 890, "electronAffinity": -223, "oxidationStates": "-1, 1, 2, 3, 5", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1337, "boilingPoint": 3129, "density": 19.3, "groupBlock": "transition metal", "yearDiscovered": "Ancient"}, - {"atomic": 80, "symbol": "Hg", "name": "Mercury", "mass": "200.59(2)", "color": "B8B8D0", "electronicConfiguration": "[Xe] 4f14 5d10 6s2", "gravity": 2, "atomicRadius": 149, "ionRadius": "119 (+1)", "vdwRadius": 155, "ionizationEnergy": 1007, "electronAffinity": 0, "oxidationStates": "1, 2, 4", "standardState": "liquid", "bondingType": "metallic", "meltingPoint": 234, "boilingPoint": 630, "density": 13.534, "groupBlock": "transition metal", "yearDiscovered": "Ancient"}, - {"atomic": 81, "symbol": "Tl", "name": "Thallium", "mass": "204.3833(2)", "color": "A6544D", "electronicConfiguration": "[Xe] 4f14 5d10 6s2 6p1", "gravity": 2.04, "atomicRadius": 148, "ionRadius": "150 (+1)", "vdwRadius": 196, "ionizationEnergy": 589, "electronAffinity": -19, "oxidationStates": "1, 3", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 577, "boilingPoint": 1746, "density": 11.85, "groupBlock": "metal", "yearDiscovered": 1861}, - {"atomic": 82, "symbol": "Pb", "name": "Lead", "mass": "207.2(1)", "color": "575961", "electronicConfiguration": "[Xe] 4f14 5d10 6s2 6p2", "gravity": 2.33, "atomicRadius": 147, "ionRadius": "119 (+2)", "vdwRadius": 202, "ionizationEnergy": 716, "electronAffinity": -35, "oxidationStates": "-4, 2, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 601, "boilingPoint": 2022, "density": 11.34, "groupBlock": "metal", "yearDiscovered": "Ancient"}, - {"atomic": 83, "symbol": "Bi", "name": "Bismuth", "mass": "208.98040(1)", "color": "9E4FB5", "electronicConfiguration": "[Xe] 4f14 5d10 6s2 6p3", "gravity": 2.02, "atomicRadius": 146, "ionRadius": "103 (+3)", "vdwRadius": "", "ionizationEnergy": 703, "electronAffinity": -91, "oxidationStates": "-3, 3, 5", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 544, "boilingPoint": 1837, "density": 9.78, "groupBlock": "metal", "yearDiscovered": "Ancient"}, - {"atomic": 84, "symbol": "Po", "name": "Polonium", "mass": "209", "color": "AB5C00", "electronicConfiguration": "[Xe] 4f14 5d10 6s2 6p4", "gravity": 2, "atomicRadius": "", "ionRadius": "94 (+4)", "vdwRadius": "", "ionizationEnergy": 812, "electronAffinity": -183, "oxidationStates": "-2, 2, 4, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 527, "boilingPoint": 1235, "density": 9.196, "groupBlock": "metalloid", "yearDiscovered": 1898}, - {"atomic": 85, "symbol": "At", "name": "Astatine", "mass": "210", "color": "754F45", "electronicConfiguration": "[Xe] 4f14 5d10 6s2 6p5", "gravity": 2.2, "atomicRadius": "", "ionRadius": "62 (+7)", "vdwRadius": "", "ionizationEnergy": 920, "electronAffinity": -270, "oxidationStates": "-1, 1, 3, 5", "standardState": "solid", "bondingType": "covalent network", "meltingPoint": 575, "boilingPoint": "", "density": "", "groupBlock": "halogen", "yearDiscovered": 1940}, - {"atomic": 86, "symbol": "Rn", "name": "Radon", "mass": "222", "color": "428296", "electronicConfiguration": "[Xe] 4f14 5d10 6s2 6p6", "gravity": "", "atomicRadius": 145, "ionRadius": "", "vdwRadius": "", "ionizationEnergy": 1037, "electronAffinity": "", "oxidationStates": 2, "standardState": "gas", "bondingType": "atomic", "meltingPoint": 202, "boilingPoint": 211, "density": 0.00973, "groupBlock": "noble gas", "yearDiscovered": 1900}, - {"atomic": 87, "symbol": "Fr", "name": "Francium", "mass": "223", "color": "420066", "electronicConfiguration": "[Rn] 7s1", "gravity": 0.7, "atomicRadius": "", "ionRadius": "180 (+1)", "vdwRadius": "", "ionizationEnergy": 380, "electronAffinity": "", "oxidationStates": 1, "standardState": "solid", "bondingType": "metallic", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "alkali metal", "yearDiscovered": 1939}, - {"atomic": 88, "symbol": "Ra", "name": "Radium", "mass": "226", "color": "007D00", "electronicConfiguration": "[Rn] 7s2", "gravity": 0.9, "atomicRadius": "", "ionRadius": "148 (+2)", "vdwRadius": "", "ionizationEnergy": 509, "electronAffinity": "", "oxidationStates": 2, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 973, "boilingPoint": 2010, "density": 5, "groupBlock": "alkaline earth metal", "yearDiscovered": 1898}, - {"atomic": 89, "symbol": "Ac", "name": "Actinium", "mass": "227", "color": "70ABFA", "electronicConfiguration": "[Rn] 6d1 7s2", "gravity": 1.1, "atomicRadius": "", "ionRadius": "112 (+3)", "vdwRadius": "", "ionizationEnergy": 499, "electronAffinity": "", "oxidationStates": 3, "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1323, "boilingPoint": 3473, "density": 10.07, "groupBlock": "actinoid", "yearDiscovered": 1899}, - {"atomic": 90, "symbol": "Th", "name": "Thorium", "mass": "232.03806(2)", "color": "00BAFF", "electronicConfiguration": "[Rn] 6d2 7s2", "gravity": 1.3, "atomicRadius": "", "ionRadius": "94 (+4)", "vdwRadius": "", "ionizationEnergy": 587, "electronAffinity": "", "oxidationStates": "2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 2023, "boilingPoint": 5093, "density": 11.724, "groupBlock": "actinoid", "yearDiscovered": 1828}, - {"atomic": 91, "symbol": "Pa", "name": "Protactinium", "mass": "231.03588(2)", "color": "00A1FF", "electronicConfiguration": "[Rn] 5f2 6d1 7s2", "gravity": 1.5, "atomicRadius": "", "ionRadius": "104 (+3)", "vdwRadius": "", "ionizationEnergy": 568, "electronAffinity": "", "oxidationStates": "3, 4, 5", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1845, "boilingPoint": 4273, "density": 15.37, "groupBlock": "actinoid", "yearDiscovered": 1913}, - {"atomic": 92, "symbol": "U", "name": "Uranium", "mass": "238.02891(3)", "color": "008FFF", "electronicConfiguration": "[Rn] 5f3 6d1 7s2", "gravity": 1.38, "atomicRadius": "", "ionRadius": "102.5 (+3)", "vdwRadius": 186, "ionizationEnergy": 598, "electronAffinity": "", "oxidationStates": "3, 4, 5, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1408, "boilingPoint": 4200, "density": 19.05, "groupBlock": "actinoid", "yearDiscovered": 1789}, - {"atomic": 93, "symbol": "Np", "name": "Neptunium", "mass": "237", "color": "0080FF", "electronicConfiguration": "[Rn] 5f4 6d1 7s2", "gravity": 1.36, "atomicRadius": "", "ionRadius": "110 (+2)", "vdwRadius": "", "ionizationEnergy": 605, "electronAffinity": "", "oxidationStates": "3, 4, 5, 6, 7", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 917, "boilingPoint": 4273, "density": 20.45, "groupBlock": "actinoid", "yearDiscovered": 1940}, - {"atomic": 94, "symbol": "Pu", "name": "Plutonium", "mass": "244", "color": "006BFF", "electronicConfiguration": "[Rn] 5f6 7s2", "gravity": 1.28, "atomicRadius": "", "ionRadius": "100 (+3)", "vdwRadius": "", "ionizationEnergy": 585, "electronAffinity": "", "oxidationStates": "3, 4, 5, 6, 7", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 913, "boilingPoint": 3503, "density": 19.816, "groupBlock": "actinoid", "yearDiscovered": 1940}, - {"atomic": 95, "symbol": "Am", "name": "Americium", "mass": "243", "color": "545CF2", "electronicConfiguration": "[Rn] 5f7 7s2", "gravity": 1.3, "atomicRadius": "", "ionRadius": "126 (+2)", "vdwRadius": "", "ionizationEnergy": 578, "electronAffinity": "", "oxidationStates": "2, 3, 4, 5, 6", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1449, "boilingPoint": 2284, "density": "", "groupBlock": "actinoid", "yearDiscovered": 1944}, - {"atomic": 96, "symbol": "Cm", "name": "Curium", "mass": "247", "color": "785CE3", "electronicConfiguration": "[Rn] 5f7 6d1 7s2", "gravity": 1.3, "atomicRadius": "", "ionRadius": "97 (+3)", "vdwRadius": "", "ionizationEnergy": 581, "electronAffinity": "", "oxidationStates": "3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1618, "boilingPoint": 3383, "density": 13.51, "groupBlock": "actinoid", "yearDiscovered": 1944}, - {"atomic": 97, "symbol": "Bk", "name": "Berkelium", "mass": "247", "color": "8A4FE3", "electronicConfiguration": "[Rn] 5f9 7s2", "gravity": 1.3, "atomicRadius": "", "ionRadius": "96 (+3)", "vdwRadius": "", "ionizationEnergy": 601, "electronAffinity": "", "oxidationStates": "3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1323, "boilingPoint": "", "density": 14.78, "groupBlock": "actinoid", "yearDiscovered": 1949}, - {"atomic": 98, "symbol": "Cf", "name": "Californium", "mass": "251", "color": "A136D4", "electronicConfiguration": "[Rn] 5f10 7s2", "gravity": 1.3, "atomicRadius": "", "ionRadius": "95 (+3)", "vdwRadius": "", "ionizationEnergy": 608, "electronAffinity": "", "oxidationStates": "2, 3, 4", "standardState": "solid", "bondingType": "metallic", "meltingPoint": 1173, "boilingPoint": "", "density": 15.1, "groupBlock": "actinoid", "yearDiscovered": 1950}, - {"atomic": 99, "symbol": "Es", "name": "Einsteinium", "mass": "252", "color": "B31FD4", "electronicConfiguration": "[Rn] 5f11 7s2", "gravity": 1.3, "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": 619, "electronAffinity": "", "oxidationStates": "2, 3", "standardState": "solid", "bondingType": "", "meltingPoint": 1133, "boilingPoint": "", "density": "", "groupBlock": "actinoid", "yearDiscovered": 1952}, - {"atomic": 100, "symbol": "Fm", "name": "Fermium", "mass": "257", "color": "B31FBA", "electronicConfiguration": "[Rn] 5f12 7s2", "gravity": 1.3, "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": 627, "electronAffinity": "", "oxidationStates": "2, 3", "standardState": "", "bondingType": "", "meltingPoint": 1800, "boilingPoint": "", "density": "", "groupBlock": "actinoid", "yearDiscovered": 1952}, - {"atomic": 101, "symbol": "Md", "name": "Mendelevium", "mass": "258", "color": "B30DA6", "electronicConfiguration": "[Rn] 5f13 7s2", "gravity": 1.3, "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": 635, "electronAffinity": "", "oxidationStates": "2, 3", "standardState": "", "bondingType": "", "meltingPoint": 1100, "boilingPoint": "", "density": "", "groupBlock": "actinoid", "yearDiscovered": 1955}, - {"atomic": 102, "symbol": "No", "name": "Nobelium", "mass": "259", "color": "BD0D87", "electronicConfiguration": "[Rn] 5f14 7s2", "gravity": 1.3, "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": 642, "electronAffinity": "", "oxidationStates": "2, 3", "standardState": "", "bondingType": "", "meltingPoint": 1100, "boilingPoint": "", "density": "", "groupBlock": "actinoid", "yearDiscovered": 1957}, - {"atomic": 103, "symbol": "Lr", "name": "Lawrencium", "mass": "262", "color": "C70066", "electronicConfiguration": "[Rn] 5f14 7s2 7p1", "gravity": 1.3, "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": 3, "standardState": "", "bondingType": "", "meltingPoint": 1900, "boilingPoint": "", "density": "", "groupBlock": "transition metal", "yearDiscovered": 1961}, - {"atomic": 104, "symbol": "Rf", "name": "Rutherfordium", "mass": "267", "color": "CC0059", "electronicConfiguration": "[Rn] 5f14 6d2 7s2", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": 4, "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "transition metal", "yearDiscovered": 1969}, - {"atomic": 105, "symbol": "Db", "name": "Dubnium", "mass": "268", "color": "D1004F", "electronicConfiguration": "[Rn] 5f14 6d3 7s2", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "transition metal", "yearDiscovered": 1967}, - {"atomic": 106, "symbol": "Sg", "name": "Seaborgium", "mass": "271", "color": "D90045", "electronicConfiguration": "[Rn] 5f14 6d4 7s2", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "transition metal", "yearDiscovered": 1974}, - {"atomic": 107, "symbol": "Bh", "name": "Bohrium", "mass": "272", "color": "E00038", "electronicConfiguration": "[Rn] 5f14 6d5 7s2", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "transition metal", "yearDiscovered": 1976}, - {"atomic": 108, "symbol": "Hs", "name": "Hassium", "mass": "270", "color": "E6002E", "electronicConfiguration": "[Rn] 5f14 6d6 7s2", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "transition metal", "yearDiscovered": 1984}, - {"atomic": 109, "symbol": "Mt", "name": "Meitnerium", "mass": "276", "color": "EB0026", "electronicConfiguration": "[Rn] 5f14 6d7 7s2", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "transition metal", "yearDiscovered": 1982}, - {"atomic": 110, "symbol": "Ds", "name": "Darmstadtium", "mass": "281", "color": "", "electronicConfiguration": "[Rn] 5f14 6d9 7s1", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "transition metal", "yearDiscovered": 1994}, - {"atomic": 111, "symbol": "Rg", "name": "Roentgenium", "mass": "280", "color": "", "electronicConfiguration": "[Rn] 5f14 6d10 7s1", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "transition metal", "yearDiscovered": 1994}, - {"atomic": 112, "symbol": "Cn", "name": "Copernicium", "mass": "285", "color": "", "electronicConfiguration": "[Rn] 5f14 6d10 7s2", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "transition metal", "yearDiscovered": 1996}, - {"atomic": 113, "symbol": "Nh", "name": "Nihonium", "mass": "284", "color": "", "electronicConfiguration": "[Rn] 5f14 6d10 7s2 7p1", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "post-transition metal", "yearDiscovered": 2003}, - {"atomic": 114, "symbol": "Fl", "name": "Flerovium", "mass": "289", "color": "", "electronicConfiguration": "[Rn] 5f14 6d10 7s2 7p2", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "post-transition metal", "yearDiscovered": 1998}, - {"atomic": 115, "symbol": "Mc", "name": "Moscovium", "mass": "288", "color": "", "electronicConfiguration": "[Rn] 5f14 6d10 7s2 7p3", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "post-transition metal", "yearDiscovered": 2003}, - {"atomic": 116, "symbol": "Lv", "name": "Livermorium", "mass": "293", "color": "", "electronicConfiguration": "[Rn] 5f14 6d10 7s2 7p4", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "post-transition metal", "yearDiscovered": 2000}, - {"atomic": 117, "symbol": "Ts", "name": "Tennessine", "mass": "294", "color": "", "electronicConfiguration": "[Rn] 5f14 6d10 7s2 7p5", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "post-transition metal", "yearDiscovered": 2010}, - {"atomic": 118, "symbol": "Og", "name": "Oganesson", "mass": "294", "color": "", "electronicConfiguration": "[Rn] 5f14 6d10 7s2 7p6", "gravity": "", "atomicRadius": "", "ionRadius": "", "vdwRadius": "", "ionizationEnergy": "", "electronAffinity": "", "oxidationStates": "", "standardState": "", "bondingType": "", "meltingPoint": "", "boilingPoint": "", "density": "", "groupBlock": "noble gas", "yearDiscovered": 2002} - ]; - } - -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-sparkline-table.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-sparkline-table.md deleted file mode 100644 index 3fd03fe11..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid-type-sparkline-table.md +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: Web Components Data Grid | Column Sparkline | Infragistics -_description: See how Ignite UI for Web Components Data Table & Grid supports a template column which provides you a way to embed other components such as the column sparkline. -_keywords: Web Components Table, Data Grid, column sparkline, Ignite UI for Web Components, data binding, Infragistics -mentionedTypes: ["Grid", "CellInfo", "TemplateCellInfo", "Sparkline"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: grids/data-grid -_tocName: Column Sparkline -_premium: true ---- - -> [!Note] -> Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - -# Web Components Column Sparkline - -The Ignite UI for Web Components Data Table / Data Grid supports a Template Column which provides you to a way to embed other components such as Ignite UI for Web Components sparkline component. Refer to the [Column Types](column-types.md) topic for other types of columns supported in the [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) component. - -## Web Components Column Sparkline Example - -```typescript -export class Products { - - public static names: string[] = [ - "Intel CPU", "AMD CPU", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - - public static countries: string[] = ["United-States", "United-Kingdom", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain" ]; - - public static status: string[] = [ "Packing", "Shipped", "Delivered"] - - public static getData(count?: number): any[] { - if (count === undefined) { - count = 20; - } - const items: any[] = []; - for (let i = 0; i < count; i++) { - const id = this.pad(count - i, count.toString().length); - const price = this.getRandomNumber(10000, 90000) / 100; - const orderCount = this.getRandomNumber(4, 30); - const orderValue = Math.round(price * orderCount); - const orderShipped = this.getRandomNumber(30, 100); - const margin = this.getRandomNumber(5, 10); - const profit = Math.round(orderValue * (margin / 100)); - const country = this.getRandomItem(this.countries); - - // sales per month for sparkline chart - const sales: any[] = []; - for (let m = 0; m < 12; m++) { - const sale = this.getRandomNumber(20, 90); - sales.push({Value: sale, Month: m}); - } - items.push({ - CountryFlag: this.getCountryFlag(country), - CountryName: country, - Margin: margin, - // data source for embedded sparklines - OrderCount: orderCount, - OrderHistory: this.getOrderHistory(26), - OrderShipped: orderShipped, - OrderValue: orderValue, - OrderDate: this.getRandomDate(), - ProductID: id, - ProductName: this.getRandomItem(this.names), - ProductPrice: price, - Profit: profit, - ReturnRate: this.getReturnRate(52), - Status: this.getRandomItem(this.status), - }); - } - // console.log("Products:" + items.length) - return items; - } - - public static getOrderHistory(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const sales: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(0, 100); - sales.push({Sold: value, Week: w}); - } - return sales; - } - - public static getReturnRate(weekCount?: number): any[] { - if (weekCount === undefined) { - weekCount = 52; - } - const rates: any[] = []; - for (let w = 0; w < weekCount; w++) { - const value = this.getRandomNumber(-100, 100); - rates.push({Balance: value, Week: w}); - } - return rates; - } - - public static getCountryFlag(country: string): string { - const flag = 'https://dl.infragistics.com/x/img/flags/' + country + '.png' - return flag; - } - - public static getRandomDate(): Date { - const today: Date = new Date(); - const year: number = today.getFullYear(); - const month: number = this.getRandomNumber(0, 8); - const day: number = this.getRandomNumber(10, 27); - return new Date(year, month, day); - } - - public static getRandomNumber(min: number, max: number): number { - return Math.round(min + Math.random() * (max - min)); - } - - public static getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; - } - - public static pad(num: number, size: number, char?: string): string { - if (char === undefined) char = "0"; - let s = num + ""; - // if (s.length) - while (s.length < size) s = char + s; - return s; - } -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## Code Snippet - -The following code example shows how to embed [`IgcSparklineComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcsparklinecomponent.html) component in [`IgcTemplateColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igctemplatecolumn.html) of the [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) component : - -```html - - - - - -``` - -```ts -import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellInfo } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids'; -import { IgcSparklineModule } from 'igniteui-webcomponents-charts'; -import { IgcSparklineComponent } from 'igniteui-webcomponents-charts'; - -// registering Grid and Sparkline chart's modules: -ModuleManager.register(IgcDataGridModule); -ModuleManager.register(IgcSparklineModule); - -constructor() { -this.grid = document.getElementById("grid") as IgcDataGridComponent; -this.grid.dataSource = Products.getData(); - -this.onUpdatingHistoryColumn = this.onUpdatingHistoryColumn.bind(this); - -const historyColumn = document.getElementById("historyColumn") as IgcTemplateColumnComponent; -historyColumn.cellUpdating = this.onUpdatingHistoryColumn; -} - -public onUpdatingHistoryColumn(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) { - const content = e.content as HTMLDivElement; - let chart: IgcSparklineComponent | null = null; - let info = e.cellInfo as IgcTemplateCellInfo; - - if (content.childElementCount === 0) { - chart = new IgcSparklineComponent(); - chart.valueMemberPath = "Sold"; - chart.labelMemberPath = "Week"; - chart.displayType = SparklineDisplayType.Line; - chart.lineThickness = 2; - chart.brush = "rgb(21, 190, 6)"; - chart.negativeBrush = "rgb(211, 17, 3)"; - chart.width = "100%"; - chart.height = "100%"; - - content.style.width = "calc(100% - 10px)"; - content.style.height = "calc(100% - 10px)"; - content.style.padding = "5px"; - content.style.margin = "0px"; - content.style.display = "inline-grid"; - content.appendChild(chart); - } - else { - chart = content.children[0] as IgcSparklineComponent; - } - - if (chart) { - chart.dataSource = info.rowItem.OrderHistory; - } -} -``` - -## API References - -- [`IgcDataGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcdatagridcomponent.html) -- [`IgcSparklineComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcsparklinecomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid.md index f72e16877..399d452f3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-grid.md @@ -72,7 +72,6 @@ In this Ignite UI for Web Components Grid example, you can see how users can do } ``` -
## Getting Started with Web Components Data Grid @@ -122,7 +121,7 @@ constructor() { The [`id`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#id) property is a string value and is the unique identifier of the grid which will be auto-generated if not provided, while `data` binds the grid, in this case to local data. -The [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#autoGenerate) property tells the grid to auto generate the grid's [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) components based on the data source fields. It will also try to deduce the appropriate data type for the column if possible. Otherwise, the developer needs to explicitly define the columns and the mapping to the data source fields. +The [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#autoGenerate) property tells the grid to auto generate the grid's [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) components based on the data source fields. It will also try to deduce the appropriate data type for the column if possible. Otherwise, the developer needs to explicitly define the columns and the mapping to the data source fields. ## Editable Web Components Grid @@ -136,7 +135,7 @@ Following this topic you will learn more about [cell template](data-grid.md#cell ### Defining Columns -Let's turn the [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#autoGenerate) property off and define the columns collection in the markup: +Let's turn the [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#autoGenerate) property off and define the columns collection in the markup: ```html @@ -332,9 +331,9 @@ The code above will make the **ProductName** column sortable and editable and wi There are optional parameters for formatting: -- [`format`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcfieldpipeargs.html#format) - determines what date/time parts are displayed, defaults to `'mediumDate'`, equivalent to **'MMM d, y'** -- [`timezone`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcfieldpipeargs.html#timezone) - the timezone offset for dates. By default uses the end-user's local system timezone -- [`digitsInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcfieldpipeargs.html#digitsInfo) - decimal representation objects. Default to **1.0-3** +- [`format`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumnpipeargs.html#format) - determines what date/time parts are displayed, defaults to `'mediumDate'`, equivalent to **'MMM d, y'** +- [`timezone`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumnpipeargs.html#timezone) - the timezone offset for dates. By default uses the end-user's local system timezone +- [`digitsInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumnpipeargs.html#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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) input is exposed. A column will respect only the corresponding properties for its data type, if [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) is set. Example: @@ -362,7 +361,7 @@ constructor() { } ``` -The `OrderDate` column will respect only the [`format`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcfieldpipeargs.html#format) and [`timezone`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcfieldpipeargs.html#timezone) properties, while the `UnitPrice` will only respect the [`digitsInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcfieldpipeargs.html#digitsInfo). +The `OrderDate` column will respect only the [`format`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumnpipeargs.html#format) and [`timezone`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumnpipeargs.html#timezone) properties, while the `UnitPrice` will only respect the [`digitsInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumnpipeargs.html#digitsInfo). All available column data types could be found in the official [Column types topic](grid/column-types.md#default-template). @@ -398,7 +397,7 @@ const POJO = [{ > **WARNING**: > **The key values must not contain arrays**. -> If you use [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#autoGenerate) columns **the data keys must be identical.** +> If you use [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#autoGenerate) columns **the data keys must be identical.** ## Grid Data Binding @@ -424,7 +423,7 @@ public onDataLoaded(jsonData: any[]) { } ``` -**Note**: The grid [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#autoGenerate) available, when binding to remote service, is on our roadmap for future versions. +**Note**: The grid [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#autoGenerate) available, when binding to remote service, is on our roadmap for future versions. ## Complex Data Binding @@ -460,9 +459,6 @@ For example, in order to display the weights of a given amino acid in the grid t An alternative way to bind complex data, or to visualize composite data (from more than one column) in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) is to use a custom body template for the column. Generally, one can: - use the `value` of the cell, that contains the nested data - - - - use the `cell` object in the template, from which to access the `ctx.cell.id.rowIndex` or `ctx.cell.id.rowID` to get the row via the grid's API and retrieve any value from it and interpolate those in the template. ```html @@ -631,10 +627,9 @@ export class EmployeesNestedData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Working with Flat Data Overview -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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#data) property of the [`IgcGridRowComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrowcomponent.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#data) property of the [`IgcGridRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrow.html). Since the Web Components 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` property provides you this opportunity. @@ -785,7 +780,6 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Keyboard Navigation Keyboard navigation of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) provides a rich variety of keyboard interactions for the user. It enhances accessibility and allows intuitive navigation through any type of elements inside (cell, row, column header, toolbar, footer, etc.). @@ -833,9 +827,9 @@ Then set the `--header-background` and `--header-text-color` CSS properties for - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) - `Cell` - [`IgcCellTemplateContext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccelltemplatecontext.html) -- [`IgcGridRowComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrowcomponent.html) -- [`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) -- [`IgcPaginatorComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginatorcomponent.html) +- [`IgcGridRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrow.html) +- [`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) +- [`IgcPaginator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginator.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-pie-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-pie-chart.md index d1bbc7663..0fa081974 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-pie-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/data-pie-chart.md @@ -49,7 +49,6 @@ export class EnergyGlobalDemand extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Data Pie Chart Recommendations @@ -89,9 +88,9 @@ Legends are used to show information about each point, to know about its contrib In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`IgcLegendComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igclegendcomponent.html) property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its [`orientation`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igclegendcomponent.html#orientation) property. -The labels shown on the legend will display the same content as the label that is shown for each slice in the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) by default, but this can be modified by utilizing the [`legendSliceLabelContentMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#legendSliceLabelContentMode) property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart. +The labels shown on the legend will display the same content as the label that is shown for each slice in the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) by default, but this can be modified by utilizing the [`legendSliceLabelContentMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#legendSliceLabelContentMode) property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart. -You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the [`legendItemBadgeShape`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#legendItemBadgeShape) property on the chart, and you can set this to be a circle, line, bar, column, and more. +You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the [`legendItemBadgeShape`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#legendItemBadgeShape) property on the chart, and you can set this to be a circle, line, bar, column, and more. Below is an example that demonstrates usage of the ItemLegend with the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html). @@ -127,20 +126,19 @@ export class EnergyGlobalDemand extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Pie Chart Others Category Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice. -The Others category in the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) has three main, configurable properties - [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryType), [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryThreshold), and [`othersCategoryText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryText) that allow you to configure how the Others slice in the chart is shown. These are each described below: +The Others category in the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) has three main, configurable properties - [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryType), [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryThreshold), and [`othersCategoryText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryText) that allow you to configure how the Others slice in the chart is shown. These are each described below: -The [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryType) property works in tandem with the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryThreshold) property of the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html). For the [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryType), you can define whether you want the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryThreshold) to be evaluated as a number or a percentage. For example, if you decide on number and set the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryThreshold) to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) will become part of the Others category. +The [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryType) property works in tandem with the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryThreshold) property of the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html). For the [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryType), you can define whether you want the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryThreshold) to be evaluated as a number or a percentage. For example, if you decide on number and set the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryThreshold) to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) will become part of the Others category. -To get the underlying data items that are contained within the Others slice in the chart, you can utilize the [`getOthersContext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#getOthersContext) method on the chart. This return type of this method is an [`IgcOthersCategoryContextComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcotherscategorycontextcomponent.html) which exposes an [`items`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcotherscategorycontextcomponent.html#items) property. The [`items`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcotherscategorycontextcomponent.html#items) property returns an array that will contain the items in the Others slice. Additionally, when clicking the Others slice, the `Item` property of the event arguments for the `SeriesClick` event will be will also return this [`IgcOthersCategoryContextComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcotherscategorycontextcomponent.html). +To get the underlying data items that are contained within the Others slice in the chart, you can utilize the [`getOthersContext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#getOthersContext) method on the chart. This return type of this method is an [`IgcOthersCategoryContextComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcotherscategorycontextcomponent.html) which exposes an [`items`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcotherscategorycontextcomponent.html#items) property. The [`items`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcotherscategorycontextcomponent.html#items) property returns an array that will contain the items in the Others slice. Additionally, when clicking the Others slice, the `Item` property of the event arguments for the `SeriesClick` event will be will also return this [`IgcOthersCategoryContextComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcotherscategorycontextcomponent.html). -By default, the Others slice will be represented by a label of "Others." You can change this by modifying the [`othersCategoryText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryText) property of the chart. +By default, the Others slice will be represented by a label of "Others." You can change this by modifying the [`othersCategoryText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryText) property of the chart. ### Web Components Styling the Others Slice @@ -155,9 +153,9 @@ You can style the aggregated Others slice separately from other slices by using These properties only affect the Others slice (when it exists). All other slices continue to use the normal palette and item-wise coloring behavior. > [!NOTE] -> The Others slice is only rendered when the chart is configured to create it (for example, with [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryThreshold) greater than `0` and an appropriate [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryType)). If the Others slice is not present, `OthersCategoryBrush` and `OthersCategoryOutline` have no visible effect. +> The Others slice is only rendered when the chart is configured to create it (for example, with [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryThreshold) greater than `0` and an appropriate [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryType)). If the Others slice is not present, `OthersCategoryBrush` and `OthersCategoryOutline` have no visible effect. -If you want to ensure that the Others category does not show up in the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html), you can set the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryThreshold) to 0. +If you want to ensure that the Others category does not show up in the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html), you can set the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryThreshold) to 0. The following sample demonstrates usage of the Others slice in the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html): @@ -192,16 +190,15 @@ export class DataPieData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Data Pie Chart Selection -The [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#selectionBehavior) and [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#selectionMode) properties of the chart, described below: +The [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#selectionBehavior) and [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#selectionMode) properties of the chart, described below: -The main two options of the [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#selectionBehavior) are [`PerDataItemSingleSelect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.seriesselectionbehavior.html#PerDataItemSingleSelect) and [`PerDataItemMultiSelect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.seriesselectionbehavior.html#PerDataItemMultiSelect), which will enable single and multiple selection, respectively. +The main two options of the [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#selectionBehavior) are [`PerDataItemSingleSelect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.seriesselectionbehavior.html#PerDataItemSingleSelect) and [`PerDataItemMultiSelect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.seriesselectionbehavior.html#PerDataItemMultiSelect), which will enable single and multiple selection, respectively. -The [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#selectionMode) property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do: +The [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#selectionMode) property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do: - [`Brighten`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.seriesselectionmode.html#Brighten): The selected slices will be highlighted. - [`FadeOthers`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.seriesselectionmode.html#FadeOthers): The selected slices will remain their same color and others will fade. @@ -251,21 +248,20 @@ export class EnergyGlobalDemand extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Data Pie Chart Highlighting The [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) supports mouse over highlighting, as well as a highlighting overlay that can be configured by providing a separate data source. -First, the [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingBehavior) enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do: +First, the [`highlightingBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#highlightingBehavior) enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do: - [`DirectlyOver`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.serieshighlightingbehavior.html#DirectlyOver): The slices are only highlighted when the mouse is directly over them. - [`NearestItems`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.serieshighlightingbehavior.html#NearestItems): The nearest slice to the mouse position will be highlighted. - [`NearestItemsAndSeries`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.serieshighlightingbehavior.html#NearestItemsAndSeries): The nearest slice and series to the mouse position will be highlighted. - [`NearestItemsRetainMainShapes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.serieshighlightingbehavior.html#NearestItemsRetainMainShapes): The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized. -The [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightingMode) enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do: +The [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#highlightingMode) enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do: - [`Brighten`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/enums/igniteui_webcomponents_charts.seriesselectionmode.html#Brighten): The series will have its color brightened when the mouse position is over or near it. - `BrightenSpecific`: The specific slice will have its color brightened when the mouse position is over or near it. @@ -307,8 +303,7 @@ export class EnergyGlobalDemand extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - -In addition to the mouse highlighting, the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a `HighlightedDataSource` for the control and by setting the [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#highlightedValuesDisplayMode) property to `Overlay`. The `HighlightedDataSource` expects a subset of the data assigned to the `DataSource` property of the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html). +In addition to the mouse highlighting, the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html) exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a `HighlightedDataSource` for the control and by setting the [`highlightedValuesDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#highlightedValuesDisplayMode) property to `Overlay`. The `HighlightedDataSource` expects a subset of the data assigned to the `DataSource` property of the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html). When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control. @@ -371,7 +366,6 @@ export class OnlineTrafficHighlightTotals extends Array ## Web Components Data Pie Chart Animation @@ -380,7 +374,7 @@ The [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui You can set the [`isTransitionInEnabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#isTransitionInEnabled) property to **true** to have the pie chart animate into view. The type of animation performed can be configured by setting the [`transitionInMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#transitionInMode) enumerated property to the type of animation you would like to see. Additionally, you can also set the [`transitionInSpeedType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#transitionInSpeedType) property to scale with index, value, normal, or randomized. The duration of this animation can be controlled by the [`transitionInDuration`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#transitionInDuration) property, which takes a `TimeSpan`. -If you would like to animate data changes, this can also be done by setting the [`animateSeriesWhenAxisRangeChanges`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#animateSeriesWhenAxisRangeChanges) property to **true**. The duration of this change can be configured by setting the [`transitionDuration`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#transitionDuration) property as well. +If you would like to animate data changes, this can also be done by setting the [`animateSeriesWhenAxisRangeChanges`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#animateSeriesWhenAxisRangeChanges) property to **true**. The duration of this change can be configured by setting the [`transitionDuration`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#transitionDuration) property as well. The following sample demonstrates the usage of animation in the [`IgcDataPieChartComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html): @@ -416,7 +410,6 @@ export class EnergyGlobalDemand extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources @@ -430,10 +423,10 @@ export class EnergyGlobalDemand extends Array { The following table lists API members mentioned in the above sections: - [`chartType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#chartType) -- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryThreshold) -- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiebasechartcomponent.html#othersCategoryType) -- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#selectionMode) -- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdomainchartcomponent.html#selectionBehavior) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#selectionMode) +- [`selectionBehavior`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcdatapiechartcomponent.html#selectionBehavior) |Chart Type | Control Name | API Members | |-----------------|----------------|------------ | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-picker.md index da205e6e2..e6d6187dc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-picker.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-picker.md @@ -25,7 +25,6 @@ Below you can see a sample that demonstrates how the Date Picker works when user /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Getting Started with Web Components Date Picker First, you need to install the Ignite UI for Web Components by running the following command: @@ -140,7 +139,6 @@ The [`IgcDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-w /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Display and input format [`inputFormat`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html#inputFormat) and [`displayFormat`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.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-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html#inputFormat) is locale based, so if none is provided, the picker will default to the one used by the browser. @@ -156,7 +154,6 @@ More information about these can be found in the [`IgcDateTimeInputComponent`](h /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Increment and decrement The [`IgcDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html) exposes [`stepUp`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html#stepUp) and [`stepDown`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html#stepDown) methods. Both of which come from the [`IgcDateTimeInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatetimeinputcomponent.html) and can be used for incrementing and decrementing a specific `DatePart` of the currently set date. @@ -179,7 +176,6 @@ In forms, we can handle the `igcChange` event of the component and update the va /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Calendar Specific settings The [`IgcDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html) can modify some of the calendar's settings via the properties that the Date Picker exposes. Some of these include [`visibleMonths`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html#visibleMonths) which allows more than one calendar to be displayed when the picker expands, [`weekStart`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html#weekStart) which determines the starting day of the week, [`showWeekNumbers`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html#showWeekNumbers) which shows the number for each week in the year and more. @@ -267,7 +263,6 @@ igc-date-picker::part(year-inner selected) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-range-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-range-picker.md index 6694d59a4..435f03673 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-range-picker.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-range-picker.md @@ -20,7 +20,6 @@ Below is a sample demonstrating the [`IgcDateRangePickerComponent`](https://www. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Getting Started To start using the [`IgcDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdaterangepickercomponent.html), you first need to install the Ignite UI for Web Components by running the following command: @@ -44,9 +43,7 @@ For a complete introduction to the Ignite UI for Web Components, read the [**Get ## Usage -The [`IgcDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdaterangepickercomponent.html) allows users to select a start and end date either by choosing a date range from a dropdown/calendar pop-up or by typing directly into the input fields - one for the start date and one for the 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. +The [`IgcDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdaterangepickercomponent.html) allows users to select a start and end date either by choosing a date range from a dropdown/calendar pop-up or by typing directly into the input fields - one for the start date and one for the end date. The picker offers two modes for displaying date values: single input and two inputs. Both provide editing and masking capabilities. When the calendar is visible, a date range can be selected by choosing both a start and end date. Selecting a date will set both the start and end date, and once a second date is chosen, it will set the end date. If a range is already selected, clicking any other date on the calendar will start a new range selection. @@ -113,10 +110,6 @@ By default, when clicked, the [`IgcDateRangePickerComponent`](https://www.infrag The [`IgcDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdaterangepickercomponent.html) features intuitive keyboard navigation, allowing users to easily increment, decrement, or jump between different component parts, all without needing to use a mouse. -The available keyboard navigation options vary depending on whether the component is in single input or two inputs mode. - -**Two Inputs Mode:** - |Keys|Description| |----|-----------| | ← | Moves the caret one character to the left | @@ -128,11 +121,6 @@ The available keyboard navigation options vary depending on whether the componen | HOME | Moves the caret to the beginning of the input mask | | END | Moves the caret to the end of the input mask | | CTRL + ; | Sets the current date as the value of the component | - -**Both Single and Two Inputs Modes:** - -|Keys|Description| -|----|-----------| | ALT + ↓ | Opens the calendar dropdown | | ALT + ↑ | Closes the calendar dropdown | @@ -258,7 +246,6 @@ Now, when you click the newly created **"Next 7 days"** chip in the calendar pop /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Disabled & 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-web-components/docs/typescript/latest/classes/igcdaterangepickercomponent.html#disabledDates) property. @@ -294,7 +281,6 @@ igc-button { } ``` - ## Additional configuration ### Properties @@ -385,7 +371,6 @@ h3:nth-of-type(1) { } ``` - ### Methods In addition to the properties and slots, the [`IgcDateRangePickerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdaterangepickercomponent.html) also exposes few methods that you can use: @@ -475,7 +460,6 @@ igc-date-range-picker::part(clear-icon-end) { } ``` - ## API References - [`IgcInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-time-input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-time-input.md index 5c7da6f1e..32ac73eb0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-time-input.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/date-time-input.md @@ -16,7 +16,6 @@ The Ignite UI for Web Components Date Time Input allows the user to set and edit /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage First, you need to install the Ignite UI for Web Components by running the following command: @@ -120,7 +119,6 @@ If all went well, you should see the following in your browser: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Display format The date time input exposes predefined formats for displaying date/time in various manners. All of the examples below are given in en-US locale. @@ -193,7 +191,6 @@ If all went well, the component will be `invalid` if the value is greater or low /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Step up/down The [`IgcDateTimeInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatetimeinputcomponent.html) exposes public [`stepUp`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatetimeinputcomponent.html#stepUp) and [`stepDown`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatetimeinputcomponent.html#stepDown) methods. They increment or decrement a specific `DatePart` of the currently set date and time and can be used in a couple of ways. @@ -221,7 +218,6 @@ Try it in the example below: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcDateTimeInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatetimeinputcomponent.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -279,7 +275,6 @@ igc-date-time-input { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dialog.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dialog.md index 6bf23bb6d..e75e20259 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dialog.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dialog.md @@ -20,7 +20,6 @@ This sample demonstrates how to create a Dialog component in Web Components. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Usage @@ -68,7 +67,6 @@ Use the [`closeOnOutsideClick`](https://www.infragistics.com/products/ignite-ui- /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Form Form elements can close a Dialog if they have the attribute `method="dialog"`. Submitting the form will trigger the closing of the dialog. @@ -78,7 +76,6 @@ Form elements can close a Dialog if they have the attribute `method="dialog"`. S /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcDialogComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdialogcomponent.html) component exposes several CSS parts to give you full control over its style: @@ -120,7 +117,6 @@ igc-dialog::part(footer) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/divider.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/divider.md index 8098e314a..2be6eadce 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/divider.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/divider.md @@ -18,7 +18,6 @@ The Ignite UI for Web Components Divider allows the content author to easily cre /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Dependencies @@ -70,7 +69,6 @@ p{ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Type The [`type`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdividercomponent.html#type) attribute determines whether to render a `solid` or a `dashed` divider line. The default value is `solid`. @@ -84,7 +82,6 @@ The [`type`](https://www.infragistics.com/products/ignite-ui-web-components/docs /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Inset Divider The [`IgcDividerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdividercomponent.html) can be set in on both sides. To `inset` the divider, set the [`middle`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdividercomponent.html#middle) attribute to true in combination with the `--inset` css variable. This will shrink the divider line from both sides. The default value of the [`middle`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdividercomponent.html#middle) attribute is false. @@ -139,7 +136,6 @@ p { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Using Divider Inside Select Component The following sample illustrates how the [`IgcDividerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdividercomponent.html) can be integrated within the [`IgcSelectComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcselectcomponent.html) in order to distinguish two groups of items. @@ -158,7 +154,6 @@ The following sample illustrates how the [`IgcDividerComponent`](https://www.inf /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## CSS Variables ### Inset diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager-customization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager-customization.md index 0e8eba2af..fd441dcf4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager-customization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager-customization.md @@ -52,7 +52,6 @@ igc-dockmanager > div { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Focus Panes Programmatically The `focusPane` method allows developers to dynamically and programmatically focus a specific pane within the layout by providing the `contentId` of the desired pane. @@ -88,7 +87,6 @@ igc-dockmanager > div { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Auto-hide Pane Headers With the `showPaneHeaders` property of the DockManager, developers now have the flexibility to control the visibility of pane headers within the `layout`. By default, `showPaneHeaders` is set to `always` ensuring that pane headers are always visible. When set to `onHoverOnly`, all pane headers will be hidden until you hover your mouse over the top edge of a content pane. The corresponding pane header will appear and it will smoothly hide once your mouse moves away. Take a look at the example below: @@ -108,7 +106,6 @@ igc-dockmanager > div { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Control Inner Docking By default, the Dock Manager allows users to effortlessly drag and dock panes inside each other, creating tabs. To provide more control over this functionality, we've introduced two properties - `allowInnerDock` and `acceptsInnerDock`. @@ -145,7 +142,6 @@ igc-dockmanager > div { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Control Pane Dragging With the `containedInBoundaries` property, developers can control whether the sides of floating panes are always contained within the DockManager. When set to **true**, pane dragging will stop once any of the sides attempt to move beyond the DockManager boundaries. @@ -167,7 +163,6 @@ igc-dockmanager > div { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Highlight Resizing Panes When users resize panes by dragging a splitter, it is not always obvious which panes are affected, especially in more complex layouts. To make this interaction clearer, the Dock Manager can draw a border around the panes that are currently being resized. This visual cue helps users immediately understand which parts of the layout will grow or shrink as they move the splitter. @@ -261,7 +256,6 @@ igc-dockmanager > div { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcDockManagerComponent`](https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest/classes/igcdockmanagercomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager-embedding-frames.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager-embedding-frames.md index 977356eb4..29037534d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager-embedding-frames.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/dock-manager-embedding-frames.md @@ -60,7 +60,6 @@ The Infragistics Web Components Dock Manager component provides you with the lay /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - + # Getting Started With Ignite UI for Web Components [`Ignite UI for Web Components`](https://github.com/IgniteUI/igniteui-webcomponents) is a complete set of UI widgets, components, and Figma UI kits for Web Components by Infragistics. It enables developers to build modern, high-performance HTML5 and JavaScript apps for desktop browsers, mobile experiences, and progressive web apps (PWAs). Ignite UI for Web Components comprises several packages available under either an MIT or a commercial license, depending on the components and services they contain. For a detailed list of components and their license, please refer to the [License FAQ and Installation](./general-licensing.md) and [Open Source vs Premium](./general-open-source-vs-premium.md) topics. -## Install Ignite UI CLI +## Using Ignite UI CLI To create an application from scratch and configure it to use the Ignite UI Web Components you can use the Ignite UI CLI. The first step is to install the respective package globally as follows: @@ -28,7 +30,14 @@ ig ``` Then choose Web Components as framework, select `Base` project template, add a specific component/view or select `Complete & Run`. -Additionally, you can read more about the Ignite UI CLI in this [topic](general-cli-overview.md). + +Or create a project directly in one command, for example: + +```cmd +ig new --framework=webcomponents --type=igc-ts --template=side-nav +``` + +For a step-by-step walkthrough of the wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands and options, see the [CLI Overview](general-cli-overview.md). ## Install Polyfills @@ -40,7 +49,7 @@ npm install @webcomponents/custom-elements Then import the web component polyfills into index.js: -```ts +```typescript import '@webcomponents/custom-elements/custom-elements.min'; import '@webcomponents/custom-elements/src/native-shim.js'; ``` @@ -55,7 +64,7 @@ npm install igniteui-webcomponents Next you will need to import the components that you want to use in your `index.ts` file. You could import one or more components using the `defineComponents` function like this: -```ts +```typescript import { defineComponents, IgcAvatarComponent, IgcBadgeComponent } from 'igniteui-webcomponents'; defineComponents(IgcAvatarComponent, IgcBadgeComponent); @@ -63,18 +72,18 @@ defineComponents(IgcAvatarComponent, IgcBadgeComponent); You could also import all of the components using the `defineAllComponents` function: -```ts +```typescript import { defineAllComponents } from 'igniteui-webcomponents'; defineAllComponents(); ``` -> [!Note] +> [!NOTE] > Importing all of the components will increase the bundle size of your application. That's why we recommend you to import only the components that you are actually using. The last step is to import the necessary CSS for our components so that they are styled properly: -```ts +```typescript import 'igniteui-webcomponents/themes/light/bootstrap.css'; ``` @@ -113,7 +122,7 @@ npm init -y npm install webpack webpack-cli --save-dev ``` -> [!Note] +> [!NOTE] > Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. 5 - Open the project in **VS Code** @@ -136,7 +145,7 @@ code . }, ``` -> [!Note] +> [!NOTE] > This script will use webpack to bundle the **index.js** file into another file called **index.bundle.js** and place it into a folder named **dist**. > > If a **JavaScript heap out of memory** issue occurs while building you can increase the heap size by using this build command instead: @@ -159,7 +168,7 @@ npm install @webcomponents/custom-elements 3 - Import the web component polyfills into **index.js** -```ts +```typescript import '@webcomponents/custom-elements/custom-elements.min'; import '@webcomponents/custom-elements/src/native-shim.js'; ``` @@ -177,7 +186,7 @@ npm install lit-html 2 - Import the Geographic Map modules and **ModuleManager** in **index.js** file: -```ts +```typescript import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps'; import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts'; // module manager for registering the modules @@ -186,7 +195,7 @@ import { ModuleManager } from 'igniteui-webcomponents-core'; 3 - Register the Geographic Map modules using the **ModuleManager** -```ts +```typescript ModuleManager.register( IgcGeographicMapModule, IgcDataChartInteractivityModule @@ -210,7 +219,7 @@ ModuleManager.register( npm run build ``` -> [!Note] +> [!NOTE] > This command will run the build script we created earlier. The build script will generate a file named **index.bundle.js** in a folder named **dist** 2 - Add the **index.bundle.js** script to the end of **body** element in **index.html** file. @@ -226,22 +235,36 @@ npm run build 3 - To run the project, launch a local development server. In this example, we are using Live Server. Right-click within the editor of **index.html** and select **Open with Live Server** - - -> [!Note] +> [!NOTE] > Live Server is an extension to Visual Studio Code that allows you to launch a local development server with live reload feature for static & dynamic pages. This extension can be installed via the Visual Studio Code Extensions tab, or by downloading it from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). 4 - Navigate to the **index.html** using a web browser on your local server. The final result should show interactive map of the world: - - ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` +## Upgrade from Trial to Licensed + +The Ignite UI CLI installs the trial version of Ignite UI for Web Components by default. To upgrade from the trial package to the licensed version, run the upgrade command in your project root: + +```bash +ig upgrade-packages +``` + +You will be prompted to log in to the Infragistics private npm registry if not already configured. For details on the license model, see [License FAQ and Installation](./general-licensing.md) and [Open Source vs Premium](./general-open-source-vs-premium.md). + +## AI-Assisted Development + +Ignite UI provides a three-part AI toolchain - **Agent Skills**, the **Ignite UI CLI MCP server**, and the **Ignite UI Theming MCP server** - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Once connected, your AI assistant can scaffold projects, add and modify components, answer documentation questions, and generate accurate Ignite UI for Web Components code without leaving your editor. + +Run `ig ai-config` from your project root to copy Ignite UI for Web Components Agent Skills and write the Ignite +UI MCP server configuration to `.vscode/mcp.json` in a single step. + +For an overview of all three layers and setup instructions, see [AI-Assisted Development with Ignite UI](./ai/ai-assisted-development-overview.md). For the full CLI MCP client setup guide, see [Ignite UI CLI MCP](./ai/cli-mcp.md). For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.md). -# Ignite UI for Web Components Packages Overview +## Ignite UI for Web Components Packages Overview Ignite UI for Web Components is a complete set of UI widgets, components, and UI kits for design tools and supporting services for Web Components. Designed to enable developers to build the most modern, high-performance HTML5 and JavaScript apps for modern desktop browsers, mobile experiences, and progressive web apps (PWAs) targeting the browsers web components APIs. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-how-to-mcp-e2e.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-how-to-mcp-e2e.md index 9986703d7..dcdbb505d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-how-to-mcp-e2e.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-how-to-mcp-e2e.md @@ -62,7 +62,7 @@ This gives you the `ig` command in any terminal session. ### Without a global install ```bash -npx --package igniteui-cli igniteui new +npx ig new ``` This runs the CLI through `npx` instead of a global `ig` command. @@ -76,7 +76,7 @@ ig new Matching `npx` form: ```bash -npx --package igniteui-cli igniteui new +npx ig new ``` You can also use a direct command when you already know the project settings. @@ -90,7 +90,7 @@ ig new my-app --framework=webcomponents Matching `npx` form: ```bash -npx --package igniteui-cli igniteui new my-app --framework=webcomponents +npx ig new my-app --framework=webcomponents ``` What happens next: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-step-by-step-guide-using-cli.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-step-by-step-guide-using-cli.md new file mode 100644 index 000000000..efd161527 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/general-step-by-step-guide-using-cli.md @@ -0,0 +1,106 @@ +--- +title: Step-by-Step Guide Using Ignite UI CLI | Ignite UI for Web Components | Infragistics +_description: Walk through the Ignite UI CLI interactive wizard to create a new Web Components project, choose a template and theme, and add Ignite UI for Web Components component views. +_keywords: Web Components cli, ignite ui cli, Ignite UI for Web Components, scaffolding, step-by-step, Infragistics +mentionedTypes: [] +last_updated: "2025-04-08" +_tocName: Step-by-Step Guide Using Ignite UI CLI +--- + + + +# Step-by-Step Guide Using Ignite UI CLI + +The Ignite UI CLI step-by-step mode is an interactive wizard that guides you through project creation, template selection, theming, and component view addition for Ignite UI for Web Components projects. It covers the same operations as the non-interactive `ig new` and `ig add` commands but prompts you at each step rather than requiring all arguments upfront. + +The step-by-step mode does not support scripted or non-interactive use - for that, use the `ig new` and `ig add` commands with explicit arguments. The wizard relies on `Inquirer.js`; see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) for compatibility. For the full CLI reference, see [Ignite UI CLI Overview](general-cli-overview.md). + +To activate the wizard, run: + +```cmd +ig +``` + +or: + +```cmd +ig new +``` + +## Create a New Project + +The wizard walks through project naming, framework and type selection, template choice, and theming in sequence. Each step displays its options as an interactive list - navigate with the arrow keys and confirm with ENTER. + +### Enter a project name + +First, you will be prompted to enter a name for your application. The project is created inside a directory with the same name. + +### Select a framework + +Navigate through the options using the arrow keys and press ENTER to confirm: + +Select **Web Components** to scaffold a project pre-configured for Ignite UI for Web Components. + +### Select a project type + +Select **Ignite UI for Web Components TS** as the project type. + +### Select a project template + +Choose one of the available project templates. Navigate through the options using the arrow keys and press ENTER to confirm: + +| Template | Description | +| :--------------- | :-------------------------------------------------- | +| Empty | Minimal project structure with no predefined views | +| Base | Project structure with a home page | +| Side Navigation | Project structure with a side navigation drawer | + +### Select a theme + +Choose a theme for your application: + +- The **default** option includes a pre-compiled CSS file with the default Ignite UI for Web Components theme. +- The **custom** option generates a Sass-based color palette and theme configuration using the [Theming API](./themes/overview.md). + +### Complete or continue + +After completing the above steps, the project structure is generated, a Git repository is initialized, and the project is committed. You will then be asked whether to complete the process or add a new view to your application. + +## Add View + +The Ignite UI CLI supports multiple component templates that can be added to an existing project. This mode is available either as a continuation of project creation or inside an existing project using: + +```cmd +ig add +``` + +You will be provided with a list of available component templates, grouped by category. Use the arrow keys to navigate through the groups and ENTER to select. For some templates, such as `Custom Grid`, you will be provided with a list of optional features that can be toggled on or off with the SPACE key before confirming your selection. + +After selecting a group, choose a specific template from the list and enter a name for the new component. If you choose to add a scenario template, you will also be presented with a list of available scenario templates. + +After adding a template, you will be asked whether to add more views or complete the process. On completion, any remaining package dependencies are installed and the application is built and opened in your default browser. + +To add more views to a project later without the wizard, use the direct `add` command: + +```cmd +ig add [template] [name] +``` + +For example: + +```cmd +ig add grid MyGrid +``` + +> [!NOTE] +> Your routing file will be updated with the path to the newly generated page. For example, a component named `MyGrid` will be navigable at `/my-grid`. + +## Run the Application + +Once your project is complete, run it at any time with: + +```cmd +ig start +``` + +This builds the project, starts a local web server, and opens the application in your default browser. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-csv.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-csv.md index 5896760ec..9c19ebbe9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-csv.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-csv.md @@ -20,7 +20,6 @@ With the Ignite UI for Web Components map component, you can plot geographic dat /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Data Example diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-json-points.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-json-points.md index dc7235d3f..8a759a3cc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-json-points.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-json-points.md @@ -20,7 +20,6 @@ With the Ignite UI for Web Components map, you can plot geographic data loaded f /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Data Example diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-model.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-model.md index 35481e2d5..7f4cda285 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-model.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-data-model.md @@ -245,7 +245,6 @@ export class WorldUtils { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The following table summarized data structures required for each type of geographic series: @@ -255,10 +254,10 @@ The following table summarized data structures required for each type of geograp | [`IgcGeographicSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html#latitudeMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates | | [`IgcGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographichighdensityscatterseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographichighdensityscatterseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographichighdensityscatterseriescomponent.html#latitudeMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates | | [`IgcGeographicProportionalSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicproportionalsymbolseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicproportionalsymbolseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicproportionalsymbolseriescomponent.html#latitudeMemberPath), [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicproportionalsymbolseriescomponent.html#radiusMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols | -| [`IgcGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#colorMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | -| [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#valueMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | -|[`IgcGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriescomponent.html)|[`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriesbasecomponent.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | -|[`IgcGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicpolylineseriescomponent.html)|[`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriesbasecomponent.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | +| [`IgcGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#latitudeMemberPath), [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#colorMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +| [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html) | [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#latitudeMemberPath), [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#valueMemberPath) | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values | +|[`IgcGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriescomponent.html)|[`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriescomponent.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. | +|[`IgcGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicpolylineseriescomponent.html)|[`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriescomponent.html#shapeMemberPath)|Specifies the name of data column of `ItemsSource` items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. | ## Code Snippet diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-multiple-shapes.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-multiple-shapes.md index c2030af56..12b2cf550 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-multiple-shapes.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-multiple-shapes.md @@ -20,7 +20,6 @@ In the Ignite UI for Web Components map, you can add multiple geographic series /* 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 [`IgcShapeDataSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcshapedatasource.html) class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about [`IgcShapeDataSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcshapedatasource.html) object. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-multiple-sources.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-multiple-sources.md index d09922050..633aa7982 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-multiple-sources.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-multiple-sources.md @@ -1011,7 +1011,6 @@ export class WorldUtils { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-shp-file.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-shp-file.md index 8f4db4d57..debae4444 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-shp-file.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-binding-shp-file.md @@ -19,7 +19,6 @@ The Ignite UI for Web Components map component, the [`IgcShapeDataSource`](https /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The following table explains properties of the [`IgcShapeDataSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcshapedatasource.html) class for loading shape files. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-azure-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-azure-imagery.md index aa7c6bf92..b93e93017 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-azure-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-azure-imagery.md @@ -134,7 +134,6 @@ export class MapUtils { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Displaying Imagery from Azure Maps - Code Example The following code snippet shows how to display geographic imagery tiles from Azure Maps in Web Components [`IgcGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html) using [`IgcAzureMapsImagery`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcazuremapsimagery.html) class. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-esri-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-esri-imagery.md index 626cd0e51..c67c4bf36 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-esri-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-esri-imagery.md @@ -211,7 +211,6 @@ export class MapUtils { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Code Snippet diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-heat-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-heat-imagery.md index 58db7d6f5..69d05e977 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-heat-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-heat-imagery.md @@ -37,7 +37,6 @@ export default {} as typeof Worker & (new () => Worker); /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
When a [`IgcShapeDataSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcshapedatasource.html) loads its shape files, it converts that data into [`IgcShapefileRecord`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcshapefilerecord.html) objects. These objects can be retrieved from the `GetPointData()` method of the [`IgcShapeDataSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcshapedatasource.html) and can then be used to create a heat-map through usage of a [`IgcTileGeneratorMapImagery`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igctilegeneratormapimagery.html) object with a [`IgcHeatTileGenerator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_core.igcheattilegenerator.html) assigned to its `TileGenerator` property. This [`IgcTileGeneratorMapImagery`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igctilegeneratormapimagery.html) can then be used in a [`IgcGeographicTileSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographictileseriescomponent.html) as its [`tileImagery`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographictileseriescomponent.html#tileImagery) source. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-osm-imagery.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-osm-imagery.md index 59a379d34..5e6f4b31d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-osm-imagery.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-display-osm-imagery.md @@ -20,7 +20,6 @@ By the default, the Ignite UI for Web Components map component already displays /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Code Snippet diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-navigation.md index cf96b4091..f436a0171 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-navigation.md @@ -130,7 +130,6 @@ export class MapUtils { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Geographic Coordinates @@ -157,18 +156,18 @@ The following table summarizes properties that can be used in navigation of the | Property Name | Property Type | Description | |----------------|-----------------|---------------| -|[`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowRect)| Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. | -|[`windowScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowScale)| number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowRect) property | -|[`windowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowPositionHorizontal)| number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowRect) property. | -|[`windowPositionVertical`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowPositionVertical)| number | Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowRect) property. | -|[`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#actualWindowRect)| Rect | Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window. | -|[`actualWindowScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#actualWindowScale)| number | Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#actualWindowRect) property | -|[`actualWindowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#actualWindowPositionHorizontal)| number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#actualWindowRect) property. | -|[`actualWindowPositionVertical`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#actualWindowPositionVertical)| number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#actualWindowRect) property. | +|[`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowRect)| Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. | +|[`windowScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowScale)| number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowRect) property | +|[`windowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowPositionHorizontal)| number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowRect) property. | +|[`windowPositionVertical`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowPositionVertical)| number | Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowRect) property. | +|[`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#actualWindowRect)| Rect | Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window. | +|[`actualWindowScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#actualWindowScale)| number | Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#actualWindowRect) property | +|[`actualWindowPositionHorizontal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#actualWindowPositionHorizontal)| number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#actualWindowRect) property. | +|[`actualWindowPositionVertical`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#actualWindowPositionVertical)| number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#actualWindowRect) property. | ## API References -- [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#actualWindowRect) -- [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowRect) +- [`actualWindowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#actualWindowRect) +- [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowRect) - [`IgcGeographicMapComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html) - [`zoomable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#zoomable) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-shape-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-shape-styling.md index af432e424..0598e6bca 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-shape-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-shape-styling.md @@ -481,7 +481,6 @@ export class WorldUtils { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Required Imports diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-area-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-area-series.md index 050bb836b..324d39f22 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-area-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-area-series.md @@ -19,15 +19,14 @@ In Web Components map component, you can use the [`IgcGeographicScatterAreaSerie /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The [`IgcGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html) works a lot like the [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html) except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values. ## Data Requirements -Similar to other types of geographic series in the map component, the [`IgcGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store a geographic longitude and latitude coordinates and one data column that stores a value associated with the geographic location. The [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), and [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#colorMemberPath) properties of the geographic series identify these data column. -The [`IgcGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource for this property, especially when a large number of data items are present. +Similar to other types of geographic series in the map component, the [`IgcGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store a geographic longitude and latitude coordinates and one data column that stores a value associated with the geographic location. The [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#latitudeMemberPath), and [`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#colorMemberPath) properties of the geographic series identify these data column. +The [`IgcGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#trianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource for this property, especially when a large number of data items are present. ## Data Binding @@ -35,14 +34,14 @@ The following table summarizes properties of GeographicScatterAreaSeries used fo | Property Name | Property Type | Description | |--------------|---------------| ---------------| -|`ItemsSource`|any|The source of data items to perform triangulation on if the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource) property provides no triangulation data.| -|[`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#longitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.| -|[`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#latitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to the `ItemsSource`.| +|`ItemsSource`|any|The source of data items to perform triangulation on if the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#trianglesSource) property provides no triangulation data.| +|[`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#longitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.| +|[`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#latitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to the `ItemsSource`.| |[`colorMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#colorMemberPath)|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the [`colorScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#colorScale) property is set.| -|[`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource)|any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.| -|[`triangleVertexMemberPath1`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath1)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`triangleVertexMemberPath2`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath2)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`triangleVertexMemberPath3`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath3)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#trianglesSource)|any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.| +|[`triangleVertexMemberPath1`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#triangleVertexMemberPath1)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath2`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#triangleVertexMemberPath2)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath3`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#triangleVertexMemberPath3)|string|The name of the property of the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#trianglesSource) items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| ## Color Scale @@ -136,7 +135,7 @@ createAreaSeries(data: any[]) { - [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html) - [`IgcGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html) - `ItemsSource` -- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#latitudeMemberPath) -- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#longitudeMemberPath) -- [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource) +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#longitudeMemberPath) +- [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html#trianglesSource) - `TriangulationSource` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-bubble-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-bubble-series.md index 1ce8e6160..61987596f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-bubble-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-bubble-series.md @@ -660,7 +660,6 @@ export class WorldLocations { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The demo above shows the [`IgcGeographicProportionalSymbolSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicproportionalsymbolseriescomponent.html) series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-contour-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-contour-series.md index acee8f0f0..ed127d404 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-contour-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-contour-series.md @@ -19,15 +19,14 @@ In Web Components map component, you can use the [`IgcGeographicContourLineSerie /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html) works a lot like the [`IgcGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html) except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale. ## Data Requirements -Similar to other types of geographic series in the map component, the [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#latitudeMemberPath), and [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#valueMemberPath) properties of the geographic series. -The [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present. +Similar to other types of geographic series in the map component, the [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html) has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#longitudeMemberPath), [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#latitudeMemberPath), and [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#valueMemberPath) properties of the geographic series. +The [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html) automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#trianglesSource) property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present. ## Data Binding @@ -35,14 +34,14 @@ The following table summarizes properties of [`IgcGeographicContourLineSeriesCom | Property Name | Property Type | Description | |--------------|---------------| ---------------| -|`ItemsSource`|any|The source of data items to perform triangulation on if the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource) property provides no triangulation data.| -|[`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#longitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.| -|[`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#latitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to to the `ItemsSource`.| +|`ItemsSource`|any|The source of data items to perform triangulation on if the [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#trianglesSource) property provides no triangulation data.| +|[`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#longitudeMemberPath)|string|The name of the property containing the Longitude for all items bound to the `ItemsSource`.| +|[`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#latitudeMemberPath)|string|The name of the property containing the Latitude for all items bound to to the `ItemsSource`.| |[`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#valueMemberPath)|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the [`fillScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#fillScale) property is set.| -|[`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource)|any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.| -|[`triangleVertexMemberPath1`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath1)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`triangleVertexMemberPath2`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath2)|string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| -|[`triangleVertexMemberPath3`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#triangleVertexMemberPath3)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#trianglesSource)|any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.| +|[`triangleVertexMemberPath1`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#triangleVertexMemberPath1)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath2`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#triangleVertexMemberPath2)|string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| +|[`triangleVertexMemberPath3`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#triangleVertexMemberPath3)|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.| ## Contour Fill Scale @@ -52,7 +51,7 @@ The following table list properties of the CustomPaletteColorScale affecting the | Property Name | Property Type | Description | |--------------|---------------| ---------------| -|[`brushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#brushes)|BrushCollection|Gets or sets the collection of brushes for filling contours of the [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html)| +|[`brushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#brushes)|BrushCollection|Gets or sets the collection of brushes for filling contours of the [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html)| |[`maximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccustompalettecolorscalecomponent.html#maximumValue)|double|The highest value to assign a brush in a fill scale.| |[`minimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccustompalettecolorscalecomponent.html#minimumValue)|double|The lowest value to assign a brush in a fill scale.| @@ -133,9 +132,9 @@ createContourSeries(data: any[]) - [`IgcGeographicContourLineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html) - [`IgcGeographicScatterAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicscatterareaseriescomponent.html) - `ItemsSource` -- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#latitudeMemberPath) -- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#longitudeMemberPath) -- [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicxytriangulatingseriescomponent.html#trianglesSource) +- [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#latitudeMemberPath) +- [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#longitudeMemberPath) +- [`trianglesSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#trianglesSource) - `TriangulationSource` - [`IgcValueBrushScaleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcvaluebrushscalecomponent.html) - [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographiccontourlineseriescomponent.html#valueMemberPath) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-density-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-density-series.md index 2df44a174..78b2a69c8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-density-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-density-series.md @@ -244,7 +244,6 @@ export class WorldUtils { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The demo above shows the [`IgcGeographicHighDensityScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographichighdensityscatterseriescomponent.html) series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-symbol-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-symbol-series.md index 41e4f705e..b0a4d5a87 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-symbol-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-scatter-symbol-series.md @@ -660,7 +660,6 @@ export class WorldLocations { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Data Requirements diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-shape-polygon-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-shape-polygon-series.md index 5a7df699d..59844dfbc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-shape-polygon-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-shape-polygon-series.md @@ -19,7 +19,6 @@ In Web Components map component, you can use the [`IgcGeographicShapeSeriesCompo /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The [`IgcGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriescomponent.html) works a lot like the [`IgcGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicpolylineseriescomponent.html) except that geo-spatial data is rendered with polygons instead of polylines. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-shape-polyline-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-shape-polyline-series.md index a8ef96fc1..519c255d2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-shape-polyline-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map-type-shape-polyline-series.md @@ -19,7 +19,6 @@ In Web Components map component, you can use the [`IgcGeographicPolylineSeriesCo /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The [`IgcGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicpolylineseriescomponent.html) works a lot like the [`IgcGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriescomponent.html) except that geo-spatial data is rendered with polylines instead of polygons. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map.md index 7d417f607..63c494143 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/geo-map.md @@ -661,7 +661,6 @@ export class WorldLocations { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The map component allows you to render geographic imagery from Bing Maps™, and Open Street Maps. The map provides plotting of tens of thousands of data points, and updates them every few milliseconds so that the control can handle your real-time feeds. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-advanced-filtering.md index d42b8664a..9f3f11348 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-advanced-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-advanced-filtering.md @@ -22,7 +22,6 @@ The Ignite UI for Web Components Advanced Filtering in Web Components Grid allow /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Interaction In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. If no advanced filter is applied, you should start with creating a group of filtering conditions linked with **AND** or **OR**. After that, you can add filtering conditions or sub-groups. @@ -37,7 +36,7 @@ In order to filter the data once you are ready with creating the filtering condi ## Usage -To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowAdvancedFiltering) input property should be set to **true**. +To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#allowAdvancedFiltering) input property should be set to **true**. @@ -56,7 +55,7 @@ constructor() { -The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. +The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. ```typescript connectedCallback(): void { @@ -85,7 +84,7 @@ connectedCallback(): void { } ``` -In case you don't want to show the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. +In case you don't want to show the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. > [!Note] > You can enable both the **QuickFilter**/**ExcelStyleFilter** and the advanced filtering user interfaces in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). Both filtering user interfaces will work independently of one another. The final filtered result in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) is the intersection between the results of the two filters. @@ -132,7 +131,6 @@ Then set the related CSS properties to this class: } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md index 5663e8374..a13e6e84d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md @@ -29,7 +29,6 @@ In addition, you can define your own custom templates for update-data actions an } ``` - ## Cell Editing ### Editing through UI @@ -71,7 +70,7 @@ public updateCell() { -Another way to update cell is directly through `Update` method of `Cell`: +Another way to update cell is directly through [`update`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrow.html#update) method of `Cell`: @@ -176,7 +175,6 @@ export class RoleplayDataStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Grid Excel Style Editing @@ -321,7 +319,6 @@ export class NwindData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - Main benefits of the above approach include: - Constant edit mode: typing while a cell is selected will immediately enter edit mode with the value typed, replacing the existing one @@ -353,7 +350,7 @@ 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#updateCell) methods but **only if the PrimaryKey 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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#updateCell) methods but **only if the PrimaryKey for the grid is defined**. You can also directly update a cell and/or a row value through their respective **update** methods. @@ -376,7 +373,7 @@ row.update(newData); ### Deleting data from the Grid -Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) is defined. +Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#primaryKey) is defined. @@ -433,6 +430,8 @@ If the value entered in a cell under the **Units On Order** column is larger tha + + The result of the above validation being applied to our [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) can be seen in the below demo: @@ -442,7 +441,6 @@ The result of the above validation being applied to our [`IgcGridComponent`](htt /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -483,13 +481,9 @@ Then set the related CSS properties for that class: } ``` - ## API References - [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) - - - - [`IgcDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-merging.md index b8d1c2197..dae0834cd 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-merging.md @@ -75,7 +75,6 @@ export class InvoicesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Enabling and Using Cell Merging @@ -194,7 +193,6 @@ constructor() { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Feature Integration diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-selection.md index 9bdea852c..bbeadbe32 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-selection.md @@ -30,7 +30,6 @@ The sample below demonstrates the three types of [`IgcGridComponent`](https://ww /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Selection Types ### Grid Multiple-Cell Selection @@ -188,18 +187,17 @@ export class InvoicesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Grid Single Selection -When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#cellSelection) to **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. +When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#cellSelection) to **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. > When single cell is selected [`selected`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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` event is emitted. ### Grid None Selection -If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#cellSelection) to **none**. 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. +If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#cellSelection) to **none**. 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 @@ -228,7 +226,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Select range -[`selectRange`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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. ```ts const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 }; @@ -239,7 +237,7 @@ this.grid.selectRange(range); ### Clear cell selection -[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clearCellSelection) will clear the current cell selection. +[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#clearCellSelection) will clear the current cell selection. ```ts this.grid.clearCellSelection(); @@ -317,7 +315,7 @@ The multi-cell selection is index based (DOM elements selection). - `Filtering` - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells. - `Resizing` - On column resizing selected cells will not be cleared. - `Hiding` - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected. -- [`pinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#pinning) - Selected cell will not be cleared. Same as hiding +- [`pinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#pinning) - Selected cell will not be cleared. Same as hiding - [`groupBy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#groupBy) - On column grouping selected cells will not be cleared. @@ -393,7 +391,6 @@ export class CustomersData extends Array { } ``` - ## API References - [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-clipboard-interactions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-clipboard-interactions.md index 5fdcbf738..1cd4fda56 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-clipboard-interactions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-clipboard-interactions.md @@ -140,7 +140,6 @@ export class NwindData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Functionality Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are: @@ -167,7 +166,7 @@ Copy behavior is working with the default interaction defined by the browser and ## API Usage -We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clipboardOptions) property, which handles the following options: +We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#clipboardOptions) property, which handles the following options: - `Enabled` Enables/disables copying of selected cells. - `CopyHeaders` Include the associated headers when copying. @@ -177,7 +176,7 @@ We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-w > [!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` Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clipboardOptions). +- `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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#clipboardOptions). ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-collapsible-column-groups.md index 9700c9ee7..dada12b98 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-collapsible-column-groups.md @@ -73,7 +73,6 @@ export class InvoicesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Setup To get started with the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) and the **Collapsible multi-column headers** feature, first you need to install Ignite UI for Web Components by typing the following command: @@ -91,9 +90,9 @@ Also, we strongly suggest that you take a brief look at [multi-column headers](m **Collapsible Column Groups** is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. -In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#columnGroup) to **true**. +In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#columnGroup) to **true**. -You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. +You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. Let's see the markup below: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-hiding.md index d600c82b8..22a225548 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-hiding.md @@ -57,7 +57,6 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Grid Setup Let's start by creating our [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) and binding it to our data. We will also enable both filtering and sorting for the columns. @@ -83,7 +82,7 @@ Let's start by creating our [`IgcGridComponent`](https://www.infragistics.com/pr The built-in Column Hiding UI is placed inside an `DropDown` in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'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 [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) and the [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) inside of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). +For this purpose all we have to do is set both the [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) and the [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) inside of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). ```html @@ -264,7 +263,6 @@ export class CustomersData extends Array { } ``` - ## API References In this article we learned how to use the built-in column hiding UI in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s toolbar. The column hiding UI has a few more APIs to explore, which are listed below. @@ -277,15 +275,15 @@ Additional components with relative APIs that were used: - [`disableHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#disableHiding) -[`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) properties: +[`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) properties: - `showProgress` -[`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) methods: +[`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) methods: -- [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) -- [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) -- [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html) +- [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) +- [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) +- [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html) [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) events: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-moving.md index 52b413a32..f570b5ff1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-moving.md @@ -123,10 +123,9 @@ export class FinancialDataAll extends Array { } ``` - ## Overview -**Column moving** feature is enabled on a per-grid level, meaning that the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#moving) input of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). +**Column moving** feature is enabled on a per-grid level, meaning that the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#moving) input of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). ```html @@ -138,7 +137,7 @@ export class FinancialDataAll extends Array { In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: -[`moveColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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` value), which determines whether to place the column before or after the target column. +[`moveColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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` value), which determines whether to place the column before or after the target column. ```typescript // Move the ID column after the Name column @@ -156,7 +155,7 @@ const idColumn = grid.getColumnByName("ID"); idColumn.move(3); ``` -Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`moving`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#moving) property to true. +Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`moving`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#moving) property to true. ## Events @@ -304,7 +303,6 @@ export class FinancialDataAll extends Array { } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-pinning.md index 4ff414e32..827a245e4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-pinning.md @@ -24,10 +24,9 @@ This example demonstrates how you can pin a column or multiple columns to the le /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Column Pinning API -Column pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pinned) property of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html). Pinned columns are rendered on the left side of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) body. +Column pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrow.html#pinned) property of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html). Pinned columns are rendered on the left side of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) body. ```html @@ -48,7 +47,7 @@ constructor() { -You may also use the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#unpinColumn) methods of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) to pin or unpin columns by their field name: +You may also use the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#unpinColumn) methods of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) to pin or unpin columns by their field name: @@ -89,7 +88,7 @@ public columnPinning(event) { ## Pinning Position -You can change the column pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#pinning) configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right. ```html @@ -152,7 +151,6 @@ export class AthletesDataExtended extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. @@ -230,7 +228,6 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. @@ -346,7 +343,6 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) 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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). @@ -422,7 +418,6 @@ export class CustomersData extends Array { } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-resizing.md index 6c6bd12a0..70aa2fc67 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-resizing.md @@ -57,7 +57,6 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - **Column resizing** is also enabled per-column level, meaning that the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#resizable) input of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html). ```html @@ -221,7 +220,6 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -285,7 +283,6 @@ export class AthletesData extends Array { } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-selection.md index 4cb7f2cc5..124878a76 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-selection.md @@ -13,7 +13,7 @@ _premium: true # Web Components Grid Column Selection Overview -The Web Components Grid Column Selection feature in Ignite UI for Web Components offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. +The Web Components Grid Column Selection feature in Ignite UI for Web Components offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. ## Web Components Grid Column Selection Example @@ -65,10 +65,9 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Basic Usage -The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#columnSelection) input, which takes `GridSelectionMode` values. +The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#columnSelection) input, which takes `GridSelectionMode` values. ## Interactions @@ -123,11 +122,10 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Keyboard Combinations > [!Note] -> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#columnSelection) input is set to `multiple`. +> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#columnSelection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: @@ -218,7 +216,6 @@ export class CustomersData extends Array { } ``` - ## API References The column selection UI has a few more APIs to explore, which are listed below. @@ -229,12 +226,12 @@ The column selection UI has a few more APIs to explore, which are listed below. [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) properties: -- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#columnSelection) -- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#selectedColumns) -- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#selectColumns) -- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#deselectColumns) -- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#selectAllColumns) -- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#deselectAllColumns) +- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#columnSelection) +- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#selectedColumns) +- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#selectColumns) +- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#deselectColumns) +- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#selectAllColumns) +- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#deselectAllColumns) [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-types.md index c00d916f4..6f3d7298e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-column-types.md @@ -108,7 +108,6 @@ export class Invoice } ``` - ## Web Components Grid Default Template @@ -123,7 +122,7 @@ This column [`dataType`](https://www.infragistics.com/products/ignite-ui-web-com ### Number -If the [`dataType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: +If the [`dataType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: - Number of digits after the decimal point - Decimal separator with `,` or `.` @@ -148,7 +147,7 @@ constructor() { ### 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: +The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: - **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc. - **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: @@ -244,7 +243,7 @@ Default template is using the value coming from the data as an image source to a ``` -When [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#autoGenerate) is used for the 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 [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#autoGenerate) is used for the 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. ### Currency @@ -376,7 +375,7 @@ public formatCurrency(value: number) { - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) - [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) - [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) -- [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) +- [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#locale) - [`dataType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#dataType) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-conditional-cell-styling.md index 1534ce49f..67c37d27f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-conditional-cell-styling.md @@ -19,14 +19,14 @@ The Ignite UI for Web Components Conditional Styling feature in Web Components G The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component in Ignite UI for Web Components provides two ways to **conditional styling of rows** based on custom rules. -- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowClasses) input on the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component; -- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowStyles) input on the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component; +- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowClasses) input on the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component; +- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowStyles) input on the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component; Further in this topic we will cover both of them in more details. ### Using Row Classes -You can conditionally style the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowClasses) input and define custom rules. +You can conditionally style the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowClasses) input and define custom rules. ```html @@ -40,17 +40,17 @@ constructor() { } ``` -The [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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. ```ts public rowClasses = { - activeRow: (row: IgcRowType) => row.index === 0 + activeRow: (row: IgcRowType) => row.index % 2 === 0 } ``` ```css .activeRow { - border: 2px solid #fc81b8; + border-top: 2px solid #fc81b8; border-left: 3px solid #e41c77; } ``` @@ -67,12 +67,11 @@ public rowClasses = { } ``` - ### Using Row Styles -The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). +The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). -> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowClasses) is: +> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowClasses) is: ```ts (row: IgcRowType) => boolean @@ -196,7 +195,6 @@ export class FinancialDataAll extends Array { } ``` - ## Grid Conditional Cell Styling ## Overview @@ -308,7 +306,6 @@ export class AthletesData extends Array { } ``` - - By using the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) input [`cellStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#cellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. > The callback signature for both `cellStyles` and `cellClasses` is now changed to: @@ -394,7 +391,6 @@ export class AthletesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## 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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-editing.md index 6afdb28b5..9d5ef926f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-editing.md @@ -20,7 +20,7 @@ The Ignite UI for Web Components Cell Editing feature in Web Components Grid pro ## Setup -In order to specify which edit mode should be enabled, the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable). +In order to specify which edit mode should be enabled, the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowEditable). The [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) property enables you to specify the following options: @@ -29,12 +29,12 @@ The [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/ > Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). -The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) property enables you to specify the following options: +The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowEditable) property enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled. This is the default value. - **true** - the row editing in the corresponding grid will be enabled. -In the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. +In the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. ## Export Grouped Data @@ -90,7 +89,7 @@ You can export [`IgcGridComponent`](https://www.infragistics.com/products/ignite > The exported [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) will not be formatted as a table, since Excel tables do not support multiple column headers. > [!Note] -> [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons: +> [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons: > > - `export-excel`, `export-csv`, `export-pdf` @@ -138,7 +137,6 @@ export class CustomersData extends Array { } ``` - ## Export Grid with Frozen Column Headers By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` `FreezeHeaders` to `true`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-filtering.md index ba5f63db9..db72d5b02 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-filtering.md @@ -27,22 +27,21 @@ The sample below demonstrates [`IgcGridComponent`](https://www.infragistics.com/ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Setup -In order to specify if filtering is enabled and which filtering mode should be used, the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable). +In order to specify if filtering is enabled and which filtering mode should be used, the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable). -Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowFiltering) enables you to specify the following options: +Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#allowFiltering) enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled. This is the default value. - **true** - the filtering for the corresponding grid will be enabled. -Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowAdvancedFiltering) enables you to specify the following options: +Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#allowAdvancedFiltering) enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled. This is the default value. - **true** - the advanced filtering for the corresponding grid will be enabled. -Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filterMode) enables you to specify the following options: +Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#filterMode) enables you to specify the following options: - **QuickFilter** - a simplistic filtering UI. This is the default value. - **ExcelStyleFilter** - an Excel-like filtering UI. @@ -61,7 +60,7 @@ Property [`filterable`](https://www.infragistics.com/products/ignite-ui-web-comp -To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowAdvancedFiltering) input property to **true** +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#allowAdvancedFiltering) input property to **true** ```html @@ -81,7 +80,7 @@ While some filtering conditions have been applied to a column, and the filter ro 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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#dataType) of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the `IgnoreCase` and the initial `Condition` properties. -The filtering feature is enabled for the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable) input to **false**. +The filtering feature is enabled for the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable) input to **false**. @@ -96,9 +95,9 @@ The filtering feature is enabled for the [`IgcGridComponent`](https://www.infrag > [!Note] > If values of type **string** are used by a column of data type **date**, the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) 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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) API. The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) exposes several methods for this task - [`filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filter), [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filterGlobal) and [`clearFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clearFilter). +You can filter any column or a combination of columns through the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) API. The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) exposes several methods for this task - [`filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#filter), [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#filterGlobal) and [`clearFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#clearFilter). -- [`filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filter) - filter a single column or a combination of columns. +- [`filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#filter) - filter a single column or a combination of columns. There are five filtering operand classes exposed: @@ -147,7 +146,7 @@ gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTre this.grid.filteringExpressionsTree = gridFilteringExpressionsTree; ``` -- [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filterGlobal) - clears all existing filters and applies the new filtering condition to all Grid's columns. +- [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#filterGlobal) - clears all existing filters and applies the new filtering condition to all Grid's columns. ```typescript // Filter all cells for a value which contains `myproduct` @@ -155,7 +154,7 @@ this.grid.filteringLogic = FilteringLogic.Or; this.grid.filterGlobal('myproduct', IgcStringFilteringOperand.instance().condition('contains'), false); ``` -- [`clearFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clearFilter) - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns. +- [`clearFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#clearFilter) - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns. ```typescript // Remove the filtering state from the ProductName column @@ -167,7 +166,7 @@ this.grid.clearFilter(); ## Initial filtered state -To set the initial filtering state of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), set the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filteringExpressionsTree) for each column to be filtered. +To set the initial filtering state of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), set the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#filteringExpressionsTree) for each column to be filtered. ```typescript constructor() { @@ -194,7 +193,7 @@ constructor() { ### Filtering logic -The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filteringLogic) property of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) controls how filtering multiple columns will resolve in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). You can change it at any time through the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) API, or through the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) input property. +The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#filteringLogic) property of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) controls how filtering multiple columns will resolve in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). You can change it at any time through the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) API, or through the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) input property. ```typescript import { FilteringLogic } from "igniteui-webcomponents-grids/grids"; @@ -302,7 +301,6 @@ constructor() { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -337,7 +335,6 @@ Then set the related CSS properties for that class: } ``` - ## Known Limitations > [!Note] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-groupby.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-groupby.md index e44a9a405..598ea4005 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-groupby.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-groupby.md @@ -11,7 +11,7 @@ _premium: true # Web Components Grid Group By -The Ignite UI for Web Components Group By behavior in Web Components IgcGrid creates grouped data rows based on the column values. The Group By in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection) property is set to multiple, clicking over the Group By row selector selects all records belonging to this group. +The Ignite UI for Web Components Group By behavior in Web Components IgcGrid creates grouped data rows based on the column values. The Group By in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowSelection) property is set to multiple, clicking over the Group By row selector selects all records belonging to this group. ## Web Components Grid Group By Example @@ -70,7 +70,6 @@ export class InvoicesWorldData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#groupingExpressions) property of the grid. @@ -258,7 +257,6 @@ export class InvoicesWorldData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Group By With Summaries Integration between Group By and Summaries is described in the [Summaries](summaries.md#summaries-with-group-by) topic. @@ -424,7 +422,6 @@ export class InvoicesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - The sample defines custom sorting for the different date conditions. Each custom strategy defines the `GroupingComparer` method, which is the custom compare function used when sorting the values. Additionally it extracts the values from the date needed for the comparison. @@ -559,7 +556,6 @@ export class InvoicesData extends Array { } ``` - ## Known Limitations |Limitation|Description| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-icons.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-icons.md index aafba2241..ed23a0d53 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-icons.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-icons.md @@ -127,7 +127,6 @@ export const xMark = ' + + +``` + +## Grid Lite in Action + +```typescript +export type UserSimple = { + id: string; + username: string; + email: string; + subscribed: boolean; +}; + +export type ProductInfo = { + id: string; + name: string; + price: number; + sold: number; + rating: number; + total: number; +}; + +export type User = { + id: string; + firstName: string; + lastName: string; + age: number; + email: string; + avatar: string; + active: boolean; + priority: 'Low' | 'Standard' | 'High'; + satisfaction: number; + registeredAt: Date; +}; + +export class GridLiteDataService { + private counter = 0; + + private namesMen = ['John', 'Bob', 'Mark', 'Charlie', 'Martin', 'Bill', 'Frank', 'Larry', 'Henry', 'Steve', 'Mike', 'Andrew']; + private namesWomen = ['Jane', 'Alice', 'Diana', 'Eve', 'Grace' , 'Katie', 'Irene', 'Liz', 'Fiona', 'Pam', 'Val', 'Mindy']; + private lastNames = ['Smith', 'Johnson', 'Mendoza', 'Brown', 'Spencer', 'Stone', 'Stark', 'Rooney']; + private productNames = ['Widget', 'Gadget', 'Gizmo', 'Device', 'Tool', 'Instrument', 'Machine', 'Equipment']; + private productModels = ['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite']; + private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High']; + + private randomInt(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1)) + min; + } + + private randomFloat(min: number, max: number, precision = 2): number { + const array = new Uint32Array(1); + window.crypto.getRandomValues(array); + const random01 = array[0] / 2 ** 32; + return parseFloat((random01 * (max - min) + min).toFixed(precision)); + } + + private randomElement(array: T[]): T { + return array[this.randomInt(0, array.length - 1)]; + } + + private randomBoolean(): boolean { + const array = new Uint8Array(1); + window.crypto.getRandomValues(array); + return (array[0] & 1) === 0; + } + + private generateId(): string { + return `1000-${this.counter++}-${this.randomInt(1000, 9999)}`; + } + + createProductInfo(): ProductInfo { + const price = this.randomFloat(50, 500, 2); + const sold = this.randomInt(10, 100); + const total = parseFloat((price * sold).toFixed(2)); + const product = this.randomElement(this.productNames) + ' ' + this.randomElement(this.productModels); + + return { + price, + sold, + total, + id: this.generateId(), + name: product, + rating: this.randomFloat(0, 5, 1) + }; + } + + createUserSimple(): UserSimple { + const firstName = this.randomElement(this.namesMen.concat(this.namesWomen)).toLowerCase(); + const lastName = this.randomElement(this.lastNames).toLowerCase(); + const email = firstName + '.' + lastName + '@example.com'; + const username = firstName + '.' + lastName + this.randomInt(1, 99); + return { + id: this.generateId(), + username: username, + email: email, + subscribed: this.randomBoolean() + }; + } + + createUser(): User { + let imagePath: string = ""; + let firstName: string = ""; + const gender = this.randomInt(0, 1); + if (gender === 0) { + imagePath = "https://dl.infragistics.com/x/img/people/men/" + this.randomInt(10, 40) + ".png"; + firstName = this.randomElement(this.namesMen); + } else { + imagePath = "https://dl.infragistics.com/x/img/people/women/" + this.randomInt(10, 40) + ".png"; + firstName = this.randomElement(this.namesWomen); + } + const lastName = this.randomElement(this.lastNames); + const email = firstName.toLowerCase() + '.' + lastName.toLowerCase() + '@example.com'; + + return { + id: this.generateId(), + firstName, + lastName, + age: this.randomInt(18, 90), + email, + avatar: imagePath, + active: this.randomBoolean(), + priority: this.randomElement(this.priorities), + satisfaction: this.randomInt(0, 5), + registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000)) + }; + } + + generateUsers(count: number): User[] { + return Array.from({ length: count }, () => this.createUser()); + } + + generateProducts(count: number): ProductInfo[] { + return Array.from({ length: count }, () => this.createProductInfo()); + } + + generateSimpleUsers(count: number): UserSimple[] { + return Array.from({ length: count }, () => this.createUserSimple()); + } +} +``` +```css +.grid-lite-wrapper { + width: 100%; + height: 100%; +} + +igc-grid-lite { + min-height: 75vh; + --ig-size: 1; +} +``` + +Grid Lite is designed to give you the core features that you need to deliver a beautiful data grid / data table experience in your apps. Designed for performance and beauty, the Grid Lite will work in any framework, on any platform. + +## Performance Built In + +Row-level virtualization allows you to render unlimited amounts of data with smooth scrolling. + +## Automatic Column Types + +Column types are automatically generated based on your data source, with built-in filtering tailored to each column type. + +## Custom Column Templates + +Deliver any type of UX with column templates. Anything you imagine can render in a grid column! + +## Interactive Features + +All the core interactive features your users expect: column filtering, column hiding, column resizing, column sorting, and more. + +## Beautiful UX & Branding + +Built-in theme support for Bootstrap, Material & Fluent, plus endless branding options in color palettes, fonts, elevation, display density & more. + +## Rich Keyboard Navigation + +Full Excel-style keyboard navigation gives users the experience they expect, with high performance even on large datasets. + +## Is Grid Lite a Free & Open-Source Web Components Data Grid? + +Yes. Ignite UI Grid Lite is a free, open-source Web Components data grid released under the MIT license. You can use it in commercial or personal projects with no licensing fees. It is part of our initiative to make Ignite UI more open, transparent, and accessible. + +- MIT-licensed + +- Free for commercial use + +- Community-driven development + +- No feature gating + +However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free Web Components data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-sorting.md similarity index 99% rename from packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/sorting.md rename to packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-sorting.md index ea66c1b0b..2d437467e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-sorting.md @@ -188,7 +188,6 @@ igc-grid-lite { } ``` - ## Single and multi-sorting The Grid Lite supports both single and multi-column sorting. Multi-column is enabled by default and can be configured through the `sortingOptions` property of the grid. The `mode` property accepts `'single'` or `'multiple'` as values. @@ -369,7 +368,6 @@ igc-grid-lite { } ``` - ## Sort Model The building block for sort operations in the Grid Lite is the `SortingExpression` which has the following properties: @@ -634,7 +632,6 @@ igc-grid-lite { } ``` - ## Remote sort operations In cases where sorting must be done remotely or you want to save the current state/data to a server somewhere, the Grid Lite exposes a hook where you can implement and customize this behavior. @@ -843,7 +840,6 @@ igc-grid-lite { } ``` - @@ -302,7 +301,6 @@ export class RemotePagingService { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - @@ -321,7 +319,7 @@ export class RemotePagingService { ## API References -- [`IgcPaginatorComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginatorcomponent.html) +- [`IgcPaginator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginator.html) - [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-actions.md index 2c33f0dac..1e56833fa 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-actions.md @@ -19,7 +19,7 @@ The Ignite UI for Web Components Row Actions feature in Web Components Grid enab The predefined actions UI components are: -- [`IgcGridEditingActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) option and row deletion of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). +- [`IgcGridEditingActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowEditable) option and row deletion of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). - [`IgcGridPinningActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridpinningactions.html) - includes functionality and UI specifically designed for the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. @@ -56,7 +56,7 @@ These components expose templates giving flexibility for customization. For inst ``` - + @@ -76,7 +76,6 @@ These components expose templates giving flexibility for customization. For inst /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcGridPinningActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridpinningactions.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-adding.md index 5a450404b..bb2c1da87 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-adding.md @@ -27,10 +27,9 @@ Add an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-co /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Row Adding Usage -Then define a [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) set to true and an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#addRow) input controls the visibility of the button that spawns the row adding UI. +Then define a [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowEditable) set to true and an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#addRow) input controls the visibility of the button that spawns the row adding UI. @@ -74,7 +73,7 @@ The internal `BaseTransactionService` is automatically provided for [`grid`](htt -Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#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. +Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#beginAddRowById) requires you to specify the row to use as context for the operation by its `RowID` (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. ```typescript this.grid.beginAddRowById('ALFKI'); // Spawns the add row UI under the row with PK 'ALFKI' @@ -107,9 +106,6 @@ After a new row is added through the row adding UI, its position and/or visibili ## Keyboard Navigation - ALT + + - Enters edit mode for adding a row - - - - ESC exits row adding mode without submitting any changes - TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. @@ -124,7 +120,7 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowAddTextTemplate). +Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowAddTextTemplate). @@ -147,13 +143,13 @@ The row adding UI comprises the buttons in the [`IgcActionStrip`](https://www.in ## API References -- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `RowEditCancel` -- [`endEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#endEdit) -- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#endEdit) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#primaryKey) - [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-drag.md index a696906a4..d22240df1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-drag.md @@ -13,7 +13,7 @@ _premium: true # Row Dragging in Web Components Grid -The Ignite UI for Web Components Row Dragging feature in Web Components Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowDraggable) input. +The Ignite UI for Web Components Row Dragging feature in Web Components Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowDraggable) input. ## Web Components Grid Row Drag Example @@ -90,10 +90,9 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Configuration -In order to enable row-dragging for your [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. +In order to enable row-dragging for your [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. ```html @@ -102,7 +101,7 @@ In order to enable row-dragging for your [`IgcGridComponent`](https://www.infrag ### Templating the Drag Icon -The drag handle icon can be templated using the grid's [`dragIndicatorIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#dragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (**drag_indicator**) to **drag_handle**. ```html @@ -153,9 +152,9 @@ constructor() { > [!Note] -> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. +> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. -Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: +Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@ -246,18 +245,17 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Limitations -Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowDraggable). +Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowDraggable). ## API References -- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowDraggable) +- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowDraggable) - `RowDragStart` - `RowDragEnd` - [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-editing.md index eb019760b..78e472b38 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-editing.md @@ -28,13 +28,12 @@ The following sample demonstrates how to enable row editing in the [`IgcGridComp } ``` - > [!Note] > When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode. ## Row Editing Usage -Define a [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) set to true: +Define a [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowEditable) set to true: @@ -68,7 +67,7 @@ public unitsInStockCellTemplate = (ctx: IgcCellTemplateContext) => { > Setting primary key is mandatory for row editing operations. > [!Note] -> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) property in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) input of that column to `false`. +> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowEditable) property in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) input of that column to `false`. > [!Note] > The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. @@ -182,10 +181,9 @@ Then set the related CSS properties for that class: } ``` - ## Known Issues and Limitations -- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection @@ -197,14 +195,14 @@ Then set the related CSS properties for that class: ## API References -- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` -- [`endEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#endEdit) +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#endEdit) - [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#field) - [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) -- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#primaryKey) - [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-pinning.md index e7d58a635..dc465a0a7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-pinning.md @@ -22,7 +22,6 @@ The Ignite UI for Web Components Row Pinning feature in Web Components Grid allo /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Row Pinning UI The built-in row pinning UI is enabled by adding an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) component with the [`IgcGridPinningActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridpinningactions.html) component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. @@ -47,7 +46,7 @@ The built-in row pinning UI is enabled by adding an [`IgcActionStrip`](https://w ## Row Pinning API -Row pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pinned) input of the `Row`. Pinned rows are rendered at the top of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) by default and stay fixed through vertical scrolling of the unpinned rows in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) body. +Row pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrow.html#pinned) input of the `Row`. Pinned rows are rendered at the top of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) by default and stay fixed through vertical scrolling of the unpinned rows in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) body. ```typescript this.grid.getRowByIndex(0).pinned = true; @@ -60,7 +59,7 @@ 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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. +Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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` event and changing the `InsertAtIndex` property of the event arguments to the desired position index. @@ -83,7 +82,7 @@ public rowPinning(event) { ## Pinning Position -You can change the row pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#pinning) configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom. ```html @@ -153,7 +152,6 @@ public togglePinning(index: number) { } ``` - @@ -199,11 +197,10 @@ Then set the related CSS properties for that class: } ``` - ## API References - [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) -- [`IgcGridRowComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrowcomponent.html) +- [`IgcGridRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrow.html) - [`IgcRowType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowtype.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-selection.md index d6c88ef11..85f4ecaf5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-row-selection.md @@ -116,7 +116,6 @@ export class FinancialDataAll extends Array { } ``` - ## Setup In order to setup row selection in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), you just need to set the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection) property. This property accepts `GridSelectionMode` enumeration. @@ -419,7 +418,6 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Excel Style Row Selectors Demo @@ -472,7 +470,6 @@ export class CustomersData extends Array { } ``` - ### Conditional Selection Demo @@ -519,11 +516,10 @@ export class CustomersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) -- [`IgcGridRowComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrowcomponent.html) +- [`IgcGridRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridrow.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-search.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-search.md index 9ecf62c6b..ed1b23100 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-search.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-search.md @@ -75,7 +75,6 @@ export class MarketData extends Array } ``` - ## Web Components Search Usage ### Grid Setup @@ -125,9 +124,9 @@ Great, and now let's prepare for the search API of our [`IgcGridComponent`](http ### Web Components Search Box Input -Now let's create our search input! By getting the input element we can get its current value. This will allow us to use the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s [`findNext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#findNext) and [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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). +Now let's create our search input! By getting the input element we can get its current value. This will allow us to use the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s [`findNext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findNext) and [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#findPrev) methods have three arguments: +Both the [`findNext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findPrev) methods have three arguments: - `Text`: **string** (the text we are searching for) - (optional) `CaseSensitive`: **boolean** (should the search be case sensitive or not, default value is false) @@ -158,7 +157,7 @@ public nextSearch(){ ### 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findPrev) methods inside the buttons' respective click event handlers. ```html @@ -183,7 +182,7 @@ public nextSearch() { ### 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findPrev) methods depending on which key the user has pressed. ```typescript constructor() { @@ -299,7 +298,7 @@ public updateSearch() { } ``` -- For the search navigation buttons, we have added two 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#findPrev) methods. +- For the search navigation buttons, we have added two 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findPrev) methods. ```html
@@ -343,10 +342,10 @@ In this article we implemented our own search bar for the [`IgcGridComponent`](h [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) methods: -- [`findNext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#findNext) -- [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#findPrev) -- [`clearSearch`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clearSearch) -- [`refreshSearch`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#refreshSearch) +- [`findNext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findNext) +- [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#findPrev) +- [`clearSearch`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#clearSearch) +- [`refreshSearch`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#refreshSearch) [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md index d4041c6ea..95d830d67 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md @@ -18,7 +18,7 @@ With the Ignite UI for Web Components Select feature in Web Components Grid you - Cell selection - Column selection -With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection) property, you can specify: +With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowSelection) property, you can specify: - None - Single @@ -33,18 +33,17 @@ The sample below demonstrates three types of **cell selection** behaviors in the /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Grid Selection Options -The Ignite UI for Web Components [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) 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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#selectable) properties. +The Ignite UI for Web Components [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) 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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#selectable) properties. ### Web Components Grid Row Selection -Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection) enables you to specify the following options: +Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowSelection) enables you to specify the following options: - `None` - Row selection would be disabled for the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). - `Single` - Selection of only one row within the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) would be available. @@ -54,7 +53,7 @@ Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-co ### Web Components Grid Cell Selection -Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#cellSelection) enables you to specify the following options: +Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#cellSelection) enables you to specify the following options: - `None` - Cell selection would be disabled for the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). - `Single` - Selection of only one cell within the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) would be available. @@ -371,12 +370,11 @@ export class NwindData extends Array { } ``` - ## Known Issues and Limitations -When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection - Row Expand/collapse diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-size.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-size.md index 762254d11..32b7d530d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-size.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-size.md @@ -77,7 +77,6 @@ export class InvoicesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage As you can see in the demo above, the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set `--ig-size` either inline or part of a CSS class: @@ -93,11 +92,11 @@ As you can see in the demo above, the [`IgcGridComponent`](https://www.infragist ``` -And now let's see in details how each option reflects on the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component. When you switch between different size options the height of each [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width), please consider the fact that it must be bigger than the sum of left and right padding: +And now let's see in details how each option reflects on the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) component. When you switch between different size options the height of each [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width), please consider the fact that it must be bigger than the sum of left and right padding: -- **large** - this is the default [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is `80px`; -- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is `64px`; -- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is `56px`; +- **large** - this is the default [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) is `80px`; +- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) is `64px`; +- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) is `56px`; > [!Note] > Please keep in mind that currently you **can not** override any of the sizes. @@ -213,16 +212,14 @@ public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptio } ``` -Another option that [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) provides for you, in order to be able to change the height of the rows in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowHeight). So let's see in action how this property affects the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) layout along with the `--ig-size`. +Another option that [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) provides for you, in order to be able to change the height of the rows in the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowHeight). So let's see in action how this property affects the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) layout along with the `--ig-size`. 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowHeight) specified**. +- `--ig-size` CSS variable will have no impact on row height **if there is [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowHeight) specified**. - `--ig-size` will **affect all of the rest elements in the Grid**, as it has been described above. -We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowHeight) property to the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html): - - +We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#rowHeight) property to the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html): ```html diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-sizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-sizing.md index d582d07e5..d769312e5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-sizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-sizing.md @@ -12,23 +12,23 @@ _premium: true # Web Components Grid Sizing -The Ignite UI for Web Components Sizing feature in Web Components Grid is an important aspect of creating responsive and user-friendly grid interfaces. The Web Components Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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. +The Ignite UI for Web Components Sizing feature in Web Components Grid is an important aspect of creating responsive and user-friendly grid interfaces. The Web Components Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. > [!Note] > If the Border box sizing is overridden by the user we cannot guarantee that the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) will size correctly. ## Web Components Grid Width -If the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) input does not have value assigned, its default value is `100%` and the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. +If the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) input does not have value assigned, its default value is `100%` and the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. > [!Note] -> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) style of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) itself will result in an unexpected behavior. +> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) style of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) itself will result in an unexpected behavior. ### Null -The grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#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. +The grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. +- If there are 6 columns and none of them has width defined, the grid will have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. columns-default-gridWidth-null-v2 @@ -49,9 +49,9 @@ The grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-compone ### Pixels -When the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content: -- When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width). Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. +- 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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#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-v2 @@ -62,9 +62,9 @@ When the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-we ### Percentages -When the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) will size relative to the browser window. +When the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) will size relative to the browser window. -- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#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. +- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#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-100p-v2 @@ -72,7 +72,7 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-web-component width-percent-parent-100p-v2 -- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. +- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. width-percent-150p-parent-noscroll-v2 width-percent-150p-parent-scroll-v2 @@ -82,11 +82,11 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-web-component By default if no height is defined for the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), it will be set to `100%`. You can check how the grid reacts depending on the DOM structure in the `Percentages` section. > [!Note] -> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) style of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) itself will result in an unexpected behavior. +> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height) style of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) itself will result in an unexpected behavior. ### Null -The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height) input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway. - If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. @@ -96,7 +96,7 @@ The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-com height-null-24rows-v2 -- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: +- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: height-null-24rows-parent-noscroll-v2 height-null-24rows-parent-scroll-v2 @@ -106,28 +106,28 @@ The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-com ### Pixels -Setting the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is set in pixels. +Setting the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#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-4rows-v2 -- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: +- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: height-500px-14rows-v2 -- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. +- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. height-700px-14rows-parent-noscroll-v2 height-700px-14rows-parent-scroll-v2 ### Percentages -When the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) input is set to percentages, the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) set in pixels or percentages, the grid will size relative to the size of the parent. +When the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height) input is set to percentages, the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `1200px` and the parent element not having any size applied to it: +Let's have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#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. @@ -141,7 +141,7 @@ Let's have [`width`](https://www.infragistics.com/products/ignite-ui-web-compone height-percent-100-parent-800px-v2 -- If the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height) is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. height-percent-130p-parent-noscroll-v2 height-percent-130p-parent-scroll-v2 @@ -160,7 +160,7 @@ By default when a column doesn't have a specified width it will try to autosize, 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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) and the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) and the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) `null` and 6 columns that don't have width, each column will be sized to `136px`. columns-default-gridWidth-null-v2 @@ -168,15 +168,15 @@ When the grid is resized in these scenarios, the column width is also updated to columns-default-all-row-selectors-v2 -- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `1000px`. +- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) set to `1000px`. columns-default-all-min-136px-v2 -- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of `100px`, the first will fill the rest. +- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) of `100px`, the first will fill the rest. columns-default-first-rest-100px-v2 -- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `100px`. +- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) set to `100px`. columns-default-all-first-100px-v2 @@ -185,19 +185,19 @@ When the grid is resized in these scenarios, the column width is also updated to ### Pixels -When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of the columns is static, it can be less than the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) or exceed it. +When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) of the columns is static, it can be less than the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) or exceed it. -- If the combined `width` of all columns is less than the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). In the next example the columns have `150px` width. +- If the combined `width` of all columns is less than the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). In the next example the columns have `150px` width. columns-150px-empty-area-v2 -- If the combined [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of all columns is bigger than the actual [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) of all columns is bigger than the actual [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width), a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. columns-150px-extra-area-v2 ### Percentages -When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. +When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. - If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. @@ -211,7 +211,7 @@ When columns have set [`width`](https://www.infragistics.com/products/ignite-ui- columns-percent-bigger-100p-v2 -- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `50%`: +- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) set to `50%`: columns-percent-gridWidth-null-v2 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-sorting.md index 8cb793658..fa1eaa5ae 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-sorting.md @@ -52,7 +52,6 @@ export class ProductSales extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - This is done via the [`sortable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortable) input. With the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) sorting, you can also set the [`sortingIgnoreCase`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortingIgnoreCase) property to perform case sensitive sorting: ```html @@ -130,10 +129,9 @@ export class FinancialDataAll extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Sorting through the API -You can sort any column or a combination of columns through the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) API using the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`sort`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sort) method: +You can sort any column or a combination of columns through the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) API using the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) [`sort`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#sort) method: ```typescript import { SortingDirection } from 'igniteui-webcomponents-grids'; @@ -158,7 +156,7 @@ this.grid.sort([ > [!Note] > Sorting is performed using our `DefaultSortingStrategy` algorithm. Any [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) or `ISortingExpression` can use a custom implementation of the `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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clearSort) method: +As with the filtering behavior, you can clear the sorting state by using the [`clearSort`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#clearSort) method: @@ -173,14 +171,14 @@ this.grid.clearSort(); > [!Note] -> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortStrategy) of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortStrategy) of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html), since they work in different scopes and expose different parameters. +> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortStrategy) of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#sortStrategy) of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html), since they work in different scopes and expose different parameters. > [!Note] > The sorting operation **DOES NOT** change the underlying data source of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). ## Initial Sorting State -It is possible to set the initial sorting state of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortingExpressions) property of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). +It is possible to set the initial sorting state of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#sortingExpressions) property of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html). ```typescript public connectedCallback() { @@ -204,7 +202,7 @@ public connectedCallback() { The sorting indicator icon in the column header can be customized using a template. The following properties are available for templating the sorting indicator for any sorting state (ascending, descending, none): -- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. +- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. ```ts constructor() { @@ -218,7 +216,7 @@ public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => { } ``` -- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. +- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. ```ts constructor() { @@ -232,7 +230,7 @@ public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => } ``` -- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. +- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. ```ts constructor() { @@ -307,7 +305,6 @@ export class ProductSales extends Array { } ``` - ## API References - [`IgcSortingExpression`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcsortingexpression.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-state-persistence.md index 2afe07307..156f633e5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-state-persistence.md @@ -13,11 +13,11 @@ _premium: true # Web Components Grid State Persistence -The Ignite UI for Web Components State Persistence in Web Components Grid allows developers to easily save and restore the grid state. When the [`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) is applied on the Web Components [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState), [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString), [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState) and [`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) methods that developers can use to achieve state persistence in any scenario. +The Ignite UI for Web Components State Persistence in Web Components Grid allows developers to easily save and restore the grid state. When the [`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) is applied on the Web Components [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html), it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState), [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString), [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState) and [`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) methods that developers can use to achieve state persistence in any scenario. ## Supported Features -[`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) supports saving and restoring the state of the following features: +[`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) supports saving and restoring the state of the following features: @@ -42,9 +42,9 @@ The Ignite UI for Web Components State Persistence in Web Components Grid allows ## Usage -The [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState) method returns the grid state in a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object, containing all the state info. Additional steps may be required in order to save it. +The [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState) method returns the grid state in a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object, containing all the state info. Additional steps may be required in order to save it. -The [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) returns a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). +The [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) returns a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). The developer may choose to get only the state for a certain feature/features, by passing in an array with feature names as an argument. Empty array will result to using the default state options. @@ -73,9 +73,9 @@ const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', -[`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState) - The method accepts a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object as argument and will restore the state of each feature found in the object or specified features as second argument. +[`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState) - The method accepts a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object as argument and will restore the state of each feature found in the object or specified features as second argument. -[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) - The method accepts a serialized JSON string as argument and will restore the state of each feature found in the JSON string or specified features as second argument. +[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) - The method accepts a serialized JSON string as argument and will restore the state of each feature found in the JSON string or specified features as second argument. ```typescript gridState.applyState(gridState); @@ -83,7 +83,7 @@ gridState.applyStateFromString(gridStateString); gridState.applyState(sortingFilteringStates) ``` -The [`options`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatebasedirective.html#options) object implements the [`IgcGridStateOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateoptions.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState)/[`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) methods will not put the state of these features in the returned value and [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState)/[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) methods will not restore state for them. +The [`options`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatebasedirective.html#options) object implements the [`IgcGridStateOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateoptions.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState)/[`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) methods will not put the state of these features in the returned value and [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState)/[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) methods will not restore state for them. ```typescript gridState.options = { cellSelection: false, sorting: false }; @@ -141,12 +141,11 @@ public restoreGridStateString() { } ``` - ## Limitations -- [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the [`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) component will ignore the columns [`formatter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#formatter), [`filters`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotconfiguration.html#filters), `Summaries`, `SortStrategy`, `CellClasses`, `CellStyles`, `HeaderTemplate` and `BodyTemplate` properties. +- [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the [`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) component will ignore the columns [`formatter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#formatter), [`filters`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotconfiguration.html#filters), `Summaries`, `SortStrategy`, `CellClasses`, `CellStyles`, `HeaderTemplate` and `BodyTemplate` properties. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-summaries.md index 45a90738c..232f48bf9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-summaries.md @@ -22,7 +22,6 @@ The Ignite UI for Web Components Summaries feature in Web Components Grid functi /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - > [!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** @@ -334,7 +333,6 @@ export class NwindData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - @@ -412,7 +410,6 @@ When a default summary is defined, the height of the summary area is calculated } ``` - ## Disabled Summaries The `disabled-summaries` property provides precise per-column control over the Web Components Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgcGrid, 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. @@ -825,7 +822,6 @@ igc-dialog::part(title) { } ``` - ## 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs). When using custom operands, the [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) and [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#summaryFormatter) property. @@ -861,7 +857,6 @@ constructor() { } ``` - ## Summaries with Group By @@ -942,7 +937,6 @@ export class InvoicesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Keyboard Navigation @@ -1047,7 +1041,6 @@ export class InvoicesData extends Array { } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-toolbar.md index e6dd91673..31d553520 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-toolbar.md @@ -13,7 +13,7 @@ _premium: true # Web Components Grid Toolbar -The Ignite UI for Web Components Toolbar in is a container for UI operations in the Web Components Grid. The Web Components toolbar is located at the top of the Web Components component, i.e., the [`grid`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html#grid) and it matches its horizontal size. The toolbar container can host any custom content or set of predefined UI controls. The default set for the Web Components Grid includes: +The Ignite UI for Web Components Toolbar in is a container for UI operations in the Web Components Grid. The Web Components toolbar is located at the top of the Web Components component, i.e., the [`grid`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html#grid) and it matches its horizontal size. The toolbar container can host any custom content or set of predefined UI controls. The default set for the Web Components Grid includes: - Column Hiding - Column Pinning @@ -66,10 +66,9 @@ export class AthletesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - -The predefined [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) and [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html) UI components are added inside the [`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: +The predefined [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) and [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html) UI components are added inside the [`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: ```html @@ -88,7 +87,7 @@ The predefined [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/p > [!Note] -> As seen in the code snippet above, the predefined `Actions` UI components are wrapped in the [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. +> As seen in the code snippet above, the predefined `Actions` UI components are wrapped in the [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) container. 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: @@ -151,12 +150,11 @@ export class AthletesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Title -Setting a title for the toolbar in your grid is achieved by using the [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html). +Setting a title for the toolbar in your grid is achieved by using the [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html). Users can provide anything from simple text to more involved templates. @@ -172,7 +170,7 @@ Users can provide anything from simple text to more involved templates. ### Actions -The [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) is where users can place actions/interactions in relation to the parent grid. +The [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) is 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. @@ -190,7 +188,7 @@ toolbar interaction components. ### Column Pinning -The [`IgcGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinningcomponent.html) component provides the default UI for interacting with column pinning in the grid. +The [`IgcGridToolbarPinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinning.html) component 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. @@ -212,7 +210,7 @@ The component is setup to work out of the box with the parent grid containing th ### Column Hiding -The [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component +The [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. @@ -249,7 +247,7 @@ Toolbar Advanced Filtering component provides the default UI for the Advanced Fi ### Data Exporting -As with the rest of the toolbar actions, exporting is provided through a [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) out of the box. +As with the rest of the toolbar actions, exporting is provided through a [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) out of the box. The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience. @@ -348,12 +346,11 @@ export class AthletesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html#showProgress) property and use for their own long running operations or just as another way to signify an action taking place in the grid. +Moreover, users can set the toolbar [`showProgress`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html#showProgress) property and use for their own long running operations or just as another way to signify an action taking place in the grid. The sample belows uses has significant amount of data, in order to increase the time needed for data export so the progressbar can be seen. Additionally it has another button that simulates a long running operation in the grid: @@ -399,7 +396,6 @@ export class AthletesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Custom Content If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable. @@ -466,7 +462,6 @@ export class AthletesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -534,19 +529,18 @@ export class AthletesData extends Array { } ``` - ## API References The Grid Toolbar service has a few more APIs to explore, which are listed below. - [`IgcGridToolbarAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaradvancedfiltering.html) -- [`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) -- [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) -- [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) -- [`IgcGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinningcomponent.html) -- [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html) +- [`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) +- [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) +- [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) +- [`IgcGridToolbarPinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinning.html) +- [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html) -[`grid`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html#grid) Events: +[`grid`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html#grid) Events: - `ToolbarExporting` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-virtualization.md index 661106758..34647d82c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-virtualization.md @@ -108,19 +108,18 @@ export class FinancialDataAll extends Array { } ``` - ## Enabling Virtualization -The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) 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. The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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. +The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) 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. The [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) is `null`). +However, it is also possible to explicitly set the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#height) is `null`). The size of the data chunks is determined by: -- The row height for the vertical (row) virtualization. This is determined by the [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.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 [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html#columnWidth) option, which will be applied to all columns that don't have explicit width set. In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html)'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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grids-theming.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grids-theming.md deleted file mode 100644 index 7fd874aec..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grids-theming.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: Web Components Grid theming | Real-Time Web Components Tables | The Lightweight Web Components Web Components table | Infragistics -_description: . -_keywords: Web Components data grid, infragistics, data grids theming, theming, Ignite UI for Web Components, table -_license: commercial -mentionedTypes: ["Infragistics.Controls.Grid.Implementation.Grid"] -namespace: Infragistics.Controls -_tocName: Theming -_premium: true ---- - -# Theme Web Components Data Grid - -With the Web Components Theming engine, the Ignite UI for Web Components Grid can be easily customized to match your brand identity. -In addition to predefined themes and palettes, you can further customize the look and feel of your data grid by using a set of CSS custom properties. - -## Available Theming Properties - -| Property name | Type | Description | -|------------------------------------------|--------------------------|----------------------------------------------------------------------------------------------| -| --grid-elevation | number between 0-24 | The elevation level, to be used for the grid | -| --drag-elevation | number between 0-24 | The elevation level, to be used for movable elements (ex. column header) | -| --grouparea-color | color | The grid group area text color | -| --grouparea-background | color | The grid group area text color | -| --drop-area-text-color | color | The drop area text color | -| --drop-area-icon-color | color | The drop area icon color | -| --drop-area-background | color | The drop area background color | -| --drop-area-on-drop-background | color | The drop area background on drop color | -| --header-background | color | The grid header background color | -| --header-text-color | color | The grid header text color | -| --header-selected-background | color | The grid header background color when selected (ex. column selection). | -| --header-selected-text-color | color | The grid header text color when selected (ex. column selection). | -| --sortable-header-icon-hover-color | color | The icon color on hover in grid header when the column is sortable. | -| --sorted-header-icon-color | color | The sorted table header icon color | -| --header-border-width | border-width | The border width used for header borders. | -| --header-border-style | border-style | The border style used for header borders. Can be 'dotted', 'dashed' or 'solid' | -| --header-border-color | color | The color used for header borders. | -| --ghost-header-background | color | The dragged header background color. | -| --ghost-header-text-color | color | The dragged header text color. | -| --ghost-header-icon-color | color | The dragged header icon color. | -| --filtering-background-and | color | The background color of advanced filtering "AND" condition. | -| --filtering-background-or | color | The background color on focus/selected of advanced filtering "AND" condition. | -| --filtering-background-and--focus | color | The background color of advanced filtering "OR" condition. | -| --filtering-background-or--focus | color | The background color on focus/selected of advanced filtering "OR" condition. | -| --grid-border-color | color | The border color surrounding the grid. | -| --content-background | color | The grid body background color. | -| --content-text-color | color | The grid body text color. | -| --row-odd-background | color | The background color of odd rows. | -| --row-even-background | color | The background color of even rows. | -| --row-odd-text-color | color | The text color of odd rows. | -| --row-even-text-color | color | The text color of even rows. | -| --row-selected-background | color | The selected row background color. | -| --tree-selected-filtered-row-text-color | color | The selected/filtered row text color | -| --row-selected-text-color | color | The selected row text color. | -| --cell-selected-within-background | color | The background of the selected cell inside a selected row/column. | -| --cell-selected-within-text-color | color | The color of the selected cell inside a selected row/column. | -| --row-selected-hover-background | color | The selected row hover background. | -| --row-selected-hover-text-color | color | The selected row hover tex | -| --row-hover-background | color | The hover row background color. | -| --row-hover-text-color | color | The hover row text color. | -| --row-border-color | color | The border color between the grid body rows. | -| --pinned-border-width | border-width | The border width of the pinned rows/columns. | -| --pinned-border-style | border-style | The border style of the pinned rows/columns. Can be 'dotted', 'dashed' or 'solid' | -| --pinned-border-color | color | The border color of the pinned rows/columns. | -| --cell-active-border-color | color | The active(focused) cell border color. | -| --cell-selected-background | color | The selected cell background color. | -| --tree-selected-filtered-cell-text-color | color | The selected/filtered cell text color | -| --cell-selected-text-color | color | The selected cell text color. | -| --cell-editing-background | color | The background color of a cell in edit mode. | -| --edit-mode-color | color | The text color in edit mode | -| --edited-row-indicator | color | The indicator's color of edited row. | -| --cell-new-color | color | The text color of a new, unedited cell. Used when adding new row in a grid. | -| --cell-edited-value-color | color | The color of cell edited value. | -| --cell-disabled-color | color | The text color of a disabled cell. | -| --resize-line-color | color | The grid header resize line color. | -| --drop-indicator-color | color | The color of the drop indicator. | -| --group-label-column-name-text | color | The grid group row column name text color. | -| --group-label-icon | color | The grid group row icon color. | -| --group-label-text | color | The grid group row text color. | -| --expand-all-icon-color | color | The grid header expand all group rows icon color. | -| --expand-all-icon-hover-color | color | The grid header expand all group rows icon hover color. | -| --expand-icon-color | color | The grid row expand icon color. | -| --expand-icon-hover-color | color | The grid row expand icon hover color. | -| --active-expand-icon-color | color | The drop area background on drop color. | -| --active-expand-icon-hover-color | color | The drop area background on drop color. | -| --group-count-background | color | The grid group row cont badge background color. | -| --group-count-text-color | color | The grid group row cont badge text color. | -| --group-row-background | color | The grid group row background color. | -| --group-row-selected-background | color | The drop area background on drop color. | -| --filtering-header-background | color | The background color of the filtered column header. | -| --filtering-header-text-color | color | The text color color of the filtered column header. | -| --filtering-row-background | color | The background color of the filtering row. | -| --filtering-row-text-color | color | The text-color color of the filtering row. | -| --tree-filtered-text-color | color | The grouping row background color on focus. | -| --body-summaries-background | color | The background color of the summary groups located the body. | -| --body-summaries-text-color | color | The text color of the summary groups located the body. | -| --root-summaries-background | color | The background color of the summary groups located the footer. | -| --root-summaries-text-color | color | The text color of the summary groups located the footer. | -| --row-highlight | color | The grid row highlight color. | -| --row-ghost-background | color | The background color of the dragged row. | -| --row-drag-color | color | The color of the drag handle. | -| --drop-area-border-radius | number between 0 and 1 | The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. | - -## How to use - -As mentioned above Using the CSS vars from the table allow us to style our grid. Let's say that we want to change the grid to use a Dark Theme, by changing the following header background and text colors etc., we can do that like so in a file optionally called dark-theme.css. - -import "./dark-theme.css"; - -```css -.ig-data-grid { - /* shared variables used in custom properties */ - --cell-text-color:#58258b; - --cell-background:#191919; - --cell-selected-background: #58258b; - --cell-selected-within-text-color: #191919; - --cell-selected-within-background: #58258b; - - --row-selected-background:var(--cell-selected-background); - --row-hover-background:var(--cell-selected-background); - --row-hover-text-color:var(--cell-background); - - --header-background: #58258b; - --header-text-color: #191919; - --header-separator-background: #58258b; - --header-separator-width: 5px; - - --section-header-background: #191919; - --section-header-text-color: #58258b; - --section-header-selected-background: #58258b; - --section-header-selected-text-color: #191919; - - --row-separator-background: #191919; - --row-separator-last-sticky-row-background: #191919; - --row-separator-pinned-row-background: #58258b; - --row-separator-sticky-row-background: #58258b; - - --column-resizing-separator-background: #58258b; - --column-moving-separator-background: #58258b; - - - --filtering-header-background: #272727; - --filtering-header-text-color: #ffffff; - --filtering-row-background: #272727; - --filtering-row-text-color: #ffffff; - --tree-filtered-text-color: #ffffff; - - --summary-root-background: #7446b9; - --summary-root-label-text-color: #191919; - --summary-root-value-text-color: #191919; -} - -.ig-grid-column-options { - --background-color: black; - --text-color: #7446b9; - --summary-list-text-color: #7446b9; - --summary-list-background: #191919; -} - -.ig-data-grid-toolbar { - --background-color: #191919; - --text-color: #58258b; - --dialog-background-color: #191919; -} - -.ig-column-chooser { - --background-color: #191919; - --title-color: green; - --select-all-caption-text-color: #58258b; - --search-icon-color: #58258b; - --search-text-color: #58258b; - --search-background-color: #191919; - --search-border-color: #58258b; - --search-text-style: 12px 'Courier'; -} - -.ig-column-pinning { - --background-color: white; - --text-color: #7446b9; - --select-all-caption-text-color: #58258b; - --search-icon-color: #58258b; - --search-text-color: #58258b; - --search-background-color: #191919; - --search-border-color: #58258b; - --search-text-style: 12px 'Courier'; -} -``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-advanced-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-advanced-filtering.md index 196ef4a30..646e35d88 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-advanced-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-advanced-filtering.md @@ -22,7 +22,6 @@ The Ignite UI for Web Components Advanced Filtering in Web Components Hierarchic /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Interaction In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. If no advanced filter is applied, you should start with creating a group of filtering conditions linked with **AND** or **OR**. After that, you can add filtering conditions or sub-groups. @@ -37,7 +36,7 @@ In order to filter the data once you are ready with creating the filtering condi ## Usage -To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowAdvancedFiltering) input property should be set to **true**. +To enable the advanced filtering, the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#allowAdvancedFiltering) input property should be set to **true**. @@ -56,7 +55,7 @@ constructor() { -The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. +The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. ```typescript connectedCallback(): void { @@ -85,7 +84,7 @@ connectedCallback(): void { } ``` -In case you don't want to show the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. +In case you don't want to show the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. > [!Note] > You can enable both the **QuickFilter**/**ExcelStyleFilter** and the advanced filtering user interfaces in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). Both filtering user interfaces will work independently of one another. The final filtered result in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) is the intersection between the results of the two filters. @@ -128,7 +127,6 @@ Then set the related CSS properties to this class: } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-editing.md index 8a952d903..8361fcaaf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-editing.md @@ -29,7 +29,6 @@ In addition, you can define your own custom templates for update-data actions an } ``` - ## Cell Editing ### Editing through UI @@ -143,7 +142,6 @@ Working sample of the above can be found here for further reference: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## CRUD operations > [!Note] @@ -170,7 +168,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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#updateCell) methods but **only if the PrimaryKey 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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#updateCell) methods but **only if the PrimaryKey for the grid is defined**. You can also directly update a cell and/or a row value through their respective **update** methods. @@ -193,7 +191,7 @@ row.update(newData); ### Deleting data from the Hierarchical Grid -Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) is defined. +Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#primaryKey) is defined. @@ -227,6 +225,8 @@ constructor() { The `CellEdit` emits whenever **any** cell's value is about to be committed. In our **CellEdit** definition, we need to make sure that we check for our specific column before taking any action: + + If the value entered in a cell under the **Units On Order** column is larger than the available amount (the value under **Units in Stock**), the editing will be cancelled and the user will be alerted to the cancellation. @@ -238,18 +238,12 @@ If the value entered in a cell under the **Units On Order** column is larger tha ```typescript -public webHierarchicalGridCellEdit(event: CustomEvent): void { - const today = new Date(); - const column = event.detail.column; - if (column.field === 'Debut') { - if (event.detail.newValue > today.getFullYear()) { - event.detail.cancel = true; - alert('The debut date must be in the past!'); - } - } else if (column.field === 'LaunchDate') { - if (event.detail.newValue > today) { - event.detail.cancel = true; - alert('The launch date must be in the past!'); + public webGridEditingEventsCellEdit(args: CustomEvent): void { + var d = args.detail; + if (d.column != null && d.column.field == "UnitsOnOrder") { + if (d.newValue > d.rowData.UnitsInStock) { + d.cancel = true; + alert("You cannot order more than the units in stock!") } } } @@ -268,7 +262,6 @@ The result of the above validation being applied to our [`IgcHierarchicalGridCom } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -309,13 +302,9 @@ Then set the related CSS properties for that class: } ``` - ## API References - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) - - - - [`IgcDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-merging.md index 041d2a450..13b338757 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-merging.md @@ -24,7 +24,6 @@ The Ignite UI for Web Components Hierarchical Grid provides a Cell Merging featu /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Enabling and Using Cell Merging @@ -133,7 +132,6 @@ Once defined, assign the strategy to the grid through the `mergeStrategy` proper /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Feature Integration diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-selection.md index 2c2f4b8f4..f4c0c14c2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-cell-selection.md @@ -36,7 +36,6 @@ The sample below demonstrates the three types of [`IgcHierarchicalGridComponent` /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Selection Types ### Hierarchical Grid Multiple-Cell Selection @@ -59,13 +58,13 @@ How to select cells: ### Hierarchical Grid Single Selection -When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#cellSelection) to **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. +When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#cellSelection) to **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. > When single cell is selected [`selected`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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` event is emitted. ### Hierarchical Grid None Selection -If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#cellSelection) to **none**. 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. +If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#cellSelection) to **none**. 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 @@ -94,7 +93,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Select range -[`selectRange`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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. ```ts const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 }; @@ -105,7 +104,7 @@ this.grid.selectRange(range); ### Clear cell selection -[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clearCellSelection) will clear the current cell selection. +[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#clearCellSelection) will clear the current cell selection. ```ts this.grid.clearCellSelection(); @@ -113,7 +112,7 @@ this.grid.clearCellSelection(); ### Get Selected Data -[`getSelectedData`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#getSelectedData) will return array of the selected data in format depending on the selection. Examples below: +[`getSelectedData`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#getSelectedData) will return array of the selected data in format depending on the selection. Examples below: - If three different single cells are selected: @@ -183,7 +182,7 @@ The multi-cell selection is index based (DOM elements selection). - `Filtering` - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells. - `Resizing` - On column resizing selected cells will not be cleared. - `Hiding` - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected. -- [`pinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#pinning) - Selected cell will not be cleared. Same as hiding +- [`pinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#pinning) - Selected cell will not be cleared. Same as hiding - `GroupBy` - On column grouping selected cells will not be cleared. @@ -225,7 +224,6 @@ Then set the related CSS properties for that class: } ``` - ## API References - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-collapsible-column-groups.md index d85554b98..7bfb0a761 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-collapsible-column-groups.md @@ -22,7 +22,6 @@ The Ignite UI for Web Components Collapsible Column Groups feature in Web Compon /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Setup To get started with the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) and the **Collapsible multi-column headers** feature, first you need to install Ignite UI for Web Components by typing the following command: @@ -40,9 +39,9 @@ Also, we strongly suggest that you take a brief look at [multi-column headers](m **Collapsible Column Groups** is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. -In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#columnGroup) to **true**. +In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#columnGroup) to **true**. -You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. +You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. Let's see the markup below: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-hiding.md index a019a426e..b37011143 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-hiding.md @@ -22,7 +22,6 @@ The Ignite UI for Web Components has a built-in column hiding UI, which can be u /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Hierarchical Grid Setup Let's start by creating our [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) and binding it to our data. We will also enable both filtering and sorting for the columns. @@ -43,7 +42,7 @@ Let's start by creating our [`IgcHierarchicalGridComponent`](https://www.infragi The built-in Column Hiding UI is placed inside an `DropDown` in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'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 [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) and the [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) inside of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). +For this purpose all we have to do is set both the [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) and the [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) inside of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). @@ -197,7 +196,6 @@ Then set the related CSS variables for the related components. We will apply the } ``` - ## API References In this article we learned how to use the built-in column hiding UI in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'s toolbar. The column hiding UI has a few more APIs to explore, which are listed below. @@ -210,15 +208,15 @@ Additional components with relative APIs that were used: - [`disableHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#disableHiding) -[`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) properties: +[`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) properties: - `showProgress` -[`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) methods: +[`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) methods: -- [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) -- [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) -- [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html) +- [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) +- [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) +- [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html) [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) events: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-moving.md index 2e5b3e48c..a7f79422d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-moving.md @@ -39,10 +39,9 @@ public headerTemplate = (ctx: IgcCellTemplateContext) => { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Overview -**Column moving** feature is enabled on a per-grid level, meaning that the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#moving) input of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). +**Column moving** feature is enabled on a per-grid level, meaning that the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#moving) input of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). ```html @@ -57,7 +56,7 @@ public headerTemplate = (ctx: IgcCellTemplateContext) => { In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: -[`moveColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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` value), which determines whether to place the column before or after the target column. +[`moveColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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` value), which determines whether to place the column before or after the target column. ```typescript // Move the ID column after the Name column @@ -75,7 +74,7 @@ const idColumn = grid.getColumnByName("ID"); idColumn.move(3); ``` -Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`moving`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#moving) property to true. +Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`moving`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#moving) property to true. ## Events @@ -139,7 +138,6 @@ Then set the related CSS properties to this class: } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-pinning.md index 128b217d5..852bcd265 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-pinning.md @@ -24,7 +24,6 @@ This example demonstrates how you can pin a column or multiple columns to the le /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Column Pinning API Column pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pinned) property of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html). Pinned columns are rendered on the left side of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) body. @@ -39,7 +38,7 @@ Column pinning is controlled through the [`pinned`](https://www.infragistics.com -You may also use the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#unpinColumn) methods of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) to pin or unpin columns by their field name: +You may also use the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#unpinColumn) methods of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) to pin or unpin columns by their field name: @@ -80,7 +79,7 @@ public columnPinning(event) { ## Pinning Position -You can change the column pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#pinning) configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right. ```html @@ -99,7 +98,6 @@ grid.pinning = { columns: ColumnPinningPosition.End }; /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. @@ -109,7 +107,6 @@ Additionally, you can specify each column pinning location separately, allowing /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. @@ -187,7 +184,6 @@ public toggleColumn(col: IgcColumnComponent) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) 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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). @@ -228,7 +224,6 @@ Then set the related CSS properties to this class: } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-resizing.md index 0688600d0..80ba14550 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-resizing.md @@ -22,7 +22,6 @@ The Ignite UI for Web Components Column Resizing feature in Web Components Hiera /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - **Column resizing** is also enabled per-column level, meaning that the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#resizable) input of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html). ```html @@ -151,7 +150,6 @@ This approach is more performance optimized than auto-sizing post initialization /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -180,7 +178,6 @@ Then set the related CSS property for that class: } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-selection.md index f9dd8b719..119e294e7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-selection.md @@ -13,7 +13,7 @@ _premium: true # Web Components Hierarchical Grid Column Selection Overview -The Web Components Hierarchical Grid Column Selection feature in Ignite UI for Web Components offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. +The Web Components Hierarchical Grid Column Selection feature in Ignite UI for Web Components offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. ## Web Components Hierarchical Grid Column Selection Example @@ -30,10 +30,9 @@ The sample below demonstrates the three types of [`IgcHierarchicalGridComponent` /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Basic Usage -The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#columnSelection) input, which takes `GridSelectionMode` values. +The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#columnSelection) input, which takes `GridSelectionMode` values. ## Interactions @@ -53,11 +52,10 @@ The default selection mode is `None`. If set to `Single` or `Multiple`, all of t /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Keyboard Combinations > [!Note] -> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#columnSelection) input is set to `multiple`. +> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#columnSelection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: @@ -113,7 +111,6 @@ Then set the related CSS properties to this class: } ``` - ## API References The column selection UI has a few more APIs to explore, which are listed below. @@ -124,12 +121,12 @@ The column selection UI has a few more APIs to explore, which are listed below. [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) properties: -- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#columnSelection) -- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#selectedColumns) -- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#selectColumns) -- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#deselectColumns) -- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#selectAllColumns) -- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#deselectAllColumns) +- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#columnSelection) +- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#selectedColumns) +- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#selectColumns) +- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#deselectColumns) +- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#selectAllColumns) +- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#deselectAllColumns) [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-types.md index d6bf3be1e..8180b5c79 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-column-types.md @@ -27,7 +27,7 @@ This column [`dataType`](https://www.infragistics.com/products/ignite-ui-web-com ### Number -If the [`dataType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: +If the [`dataType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: - Number of digits after the decimal point - Decimal separator with `,` or `.` @@ -52,7 +52,7 @@ constructor() { ### 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: +The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: - **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc. - **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: @@ -148,7 +148,7 @@ Default template is using the value coming from the data as an image source to a ``` -When [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#autoGenerate) is used for the 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 [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#autoGenerate) is used for the 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. ### Currency @@ -274,7 +274,7 @@ public formatCurrency(value: number) { - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) - [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) -- [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) +- [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#locale) - [`dataType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#dataType) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-conditional-cell-styling.md index 06db79f4a..993daa7a3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-conditional-cell-styling.md @@ -19,14 +19,14 @@ The Ignite UI for Web Components Conditional Styling feature in Web Components H The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component in Ignite UI for Web Components provides two ways to **conditional styling of rows** based on custom rules. -- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowClasses) input on the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component; -- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowStyles) input on the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component; +- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowClasses) input on the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component; +- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowStyles) input on the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component; Further in this topic we will cover both of them in more details. ### Using Row Classes -You can conditionally style the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowClasses) input and define custom rules. +You can conditionally style the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowClasses) input and define custom rules. ```html @@ -40,17 +40,17 @@ constructor() { } ``` -The [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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. ```ts public rowClasses = { - activeRow: (row: IgcRowType) => row.index === 0 + activeRow: (row: IgcRowType) => row.index % 2 === 0 } ``` ```css .activeRow { - border: 2px solid #fc81b8; + border-top: 2px solid #fc81b8; border-left: 3px solid #e41c77; } ``` @@ -67,12 +67,11 @@ public rowClasses = { } ``` - ### Using Row Styles -The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). +The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). -> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowClasses) is: +> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowClasses) is: ```ts (row: IgcRowType) => boolean @@ -119,7 +118,6 @@ constructor() { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Hierarchical Grid Conditional Cell Styling ## Overview @@ -185,7 +183,6 @@ public grammyNominationsCellClassesHandler = { } ``` - - By using the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) input [`cellStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#cellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. > The callback signature for both `cellStyles` and `cellClasses` is now changed to: @@ -233,7 +230,6 @@ constructor() { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## 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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-editing.md index 118521e9b..6fcc5331a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-editing.md @@ -20,7 +20,7 @@ The Ignite UI for Web Components Cell Editing feature in Web Components Hierarch ## Setup -In order to specify which edit mode should be enabled, the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable). +In order to specify which edit mode should be enabled, the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowEditable). The [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) property enables you to specify the following options: @@ -29,12 +29,12 @@ The [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/ > Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). -The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) property enables you to specify the following options: +The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowEditable) property enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled. This is the default value. - **true** - the row editing in the corresponding grid will be enabled. -In the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. +In the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. All available column data types could be found in the official [Column types topic](column-types.md#default-template). @@ -86,7 +84,7 @@ The grid exposes a wide array of events that provide greater control over the ed ### 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. +- `CellEditEnter` - Prevents entering cell edit. If [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. - `CellEdit` - Allowed `Cell` and/or `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. @@ -97,7 +95,6 @@ The following sample demonstrates the editing execution sequence in action: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Features integration While a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-excel-style-filtering.md index 239b60a21..42b1c309f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-excel-style-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-excel-style-filtering.md @@ -21,10 +21,9 @@ The Web Components Hierarchical Grid exposes an Excel-style filtering feature th /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage -To turn on the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component's Excel-style filtering, two inputs should be set. The [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowFiltering) should be set to **true** and the [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filterMode) should be set to `ExcelStyleFilter` value. +To turn on the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component's Excel-style filtering, two inputs should be set. The [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#allowFiltering) should be set to **true** and the [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filterMode) should be set to `ExcelStyleFilter` value. ```html @@ -68,12 +67,11 @@ In the sample below 'Artist' column have all three features enabled, 'Debut' hav /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Templates -If you want to further customize the Excel style filter menu, you can use the [`excelStyleHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#excelStyleHeaderIconTemplate) property to define a custom template for the header icon of the menu. +If you want to further customize the Excel style filter menu, you can use the [`excelStyleHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#excelStyleHeaderIconTemplate) property to define a custom template for the header icon of the menu. -The following code demonstrates how to customize the Excel style filter menu using the [`excelStyleHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#excelStyleHeaderIconTemplate): +The following code demonstrates how to customize the Excel style filter menu using the [`excelStyleHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#excelStyleHeaderIconTemplate): ```ts constructor() { @@ -138,7 +136,6 @@ Add razor snipets /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -187,7 +184,6 @@ Then set the related CSS properties to this class: } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-export-excel.md index 555347150..e0a828c22 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-export-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-export-excel.md @@ -13,7 +13,7 @@ _premium: true # Web Components Hierarchical Grid Exporting -The Ignite UI for Web Components Hierarchical Grid provides data export functionality through the Grid Toolbar Exporter component. You can export the displayed data to Excel, CSV, or PDF formats. Excel exports use the MS Excel table format, which supports features like filtering and sorting. To enable exporting, place the [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) inside the grid's toolbar. By default, all export formats are enabled. +The Ignite UI for Web Components Hierarchical Grid provides data export functionality through the Grid Toolbar Exporter component. You can export the displayed data to Excel, CSV, or PDF formats. Excel exports use the MS Excel table format, which supports features like filtering and sorting. To enable exporting, place the [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) inside the grid's toolbar. By default, all export formats are enabled. ## Web Components Exporting Example @@ -22,7 +22,6 @@ The Ignite UI for Web Components Hierarchical Grid provides data export function /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Export Multi Column Headers Grid You can export [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` `IgnoreMultiColumnHeaders` to `true`. @@ -31,7 +30,7 @@ You can export [`IgcHierarchicalGridComponent`](https://www.infragistics.com/pro > The exported [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) will not be formatted as a table, since Excel tables do not support multiple column headers. > [!Note] -> [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons: +> [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons: > > - `export-excel`, `export-csv`, `export-pdf` @@ -40,7 +39,6 @@ You can export [`IgcHierarchicalGridComponent`](https://www.infragistics.com/pro /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Export Grid with Frozen Column Headers By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` `FreezeHeaders` to `true`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-filtering.md index de996f878..dbb0bc49e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-filtering.md @@ -27,22 +27,21 @@ The sample below demonstrates [`IgcHierarchicalGridComponent`](https://www.infra /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Setup -In order to specify if filtering is enabled and which filtering mode should be used, the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable). +In order to specify if filtering is enabled and which filtering mode should be used, the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable). -Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowFiltering) enables you to specify the following options: +Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#allowFiltering) enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled. This is the default value. - **true** - the filtering for the corresponding grid will be enabled. -Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowAdvancedFiltering) enables you to specify the following options: +Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#allowAdvancedFiltering) enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled. This is the default value. - **true** - the advanced filtering for the corresponding grid will be enabled. -Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filterMode) enables you to specify the following options: +Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filterMode) enables you to specify the following options: - **QuickFilter** - a simplistic filtering UI. This is the default value. - **ExcelStyleFilter** - an Excel-like filtering UI. @@ -61,7 +60,7 @@ Property [`filterable`](https://www.infragistics.com/products/ignite-ui-web-comp -To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowAdvancedFiltering) input property to **true** +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#allowAdvancedFiltering) input property to **true** ```html @@ -81,7 +80,7 @@ While some filtering conditions have been applied to a column, and the filter ro 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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#dataType) of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the `IgnoreCase` and the initial `Condition` properties. -The filtering feature is enabled for the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable) input to **false**. +The filtering feature is enabled for the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable) input to **false**. ```html @@ -93,9 +92,9 @@ The filtering feature is enabled for the [`IgcHierarchicalGridComponent`](https: > [!Note] > If values of type **string** are used by a column of data type **date**, the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) 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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) API. The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) exposes several methods for this task - [`filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filter), [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filterGlobal) and [`clearFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clearFilter). +You can filter any column or a combination of columns through the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) API. The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) exposes several methods for this task - [`filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filter), [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filterGlobal) and [`clearFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#clearFilter). -- [`filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filter) - filter a single column or a combination of columns. +- [`filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filter) - filter a single column or a combination of columns. There are five filtering operand classes exposed: @@ -144,7 +143,7 @@ gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTre this.grid.filteringExpressionsTree = gridFilteringExpressionsTree; ``` -- [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filterGlobal) - clears all existing filters and applies the new filtering condition to all Hierarchical Grid's columns. +- [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filterGlobal) - clears all existing filters and applies the new filtering condition to all Hierarchical Grid's columns. ```typescript // Filter all cells for a value which contains `myproduct` @@ -152,7 +151,7 @@ this.grid.filteringLogic = FilteringLogic.Or; this.grid.filterGlobal('myproduct', IgcStringFilteringOperand.instance().condition('contains'), false); ``` -- [`clearFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clearFilter) - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns. +- [`clearFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#clearFilter) - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns. ```typescript // Remove the filtering state from the ProductName column @@ -164,7 +163,7 @@ this.grid.clearFilter(); ## Initial filtered state -To set the initial filtering state of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), set the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filteringExpressionsTree) for each column to be filtered. +To set the initial filtering state of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), set the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filteringExpressionsTree) for each column to be filtered. ```typescript constructor() { @@ -191,7 +190,7 @@ constructor() { ### Filtering logic -The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filteringLogic) property of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) controls how filtering multiple columns will resolve in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). You can change it at any time through the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) API, or through the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) input property. +The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#filteringLogic) property of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) controls how filtering multiple columns will resolve in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). You can change it at any time through the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) API, or through the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) input property. ```typescript import { FilteringLogic } from "igniteui-webcomponents-grids/grids"; @@ -297,7 +296,6 @@ constructor() { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -340,7 +338,6 @@ Then set the related CSS properties for that class: } ``` - ## Known Limitations > [!Note] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-load-on-demand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-load-on-demand.md index edfd18a5b..f4b959b70 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-load-on-demand.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-load-on-demand.md @@ -42,7 +42,6 @@ function buildUrl(dataState: any) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Remote Service Provider First we will prepare our service provider so we will be ready to get the data we would need for the hierarchical grid. @@ -126,7 +125,7 @@ Next we will setup our hierarchical grid and connect it to our remote service pr ### Template defining -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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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: +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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#primaryKey) for the customers is their `customerId`, for their orders on the first level - `orderId` and respectively for order details - `productId`. Knowing each database table and their keys allows us to define our initial template: ```html @@ -156,7 +155,7 @@ There is one thing missing in our template though, and that is the data for our We will easily set the data of the root grid after getting its data from the service in our code later, since we can use the `id="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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) is rendered for it and we need to get the reference for the newly created grid to set its data. That is why each [`IgcRowIslandComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowislandcomponent.html) component provides the `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 service, and apply it. +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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) is rendered for it and we need to get the reference for the newly created grid to set its data. That is why each [`IgcRowIsland`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowisland.html) component provides the `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 service, and apply it. We can use one method for all row islands since we built our service so that it needs only information if it is the root level, the key of the row island, the primary key of the parent row, and its unique identifier. All this information can be accessed either directly from the event arguments, or from the row island responsible for triggering the event. @@ -247,7 +246,7 @@ With this, the setup of our application is almost done. This last step aims to i ### Setup of loading indication -The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) can display a loading indicator by setting the [`isLoading`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 and display that the grid has no data if the service returns an empty array by setting it to **false**. +The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) can display a loading indicator by setting the [`isLoading`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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 and display that the grid has no data if the service returns an empty array by setting it to **false**. In this case the final version of our configuration would look like this: @@ -296,7 +295,7 @@ public gridCreated(event: CustomEvent, _parentKey: stri ## API References - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) -- [`IgcRowIslandComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowislandcomponent.html) +- [`IgcRowIsland`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowisland.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-multi-column-headers.md index 7c52ee0ab..075b88ff8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-multi-column-headers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-multi-column-headers.md @@ -22,7 +22,6 @@ The Ignite UI for Web Components Multi-Column Headers feature in Web Components /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - The declaration of multi-column headers is achieved by wrapping a set of columns into an [`columnGroup`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#columnGroup) component with [`header`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#header) title information passed. ```html @@ -148,7 +147,6 @@ The following sample demonstrates how to implement collapsible column groups usi /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -185,7 +183,6 @@ Then set the related CSS properties to this class: } ``` - ## API References - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-overview.md index f84ac2b08..8dda5cf4f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-overview.md @@ -21,7 +21,6 @@ In this Web Components grid example you can see how users can visualize hierarch /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Getting Started with Ignite UI for Web Components Hierarchical Grid ### Dependencies @@ -294,7 +293,6 @@ Then set the `--header-background` and `--header-text-color` CSS properties for } ``` - ## Known Limitations |Limitation|Description| @@ -304,7 +302,7 @@ Then set the `--header-background` and `--header-text-color` CSS properties for ## API References - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) -- [`IgcRowIslandComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowislandcomponent.html) +- [`IgcRowIsland`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowisland.html) - [`IgcGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridcomponent.html) - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) - `Cell` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-remote-data-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-remote-data-operations.md index 7d345d7d3..e0d738ebe 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-remote-data-operations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-remote-data-operations.md @@ -174,7 +174,6 @@ For further reference, please check the demo bellow: - @@ -193,7 +192,7 @@ For further reference, please check the demo bellow: ## API References -- [`IgcPaginatorComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginatorcomponent.html) +- [`IgcPaginator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginator.html) - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-actions.md index b6f4841e0..5bb66e861 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-actions.md @@ -19,7 +19,7 @@ The Ignite UI for Web Components Row Actions feature in Web Components Hierarchi The predefined actions UI components are: -- [`IgcGridEditingActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) option and row deletion of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). +- [`IgcGridEditingActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowEditable) option and row deletion of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). - [`IgcGridPinningActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridpinningactions.html) - includes functionality and UI specifically designed for the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. @@ -58,7 +58,7 @@ They are added inside the [`IgcHierarchicalGridComponent`](https://www.infragist These components expose templates giving flexibility for customization. For instance, if we would like to use the [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) for a Gmail scenario with row actions such as **delete**, **edit** and etc. You can simply create button component with icon, add click event to it and insert it into the [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html). - + @@ -78,7 +78,6 @@ These components expose templates giving flexibility for customization. For inst /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcGridPinningActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridpinningactions.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-adding.md index d5572b760..c67b45ecc 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-adding.md @@ -27,10 +27,9 @@ Add an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-co /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Row Adding Usage -Then define a [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) set to true and an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) component with editing actions enabled. The `AddRow` input controls the visibility of the button that spawns the row adding UI. +Then define a [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowEditable) set to true and an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) component with editing actions enabled. The `AddRow` input controls the visibility of the button that spawns the row adding UI. @@ -96,7 +95,7 @@ The internal `BaseTransactionService` is automatically provided for [`IgcHierarc -Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#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. +Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#beginAddRowById) requires you to specify the row to use as context for the operation by its `RowID` (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. ```typescript this.grid.beginAddRowById('ALFKI'); // Spawns the add row UI under the row with PK 'ALFKI' @@ -129,9 +128,6 @@ After a new row is added through the row adding UI, its position and/or visibili ## Keyboard Navigation - ALT + + - Enters edit mode for adding a row - - - - ESC exits row adding mode without submitting any changes - TAB move focus from one editable cell in the row to the next and from the right-most editable cell to the CANCEL and DONE buttons. Navigation from DONE button goes to the left-most editable cell within the currently edited row. @@ -152,7 +148,7 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowAddTextTemplate). +Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowAddTextTemplate). @@ -175,13 +171,13 @@ The row adding UI comprises the buttons in the [`IgcActionStrip`](https://www.in ## API References -- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `RowEditCancel` -- [`endEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#endEdit) -- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#endEdit) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#primaryKey) - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-drag.md index 485eeed56..8c4fd5a41 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-drag.md @@ -13,7 +13,7 @@ _premium: true # Row Dragging in Web Components Hierarchical Grid -The Ignite UI for Web Components Row Dragging feature in Web Components Hierarchical Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowDraggable) input. +The Ignite UI for Web Components Row Dragging feature in Web Components Hierarchical Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowDraggable) input. ## Web Components Hierarchical Grid Row Drag Example @@ -1589,10 +1589,9 @@ export class SingersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Configuration -In order to enable row-dragging for your [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. +In order to enable row-dragging for your [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. ```html @@ -1601,7 +1600,7 @@ In order to enable row-dragging for your [`IgcHierarchicalGridComponent`](https: ### Templating the Drag Icon -The drag handle icon can be templated using the grid's [`dragIndicatorIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#dragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (**drag_indicator**) to **drag_handle**. ```html @@ -1648,9 +1647,9 @@ constructor() { > [!Note] -> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. +> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. -Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: +Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@ -1707,14 +1706,13 @@ Notice that we also have row selection enabled and we preserve the selection whe /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Limitations -Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowDraggable). +Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowDraggable). ## API References -- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowDraggable) +- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowDraggable) - `RowDragStart` - `RowDragEnd` - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-editing.md index db5e45c40..398c75cd3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-editing.md @@ -24,13 +24,12 @@ The following sample demonstrates how to enable row editing in the [`IgcHierarch /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - > [!Note] > When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode. ## Row Editing Usage -Define a [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) set to true: +Define a [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowEditable) set to true: @@ -77,7 +76,7 @@ constructor() { > Setting primary key is mandatory for row editing operations. > [!Note] -> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) property in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) input of that column to `false`. +> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowEditable) property in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) input of that column to `false`. > [!Note] > The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. @@ -182,10 +181,9 @@ Then set the related CSS properties for that class: } ``` - ## Known Issues and Limitations -- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection @@ -197,14 +195,14 @@ Then set the related CSS properties for that class: ## API References -- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowEditable) +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` -- [`endEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#endEdit) +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#endEdit) - [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#field) - [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) -- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#primaryKey) - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-pinning.md index 59e38667b..cde26b958 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-pinning.md @@ -22,7 +22,6 @@ The Ignite UI for Web Components Row Pinning feature in Web Components Hierarchi /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Row Pinning UI The built-in row pinning UI is enabled by adding an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) component with the [`IgcGridPinningActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridpinningactions.html) component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. @@ -60,7 +59,7 @@ 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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. +Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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` event and changing the `InsertAtIndex` property of the event arguments to the desired position index. @@ -83,7 +82,7 @@ public rowPinning(event) { ## Pinning Position -You can change the row pinning position via the [`pinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#pinning) configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom. ```html @@ -142,7 +141,6 @@ public togglePinning(row: IgcRowType) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Row Pinning Limitations - Only records that exist in the data source can be pinned. @@ -184,7 +182,6 @@ Then set the related CSS properties for that class: } ``` - ## API References - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-selection.md index 74b1281a4..effb942fe 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-row-selection.md @@ -32,7 +32,6 @@ The sample below demonstrates the three types of [`IgcHierarchicalGridComponent` /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Setup In order to setup row selection in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), you just need to set the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection) property. This property accepts `GridSelectionMode` enumeration. @@ -322,7 +321,6 @@ This demo shows the usage of custom header and row selectors. The latter uses [` /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Conditional Selection Demo This demo prevents some rows from being selected using the `RowSelectionChanging` event and a custom template with disabled checkbox for non-selectable rows. @@ -332,7 +330,6 @@ This demo prevents some rows from being selected using the `RowSelectionChanging /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-selection.md index 93aec4b12..9ba591fac 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-selection.md @@ -18,7 +18,7 @@ With the Ignite UI for Web Components Select feature in Web Components Hierarchi - Cell selection - Column selection -With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection) property, you can specify: +With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowSelection) property, you can specify: - None - Single @@ -33,18 +33,17 @@ The sample below demonstrates three types of **cell selection** behaviors in the /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Hierarchical Grid Selection Options -The Ignite UI for Web Components [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) 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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#selectable) properties. +The Ignite UI for Web Components [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) 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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). In order to change/enable selection mode you can use [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowSelection), [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#cellSelection) or [`selectable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#selectable) properties. ### Web Components Hierarchical Grid Row Selection -Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection) enables you to specify the following options: +Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowSelection) enables you to specify the following options: - `None` - Row selection would be disabled for the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). - `Single` - Selection of only one row within the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) would be available. @@ -60,7 +59,7 @@ Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-co ### Web Components Hierarchical Grid Cell Selection -Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#cellSelection) enables you to specify the following options: +Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#cellSelection) enables you to specify the following options: - `None` - Cell selection would be disabled for the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). - `Single` - Selection of only one cell within the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) would be available. @@ -90,7 +89,7 @@ This leads to the following three variations: ## Known Issues and Limitations -When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection - Row Expand/collapse diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-size.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-size.md index d30355e67..393ab4b52 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-size.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-size.md @@ -26,7 +26,6 @@ The Ignite UI for Web Components Size feature in Web Components Hierarchical Gri /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage As you can see in the demo above, the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set `--ig-size` either inline or part of a CSS class: @@ -42,11 +41,11 @@ As you can see in the demo above, the [`IgcHierarchicalGridComponent`](https://w ``` -And now let's see in details how each option reflects on the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component. When you switch between different size options the height of each [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width), please consider the fact that it must be bigger than the sum of left and right padding: +And now let's see in details how each option reflects on the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) component. When you switch between different size options the height of each [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width), please consider the fact that it must be bigger than the sum of left and right padding: -- **large** - this is the default [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is `80px`; -- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is `64px`; -- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is `56px`; +- **large** - this is the default [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) is `80px`; +- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) is `64px`; +- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) is `56px`; > [!Note] > Please keep in mind that currently you **can not** override any of the sizes. @@ -153,16 +152,14 @@ public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptio } ``` -Another option that [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) provides for you, in order to be able to change the height of the rows in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowHeight). So let's see in action how this property affects the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) layout along with the `--ig-size`. +Another option that [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) provides for you, in order to be able to change the height of the rows in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowHeight). So let's see in action how this property affects the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) layout along with the `--ig-size`. 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowHeight) specified**. +- `--ig-size` CSS variable will have no impact on row height **if there is [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowHeight) specified**. - `--ig-size` will **affect all of the rest elements in the Hierarchical Grid**, as it has been described above. -We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowHeight) property to the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html): - - +We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#rowHeight) property to the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html): ```html diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-sizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-sizing.md index 29e330dc6..7a58da9aa 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-sizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-sizing.md @@ -12,23 +12,23 @@ _premium: true # Web Components Hierarchical Grid Sizing -The Ignite UI for Web Components Sizing feature in Web Components Hierarchical Grid is an important aspect of creating responsive and user-friendly grid interfaces. The Web Components Hierarchical Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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. +The Ignite UI for Web Components Sizing feature in Web Components Hierarchical Grid is an important aspect of creating responsive and user-friendly grid interfaces. The Web Components Hierarchical Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. > [!Note] > If the Border box sizing is overridden by the user we cannot guarantee that the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) will size correctly. ## Web Components Hierarchical Grid Width -If the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) input does not have value assigned, its default value is `100%` and the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. +If the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) input does not have value assigned, its default value is `100%` and the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. > [!Note] -> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) style of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) itself will result in an unexpected behavior. +> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) style of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) itself will result in an unexpected behavior. ### Null -The grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#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. +The grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. +- If there are 6 columns and none of them has width defined, the grid will have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. columns-default-gridWidth-null-v2 @@ -49,9 +49,9 @@ The grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-compone ### Pixels -When the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content: -- When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width). Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. +- 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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#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-v2 @@ -62,9 +62,9 @@ When the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ ### Percentages -When the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) will size relative to the browser window. +When the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) will size relative to the browser window. -- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#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. +- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#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-100p-v2 @@ -72,7 +72,7 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-web-component width-percent-parent-100p-v2 -- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. +- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. width-percent-150p-parent-noscroll-v2 width-percent-150p-parent-scroll-v2 @@ -82,11 +82,11 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-web-component By default if no height is defined for the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), it will be set to `100%`. You can check how the grid reacts depending on the DOM structure in the `Percentages` section. > [!Note] -> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) style of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) itself will result in an unexpected behavior. +> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) style of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) itself will result in an unexpected behavior. ### Null -The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway. - If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. @@ -96,7 +96,7 @@ The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignit height-null-24rows-v2 -- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: +- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: height-null-24rows-parent-noscroll-v2 height-null-24rows-parent-scroll-v2 @@ -106,28 +106,28 @@ The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignit ### Pixels -Setting the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is set in pixels. +Setting the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#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-4rows-v2 -- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: +- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: height-500px-14rows-v2 -- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. +- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. height-700px-14rows-parent-noscroll-v2 height-700px-14rows-parent-scroll-v2 ### Percentages -When the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) input is set to percentages, the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) set in pixels or percentages, the grid will size relative to the size of the parent. +When the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) input is set to percentages, the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `1200px` and the parent element not having any size applied to it: +Let's have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#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. @@ -141,7 +141,7 @@ Let's have [`width`](https://www.infragistics.com/products/ignite-ui-web-compone height-percent-100-parent-800px-v2 -- If the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. height-percent-130p-parent-noscroll-v2 height-percent-130p-parent-scroll-v2 @@ -160,7 +160,7 @@ By default when a column doesn't have a specified width it will try to autosize, 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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) and the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) and the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) `null` and 6 columns that don't have width, each column will be sized to `136px`. columns-default-gridWidth-null-v2 @@ -168,15 +168,15 @@ When the grid is resized in these scenarios, the column width is also updated to columns-default-all-row-selectors-v2 -- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `1000px`. +- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) set to `1000px`. columns-default-all-min-136px-v2 -- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of `100px`, the first will fill the rest. +- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) of `100px`, the first will fill the rest. columns-default-first-rest-100px-v2 -- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `100px`. +- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) set to `100px`. columns-default-all-first-100px-v2 @@ -185,19 +185,19 @@ When the grid is resized in these scenarios, the column width is also updated to ### Pixels -When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of the columns is static, it can be less than the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) or exceed it. +When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) of the columns is static, it can be less than the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) or exceed it. -- If the combined `width` of all columns is less than the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). In the next example the columns have `150px` width. +- If the combined `width` of all columns is less than the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). In the next example the columns have `150px` width. columns-150px-empty-area-v2 -- If the combined [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of all columns is bigger than the actual [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) of all columns is bigger than the actual [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width), a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. columns-150px-extra-area-v2 ### Percentages -When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. +When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. - If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. @@ -211,7 +211,7 @@ When columns have set [`width`](https://www.infragistics.com/products/ignite-ui- columns-percent-bigger-100p-v2 -- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) set to `50%`: +- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) set to `50%`: columns-percent-gridWidth-null-v2 @@ -219,21 +219,21 @@ When columns have set [`width`](https://www.infragistics.com/products/ignite-ui- ## Web Components Hierarchical Grid Child Sizing -Because the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) usually contains children, they can also have their [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) specified, in order to accommodate different scenarios. Since the children are defined using [`IgcRowIslandComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowislandcomponent.html) template, this means that all children in the same level and island will have the same [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowislandcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowislandcomponent.html#height) property applied to them. +Because the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) usually contains children, they can also have their [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) specified, in order to accommodate different scenarios. Since the children are defined using [`IgcRowIsland`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowisland.html) template, this means that all children in the same level and island will have the same [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowisland.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowisland.html#height) property applied to them. ### Width -The [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowislandcomponent.html#width) for the children does not behave much different than the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) itself, since each child grid is instance of [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) as well. +The [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcrowisland.html#width) for the children does not behave much different than the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) itself, since each child grid is instance of [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) as well. -The only difference is that the user cannot change the parent element of the child grid. That's why when the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is set to percentages, the `100%` width allocated for the child is smaller than the parent grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#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. +The only difference is that the user cannot change the parent element of the child grid. That's why when the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) is set to percentages, the `100%` width allocated for the child is smaller than the parent grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#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. hgrid-width-percentages-v2 ### Height -The [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) of each child in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) behaves also similarly to the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) of the root level grid. +The [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) of each child in the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) behaves also similarly to the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) of the root level grid. -The difference is that for the child grid, when [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#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. +The difference is that for the child grid, when [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#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. hgrid-height-percentages-v2 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-sorting.md index 0b688e3bb..9347624c6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-sorting.md @@ -28,7 +28,6 @@ Additionally there is a custom contextmenu added for sorting using [`IgcHierarch /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - This is done via the [`sortable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortable) input. With the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) sorting, you can also set the [`sortingIgnoreCase`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortingIgnoreCase) property to perform case sensitive sorting: ```html @@ -46,10 +45,9 @@ The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignit /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Sorting through the API -You can sort any column or a combination of columns through the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) API using the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`sort`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sort) method: +You can sort any column or a combination of columns through the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) API using the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) [`sort`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#sort) method: ```typescript import { SortingDirection } from 'igniteui-webcomponents-grids'; @@ -74,7 +72,7 @@ this.hierarchicalGrid.sort([ > [!Note] > Sorting is performed using our `DefaultSortingStrategy` algorithm. Any [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) or `ISortingExpression` can use a custom implementation of the `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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#clearSort) method: +As with the filtering behavior, you can clear the sorting state by using the [`clearSort`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#clearSort) method: @@ -89,14 +87,14 @@ this.hierarchicalGrid.clearSort(); > [!Note] -> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortStrategy) of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortStrategy) of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html), since they work in different scopes and expose different parameters. +> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortStrategy) of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#sortStrategy) of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html), since they work in different scopes and expose different parameters. > [!Note] > The sorting operation **DOES NOT** change the underlying data source of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). ## Initial Sorting State -It is possible to set the initial sorting state of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortingExpressions) property of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). +It is possible to set the initial sorting state of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#sortingExpressions) property of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html). ```typescript public connectedCallback() { @@ -116,7 +114,7 @@ public connectedCallback() { The sorting indicator icon in the column header can be customized using a template. The following properties are available for templating the sorting indicator for any sorting state (ascending, descending, none): -- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. +- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. ```ts constructor() { @@ -130,7 +128,7 @@ public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => { } ``` -- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. +- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. ```ts constructor() { @@ -144,7 +142,7 @@ public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => } ``` -- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. +- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. ```ts constructor() { @@ -189,7 +187,6 @@ Then set the related CSS properties to this class: } ``` - ## API References - [`IgcSortingExpression`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcsortingexpression.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-state-persistence.md index d61ea9026..7df1c4fde 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-state-persistence.md @@ -13,11 +13,11 @@ _premium: true # Web Components Hierarchical Grid State Persistence -The Ignite UI for Web Components State Persistence in Web Components Hierarchical Grid allows developers to easily save and restore the grid state. When the [`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) is applied on the Web Components [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState), [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString), [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState) and [`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) methods that developers can use to achieve state persistence in any scenario. +The Ignite UI for Web Components State Persistence in Web Components Hierarchical Grid allows developers to easily save and restore the grid state. When the [`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) is applied on the Web Components [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html), it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState), [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString), [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState) and [`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) methods that developers can use to achieve state persistence in any scenario. ## Supported Features -[`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) supports saving and restoring the state of the following features: +[`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) supports saving and restoring the state of the following features: @@ -43,9 +43,9 @@ The Ignite UI for Web Components State Persistence in Web Components Hierarchica ## Usage -The [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState) method returns the grid state in a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object, containing all the state info. Additional steps may be required in order to save it. +The [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState) method returns the grid state in a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object, containing all the state info. Additional steps may be required in order to save it. -The [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) returns a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). +The [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) returns a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). The developer may choose to get only the state for a certain feature/features, by passing in an array with feature names as an argument. Empty array will result to using the default state options. @@ -74,9 +74,9 @@ const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', -[`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState) - The method accepts a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object as argument and will restore the state of each feature found in the object or specified features as second argument. +[`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState) - The method accepts a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object as argument and will restore the state of each feature found in the object or specified features as second argument. -[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) - The method accepts a serialized JSON string as argument and will restore the state of each feature found in the JSON string or specified features as second argument. +[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) - The method accepts a serialized JSON string as argument and will restore the state of each feature found in the JSON string or specified features as second argument. ```typescript gridState.applyState(gridState); @@ -84,7 +84,7 @@ gridState.applyStateFromString(gridStateString); gridState.applyState(sortingFilteringStates) ``` -The [`options`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatebasedirective.html#options) object implements the [`IgcGridStateOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateoptions.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState)/[`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) methods will not put the state of these features in the returned value and [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState)/[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) methods will not restore state for them. +The [`options`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatebasedirective.html#options) object implements the [`IgcGridStateOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateoptions.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState)/[`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) methods will not put the state of these features in the returned value and [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState)/[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) methods will not restore state for them. ```typescript gridState.options = { cellSelection: false, sorting: false }; @@ -131,7 +131,7 @@ public restoreGridStateString() { ## Restoring Child Grids -Saving / Restoring state for the child grids is controlled by the `RowIslands` property and is enabled by default. [`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.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` property and is enabled by default. [`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.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: ```ts gridState.options = { cellSelection: false, sorting: false, rowIslands: true }; @@ -145,7 +145,7 @@ gridState.options = { cellSelection: false, sorting: false, rowIslands: true }; -Then the [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState) API will return the state for all grids (root grid and child grids) features excluding `Selection` and `Sorting`. If later on the developer wants to restore only the `Filtering` state for all grids, use: +Then the [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState) API will return the state for all grids (root grid and child grids) features excluding `Selection` and `Sorting`. If later on the developer wants to restore only the `Filtering` state for all grids, use: ```typescript this.state.applyState(state, ['filtering', 'rowIslands']); @@ -168,7 +168,6 @@ this.state.applyState(state, ['filtering', 'rowIslands']); } ``` - ## Limitations @@ -185,7 +184,7 @@ state.applyState(gridState.columnSelection); -- [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the [`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) component will ignore the columns [`formatter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#formatter), [`filters`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotconfiguration.html#filters), `Summaries`, `SortStrategy`, `CellClasses`, `CellStyles`, `HeaderTemplate` and `BodyTemplate` properties. +- [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the [`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) component will ignore the columns [`formatter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#formatter), [`filters`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotconfiguration.html#filters), `Summaries`, `SortStrategy`, `CellClasses`, `CellStyles`, `HeaderTemplate` and `BodyTemplate` properties. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-summaries.md index a34be4bc8..5bc4f7e14 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-summaries.md @@ -22,7 +22,6 @@ The Ignite UI for Web Components Summaries feature in Web Components Hierarchica /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - > [!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** @@ -217,7 +216,6 @@ class MySummary extends IgcNumberSummaryOperand { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Summary Template @@ -291,7 +289,6 @@ When a default summary is defined, the height of the summary area is calculated } ``` - ## Disabled Summaries The `disabled-summaries` property provides precise per-column control over the Web Components Hierarchical Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgcHierarchicalGrid, 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. @@ -379,7 +376,6 @@ igc-dialog::part(title) { } ``` - ## 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs). When using custom operands, the [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) and [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#summaryFormatter) property. @@ -411,7 +407,6 @@ constructor() { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Keyboard Navigation The summary rows can be navigated with the following keyboard interactions: @@ -459,7 +454,6 @@ Then set the related CSS properties for that class: } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-toolbar.md index b344e5b45..dc6000f79 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-toolbar.md @@ -31,10 +31,9 @@ The toolbar and the predefined UI components support Web Components events and e /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - -The predefined [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) and [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html) UI components are added inside the [`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: +The predefined [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) and [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html) UI components are added inside the [`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: @@ -55,7 +54,7 @@ The predefined [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/p > [!Note] -> As seen in the code snippet above, the predefined `Actions` UI components are wrapped in the [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. +> As seen in the code snippet above, the predefined `Actions` UI components are wrapped in the [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) container. 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: @@ -127,12 +126,11 @@ Listed below are the main features of the toolbar with example code for each of /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Title -Setting a title for the toolbar in your grid is achieved by using the [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html). +Setting a title for the toolbar in your grid is achieved by using the [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html). Users can provide anything from simple text to more involved templates. @@ -148,7 +146,7 @@ Users can provide anything from simple text to more involved templates. ### Actions -The [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) is where users can place actions/interactions in relation to the parent grid. +The [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) is 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. @@ -166,7 +164,7 @@ toolbar interaction components. ### Column Pinning -The [`IgcGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinningcomponent.html) component provides the default UI for interacting with column pinning in the grid. +The [`IgcGridToolbarPinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinning.html) component 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. @@ -188,7 +186,7 @@ The component is setup to work out of the box with the parent grid containing th ### Column Hiding -The [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component +The [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. @@ -233,7 +231,7 @@ Toolbar Advanced Filtering component provides the default UI for the Advanced Fi -As with the rest of the toolbar actions, exporting is provided through a [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) out of the box. +As with the rest of the toolbar actions, exporting is provided through a [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) out of the box. The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience. @@ -296,12 +294,11 @@ The following sample demonstrates how to customize the exported files: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html#showProgress) property and use for their own long running operations or just as another way to signify an action taking place in the grid. +Moreover, users can set the toolbar [`showProgress`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html#showProgress) property and use for their own long running operations or just as another way to signify an action taking place in the grid. The sample belows uses has significant amount of data, in order to increase the time needed for data export so the progressbar can be seen. Additionally it has another button that simulates a long running operation in the grid: @@ -1879,7 +1876,6 @@ export class SingersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Custom Content If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable. @@ -3478,7 +3474,6 @@ export class SingersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -3511,7 +3506,6 @@ Then set the related CSS properties for that class: } ``` - @@ -3521,11 +3515,11 @@ Then set the related CSS properties for that class: The Grid Toolbar service has a few more APIs to explore, which are listed below. - [`IgcGridToolbarAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaradvancedfiltering.html) -- [`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) -- [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) -- [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) -- [`IgcGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinningcomponent.html) -- [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html) +- [`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) +- [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) +- [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) +- [`IgcGridToolbarPinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinning.html) +- [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html) [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) Events: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-virtualization.md index cd0e6d6a4..54f7264e7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/hierarchical-grid-virtualization.md @@ -44,19 +44,18 @@ function buildUrl(dataState: any) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Enabling Virtualization -The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) 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. The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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. +The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html) 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. The [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#height) is `null`). +However, it is also possible to explicitly set the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#height) is `null`). The size of the data chunks is determined by: -- The row height for the vertical (row) virtualization. This is determined by the [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.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 [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html#columnWidth) option, which will be applied to all columns that don't have explicit width set. In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the [`IgcHierarchicalGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igchierarchicalgridcomponent.html)'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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/icon-button.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/icon-button.md index b0072066c..f59229bbd 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/icon-button.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/icon-button.md @@ -31,7 +31,6 @@ The Ignite UI for Web Components Icon Button component allows developers to use /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -70,7 +69,6 @@ Similar to the regular button components, the icon button supports several varia /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ```html ``` @@ -97,7 +95,6 @@ The size of the button can be changed by utilizing the `--ig-size` CSS variable /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ```css igc-icon-button { --ig-size: var(--ig-size-medium); @@ -157,10 +154,9 @@ igc-icon-button::part(icon) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References -- [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) +- [`IgcButtonBaseComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttonbasecomponent.html) - [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) - [`IgcIconButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igciconbuttoncomponent.html) - [`IgcIconComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igciconcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/icon.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/icon.md index c175cba6b..344c229a7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/icon.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/icon.md @@ -31,7 +31,6 @@ The Web Components Icon component allows you to easily display font or choose fr /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -122,7 +121,6 @@ igc-icon { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - You can also set a custom size for the icon component. The best way to do this is by using the `--size` CSS variable. ```css @@ -165,7 +163,6 @@ igc-icon { } ``` - ## API References - [`IgcIconComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igciconcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/input.md index 734e6fcbf..3990de8d3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/input.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/input.md @@ -20,7 +20,6 @@ The Ignite UI for Web Components Input is a component where the user can enter d /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - To get started we need to import the [`IgcInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html) in our typescript file and register the component by calling the [defineComponents()](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/index.html#defineComponents) function as follows: ```ts @@ -47,7 +46,6 @@ With `prefix` and `suffix` slots we can add different content before and after t /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Helper Text The `helper-text` slot provides a hint placed below the Input. Let's add some helper text to our phone Input: @@ -57,7 +55,6 @@ The `helper-text` slot provides a hint placed below the Input. Let's add some he /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Input Sizing We can allow the user to change the size of the [`IgcInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html) using the `--ig-size` CSS variable. То do this, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the Input: @@ -80,7 +77,6 @@ We can allow the user to change the size of the [`IgcInputComponent`](https://ww /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - In the sample above we have demonstrated the use of the following attributes: - `required` - Used to mark the input as required @@ -144,7 +140,6 @@ igc-input::part(suffix) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/line-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/line-chart.md index 6fc8c8649..70bb49a12 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/line-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/line-chart.md @@ -50,7 +50,6 @@ export class CountryRenewableElectricity extends Array
## Line Chart Recommendations @@ -137,7 +136,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Line Chart with Multiple Series @@ -179,7 +177,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Line Chart with Live Data @@ -260,7 +257,6 @@ export class CategoryChartSharedData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Styling Line Chart @@ -302,10 +298,9 @@ export class CountryRenewableElectricity extends Array ## Advanced Types of Line Charts @@ -405,7 +399,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked 100% Line Chart @@ -450,7 +443,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Radial Line Chart @@ -491,7 +483,6 @@ export class FootballPlayerStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Polar Line Chart @@ -532,7 +523,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/linear-gauge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/linear-gauge.md index 53b6ab7ce..2bb74c509 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/linear-gauge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/linear-gauge.md @@ -22,7 +22,6 @@ The following sample demonstrates how setting multiple properties on the same [` /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Dependencies @@ -110,7 +109,6 @@ This is the primary measure displayed by the linear gauge component and is visua /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Highlight Needle The linear gauge can be modified to show a second needle. This will make the main needle's [`value`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igclineargaugecomponent.html#value) appear with a lower opacity. To enable this first set [`highlightValueDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igclineargaugecomponent.html#highlightValueDisplayMode) to Overlay and then apply a [`highlightValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igclineargaugecomponent.html#highlightValue). @@ -140,7 +138,6 @@ The linear gauge can be modified to show a second needle. This will make the mai /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Ranges The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same times the degree to which it resides within that state. @@ -170,7 +167,6 @@ The ranges are visual elements that highlight a specified range of values on a s /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Tick Marks The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the linear gauge. @@ -204,7 +200,6 @@ Minor tick marks – The minor tick marks represent helper tick marks, which mig /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Labels The labels indicate the measures on the scale. @@ -228,7 +223,6 @@ The labels indicate the measures on the scale. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Backing The backing element represents background and border of the linear gauge component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it. @@ -251,7 +245,6 @@ The backing element represents background and border of the linear gauge compone /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Scale The scale is a visual element that highlights the full range of values in the linear gauge. You can customize the appearance and the shape of the scale. It can also be inverted (using [`isScaleInverted`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igclineargaugecomponent.html#isScaleInverted) property) and all labels will be rendered from right-to-left instead of left-to-right. @@ -277,7 +270,6 @@ The scale is a visual element that highlights the full range of values in the li /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the linear gauge with all features and visuals enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/linear-progress.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/linear-progress.md index cc93c6983..aecfdda90 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/linear-progress.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/linear-progress.md @@ -18,7 +18,6 @@ The Ignite UI for Web Components Linear Progress Indicator component provides a /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -63,7 +62,6 @@ You can make the indicator striped, using the [`striped`](https://www.infragisti /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Indeterminate Progress @@ -98,7 +96,6 @@ The following sample demonstrates the above configuration: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Dynamic Progress @@ -110,7 +107,6 @@ You can dynamically change the value of the progress indicator by using external /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Styling @@ -151,7 +147,6 @@ igc-linear-progress::part(label){ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ```css igc-linear-progress::part(track){ background-color: var(--ig-gray-300) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/list.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/list.md index 12fad3082..81e2ed708 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/list.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/list.md @@ -20,7 +20,6 @@ The following example represents a list populated with contacts with a name and /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -69,7 +68,6 @@ If all went well, you should see the following in your browser: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - Let's up our game a bit and enhance our list items. Say we want to create a list of contacts with a name and a phone number displayed under the name. To achieve that we can use some of the slots that come with the list items as demonstrated in the next example: ```html @@ -99,7 +97,6 @@ After implementing the above code, our list component should now look like the f /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Adding Avatar and Buttons We can use some of our other components in conjunction with the [`IgcListComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igclistcomponent.html) component to enrich the experience and add some functionality. We can have a nice picture avatar to the left of the name and phone values. Additionally, we can add some buttons to the right of them to allow the user to text and call contacts, so let's update our contacts list component to show the avatar and the buttons. We can do that by using some of the list item's slots. @@ -181,7 +178,6 @@ The result of implementing the above code should look like the following: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcListComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igclistcomponent.html) exposes several CSS parts, giving you full control over its style: @@ -233,7 +229,6 @@ igc-list-item::part(subtitle) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - In this article we covered a lot of ground with the [`IgcListComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igclistcomponent.html) component. First, we created a simple list with text items. Then, we created a list of contact items and added functionality to them by using some additional Ignite UI for Web Components components, like the [`IgcAvatarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcavatarcomponent.html) and [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html). Finally, we changed the component's appearance through the exposed CSS parts.
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/localization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/localization.md index 5cc67f605..0cfda051c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/localization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/localization.md @@ -23,7 +23,6 @@ Currently, Ignite UI for Web Components ships with resource strings for the foll } ``` - > Note: Hindi (HI) included in the sample is for illustrative purposes only, to demonstrate the possibility of passing a custom localization object. In this sample, it contains only a few localized strings for the summary. For more details, see the [Custom localized resource strings](#custom-localized-resource-strings) section below. ## Locale diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/maker-framework.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/maker-framework.md new file mode 100644 index 000000000..ac9aa94d6 --- /dev/null +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/maker-framework.md @@ -0,0 +1,239 @@ +--- +title: MAKER Framework | Ignite UI AI Orchestration +_description: The MAKER Framework is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated step plans using consensus-based voting across OpenAI, Anthropic, and Google AI providers. +_keywords: Web Components, Ignite UI for Web Components, Infragistics, MAKER, multi-agent, AI orchestration, MCP, Model Context Protocol, consensus voting, plan and execute, task decomposition +_language: en +_license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/maker-framework" +namespace: Infragistics.Controls +mentionedTypes: [] +_tocName: Maker Framework +--- + + + + + +# MAKER Framework + +The MAKER Framework (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction. + +The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry. + +## How MAKER Works + +The MAKER Framework operates in two sequential phases: planning and execution. Each phase uses a dedicated set of internal AI clients and applies the same consensus-based voting mechanism to validate outputs before advancing. + +In the **planning phase**, a planning client proposes batches of steps (configurable batch size, default 3). A separate plan-voting client then runs a "first-to-ahead-by-K" vote: multiple AI agents vote "Yes", "No", or "End" on the proposed steps. A proposal is accepted when one outcome leads the others by K votes. Rejected proposals include the rejection reasons in the next retry, driving continuous refinement until the plan is complete or the retry limit is reached. + +In the **execution phase**, the framework processes the validated step plan in configurable batches. An execution client runs each batch and produces an updated state. An execution-voting client validates the new state against the previous state and the original task, using the same K-margin voting algorithm. Rejected executions retry with feedback. The final accumulated state is the task result. + +The red-flag validation layer operates throughout both phases. Every AI client request is wrapped in a guarded call that runs configurable validators on the response before it enters the voting system. Malformed or too-short responses are retried with the failure message appended to the prompt. Custom validators can be added by implementing `IAIRedFlagValidator`. + +## Install the MAKER MCP Server + +MAKER is published on GitHub Packages under the `@igniteui` scope and requires a one-time registry setup. Run the following command once on your machine: + +```bash +npm config set @igniteui:registry https://npm.pkg.github.com +``` + +Then open `~/.npmrc` (Windows: `%USERPROFILE%\.npmrc`) and add your GitHub Personal Access Token with `read:packages` scope: + +After the registry is configured, the MCP server runs via `npx` without a separate global install. The native binary (~50 MB) is downloaded and cached on first run. Subsequent starts are instant. + +## Connect to Your AI Client + +Add the `maker` server entry to the MCP configuration file for your AI client. The `env` block passes your AI provider key; only set keys for the providers you use. + +### VS Code (GitHub Copilot) + +Add to `.vscode/mcp.json` in your workspace: + +```json +{ + "servers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +Switch Copilot Chat to Agent mode and confirm that `plan`, `execute`, and `plan_and_execute` appear in the tools list. + +### Claude Desktop + +1. Open your Claude Desktop configuration file: + - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` + - Windows: `%APPDATA%\Claude\claude_desktop_config.json` +2. Add the `maker` entry to the `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__Anthropic": "" + } + } + } +} +``` + +3. Restart Claude Desktop. The first start downloads the native binary (~30 s on a typical connection). + +### Cursor, Claude Code, JetBrains, and Other MCP Clients + +Any client that supports MCP with STDIO transport uses the same `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +## Configure the MAKER MCP Server + +All MAKER configuration is supplied through environment variables. The naming convention uses double underscore (`__`) as the section separator. Pass variables in the `env` block of your MCP client configuration. + +### AI Provider Keys + +Set at least one provider key. You can set keys for multiple providers simultaneously and assign different providers to different internal clients. + +| Environment Variable | Description | +| ------------------------------------- | ----------------- | +| `Executor__AIProviderKeys__OpenAI` | OpenAI API key | +| `Executor__AIProviderKeys__Anthropic` | Anthropic API key | +| `Executor__AIProviderKeys__Google` | Google AI API key | + +### Select Models per Internal Client + +MAKER uses four internal AI clients: `Planning`, `PlanVoting`, `Execution`, and `ExecutionVoting`. Each client can target a different provider and model. The defaults use `gpt-5.1` on OpenAI for all four clients. + +To mix providers for cost and quality balance, set the `Provider` and `Model` variables per client: + +```json +"env": { + "Executor__AIProviderKeys__OpenAI": "", + "Executor__AIProviderKeys__Anthropic": "", + "Executor__Clients__Planning__Provider": "Anthropic", + "Executor__Clients__Planning__Model": "claude-opus-4-5", + "Executor__Clients__PlanVoting__Provider": "OpenAI", + "Executor__Clients__PlanVoting__Model": "gpt-4.1-mini", + "Executor__Clients__Execution__Provider": "Anthropic", + "Executor__Clients__Execution__Model": "claude-opus-4-5", + "Executor__Clients__ExecutionVoting__Provider": "OpenAI", + "Executor__Clients__ExecutionVoting__Model": "gpt-4.1-mini" +} +``` + +Valid `Provider` values: `OpenAI`, `Anthropic`, `Google`. + +### Connect External MCP Servers + +MAKER can connect to external MCP servers as tool providers, making their tools available to the execution client. Configure each server with a name, description, URL, and optional API key using indexed environment variables: + +```json +"env": { + "Executor__McpServers__0__Name": "igniteui-cli", + "Executor__McpServers__0__Description": "Ignite UI CLI scaffolding and documentation tools", + "Executor__McpServers__0__Url": "https://mcp.example.com/igniteui-cli" +} +``` + +Increment the index (`0`, `1`, `2`, ...) to register additional servers. + +### Tune Batch Size and Voting Threshold + +Each MCP tool call accepts `batchSize` and `k` parameters in natural language. Set them in your prompt when invoking the tools. + +| Parameter | Default | Description | +| ----------- | ------- | ---------------------------------------------------------------------------------------------------------------------- | +| `batchSize` | `3` | Steps proposed or executed per voting round. Lower values give more control; higher values improve throughput. | +| `k` | `10` | Consensus margin threshold. Higher values require stronger agreement across voting agents before a result is accepted. | + +Lower `k` (3-5) for faster, exploratory tasks. Raise `k` (15-20) for critical tasks where correctness is more important than token cost. + +## Available Tools + +The MAKER MCP server exposes three tools to the connected AI agent. + +| Tool | Description | +| ------------------ | ------------------------------------------------------------------------- | +| `plan` | Decompose a task into a validated, ordered step list without executing it | +| `execute` | Execute a step list produced by `plan`, with consensus voting per batch | +| `plan_and_execute` | Plan and execute in one call with live progress events between phases | + +Use `plan` followed by `execute` when you want to inspect and validate the step plan before execution. Use `plan_and_execute` for unattended runs where inspection is not required. + +## Common Workflows + +### One-Shot Task + +Invoke `plan_and_execute` directly with default settings: + +> Use plan_and_execute to write a detailed comparison of REST vs GraphQL for a technical blog post. + +### Inspect the Plan Before Executing + +Use `plan` to review steps, then pass them to `execute`: + +> 1. Use plan to create a plan for migrating a PostgreSQL schema to a multi-tenant design. +> 2. Show me the steps. +> 3. Use execute with those steps to carry out the migration script. + +### High-Confidence Execution for Critical Tasks + +Raise `k` to require stronger consensus: + +> Use plan_and_execute with batchSize=3 and k=15 to review this smart contract for security vulnerabilities. + +### Low-Cost Exploratory Task + +Reduce both parameters to minimize token usage: + +> Use plan_and_execute with batchSize=3 and k=3 to draft a project README for a Node.js CLI tool. + +## Supported Platforms + +The native binary is distributed for four platforms. The correct binary is selected and cached automatically on first run. + +| Platform | Architecture | RID | +| -------- | --------------------- | ----------- | +| Windows | x64 | `win-x64` | +| macOS | x64 (Intel) | `osx-x64` | +| macOS | arm64 (Apple Silicon) | `osx-arm64` | +| Linux | x64 | `linux-x64` | + +ARM Linux is not currently packaged. To request additional platform support, open an issue at [github.com/IgniteUI/MAKER](https://github.com/IgniteUI/MAKER). + +The binary cache location can be overridden with the `MAKER_MCP_CACHE` environment variable. The default cache paths are `%LOCALAPPDATA%\maker-mcp\{version}\{rid}\` on Windows and `~/.cache/maker-mcp/{version}/{rid}/` on macOS and Linux. + +## Additional Resources + +- [AI-Assisted Development Overview](ai-assisted-development-overview.md) +- [Agent Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Web Components **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-web-components) +- [Ignite UI for Web Components **GitHub**](https://github.com/IgniteUI/igniteui-webcomponents) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/map-api.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/map-api.md index 835b86d2d..81602f021 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/map-api.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/map-api.md @@ -16,7 +16,7 @@ The Web Components [`IgcGeographicMapComponent`](https://www.infragistics.com/pr - [`zoomable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#zoomable) - [`zoomToGeographic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#zoomToGeographic) - [`worldRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#worldRect) -- [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcseriesviewercomponent.html#windowRect) +- [`windowRect`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowRect) - [`windowScale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#windowScale) - [`getGeographicFromZoom`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#getGeographicFromZoom) - [`getGeographicPoint`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmapcomponent.html#getGeographicPoint) @@ -42,9 +42,9 @@ The Web Components [`IgcGeographicSymbolSeriesComponent`](https://www.infragisti - [`latitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html#latitudeMemberPath) - [`longitudeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html#longitudeMemberPath) -- [`markerType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmarkerseriescomponent.html#markerType) -- [`markerBrush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmarkerseriescomponent.html#markerBrush) -- [`markerOutline`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicmarkerseriescomponent.html#markerOutline) +- [`markerType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html#markerType) +- [`markerBrush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html#markerBrush) +- [`markerOutline`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html#markerOutline) ## Web Components Geographic Bubble Series API @@ -61,10 +61,10 @@ The Web Components [`IgcGeographicProportionalSymbolSeriesComponent`](https://ww The Web Components [`IgcGeographicShapeSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriescomponent.html) and [`IgcGeographicPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicpolylineseriescomponent.html) have the same API members: -- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriesbasecomponent.html#shapeMemberPath) -- `Thickness` -- `Brush` -- `Outline` +- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicshapeseriescomponent.html#shapeMemberPath) +- [`thickness`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html#thickness) +- [`brush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html#brush) +- [`outline`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_maps.igcgeographicsymbolseriescomponent.html#outline) ## Web Components Geographic Area Series API diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/mask-input.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/mask-input.md index c36fb7a28..bcf6401b9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/mask-input.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/mask-input.md @@ -18,7 +18,6 @@ The Ignite UI for Web Components Mask Input is an input field that allows the de /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage First, you need to install the Ignite UI for Web Components by running the following command: @@ -77,10 +76,9 @@ After that you should see the following in your browser: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Prompt Character -Developers can customize the prompt symbol used for unfilled parts of the mask. To do this, simply provide any character to the [`prompt`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcmaskinputbasecomponent.html#prompt) property: +Developers can customize the prompt symbol used for unfilled parts of the mask. To do this, simply provide any character to the [`prompt`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcmaskinputcomponent.html#prompt) property: ```html @@ -90,7 +88,7 @@ By default, the `prompt` character is **underscore**. ### Placeholder -Developers can also take advantage of the [`placeholder`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputbasecomponent.html#placeholder) property, which serves the purpose of the native input placeholder attribute. If no value is provided for the placeholder, the value of the mask is used as such. +Developers can also take advantage of the [`placeholder`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcmaskinputcomponent.html#placeholder) property, which serves the purpose of the native input placeholder attribute. If no value is provided for the placeholder, the value of the mask is used as such. ```html @@ -105,7 +103,6 @@ The [`IgcMaskInputComponent`](https://www.infragistics.com/products/ignite-ui-we /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcMaskInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcmaskinputcomponent.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -147,7 +144,6 @@ igc-mask-input::part(input)::placeholder { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Assumptions and limitations - The masked input does not expose a _type_ attribute since it is always an input of type **text**. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/multi-column-combobox.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/multi-column-combobox.md deleted file mode 100644 index b6213d5b7..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/multi-column-combobox.md +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: Web Components Combo | Data Visualization Tools | Infragistics -_description: Infragistics' Web Components combo component helps you select the best chart to display your data. Improve your graphs and visualization with Ignite UI for Web Components! -_keywords: Web Components combo, drop down, Ignite UI for Web Components, Infragistics -mentionedTypes: [] -_tocName: Multi-Column Combo Box -_premium: true ---- - -# Web Components Multi-Column Combo Box Overview - -The Multi-Column Combo Box automatically generates columns for properties on the data object. This component is unique in that it's a combo box that visualizes large amounts of data similar to a data grid embedded in the dropdown. - -## Web Components Multi-Column Combo Box Example - -This sample demonstrates how to create [`IgcMultiColumnComboBoxComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html) that displays data in multiple columns in a popup window. - -```typescript -export class SampleComboData { - - public static getPopulation(): any[] { - const data = [ - { Country: "Afghanistan", Pop: 35320445, ID: "Afghanistan", Continent: "Middle East" }, - { Country: "Albania", Pop: 3215988, ID: "Albania", Continent: "Europe" }, - { Country: "Algeria", Pop: 35980193, ID: "Algeria", Continent: "Middle East" }, - { Country: "American Samoa", Pop: 69543, ID: "American Samoa", Continent: "Oceania" }, - { Country: "Andorra", Pop: 86165, ID: "Andorra", Continent: "Europe" }, - { Country: "Angola", Pop: 19618432, ID: "Angola", Continent: "Africa" }, - { Country: "Antigua and Barbuda", Pop: 89612, ID: "Antigua and Barbuda", Continent: "Central America" }, - { Country: "Argentina", Pop: 40764561, ID: "Argentina", Continent: "South America" }, - { Country: "Armenia", Pop: 3100236, ID: "Armenia", Continent: "Europe" }, - { Country: "Aruba", Pop: 108141, ID: "Aruba", Continent: "Central America" }, - { Country: "Australia", Pop: 22323900, ID: "Australia", Continent: "Oceania" }, - { Country: "Austria", Pop: 8423635, ID: "Austria", Continent: "Europe" }, - { Country: "Azerbaijan", Pop: 9173082, ID: "Azerbaijan", Continent: "Middle East" }, - { Country: "Bahamas", Pop: 347176, ID: "Bahamas", Continent: "Central America" }, - { Country: "Bahrain", Pop: 1323535, ID: "Bahrain", Continent: "Middle East" }, - { Country: "Bangladesh", Pop: 150493658, ID: "Bangladesh", Continent: "Asia" }, - { Country: "Barbados", Pop: 273925, ID: "Barbados", Continent: "Central America" }, - { Country: "Belarus", Pop: 9473000, ID: "Belarus", Continent: "Europe" }, - { Country: "Belgium", Pop: 11020952, ID: "Belgium", Continent: "Europe" }, - { Country: "Belize", Pop: 356600, ID: "Belize", Continent: "Central America" }, - { Country: "Benin", Pop: 9099922, ID: "Benin", Continent: "Africa" }, - { Country: "Bermuda", Pop: 64700, ID: "Bermuda", Continent: "Central America" }, - { Country: "Bhutan", Pop: 738267, ID: "Bhutan", Continent: "Asia" }, - { Country: "Bolivia", Pop: 10088108, ID: "Bolivia", Continent: "South America" }, - { Country: "Bosnia and Herzegovina", Pop: 3752228, ID: "Bosnia and Herzegovina", Continent: "Europe" }, - { Country: "Botswana", Pop: 2030738, ID: "Botswana", Continent: "Africa" }, - { Country: "Brazil", Pop: 196655014, ID: "Brazil", Continent: "South America" }, - { Country: "Brunei", Pop: 405938, ID: "Brunei", Continent: "Asia" }, - { Country: "Bulgaria", Pop: 7348328, ID: "Bulgaria", Continent: "Europe" }, - { Country: "Burkina Faso", Pop: 16967845, ID: "Burkina Faso", Continent: "Africa" }, - { Country: "Burundi", Pop: 8575172, ID: "Burundi", Continent: "Africa" }, - { Country: "Cambodia", Pop: 14305183, ID: "Cambodia", Continent: "Asia" }, - { Country: "Cameroon", Pop: 20030362, ID: "Cameroon", Continent: "Africa" }, - { Country: "Canada", Pop: 34483975, ID: "Canada", Continent: "North America" }, - { Country: "Cape Verde", Pop: 500585, ID: "Cape Verde", Continent: "Africa" }, - { Country: "Cayman Islands", Pop: 56729, ID: "Cayman Islands", Continent: "Central America" }, - { Country: "Central African Republic", Pop: 4486837, ID: "Central African Republic", Continent: "Africa" }, - { Country: "Chad", Pop: 11525496, ID: "Chad", Continent: "Africa" }, - { Country: "Channel Islands", Pop: 153876, ID: "Channel Islands", Continent: "Europe" }, - { Country: "Chile", Pop: 17269525, ID: "Chile", Continent: "South America" }, - { Country: "China", Pop: 1344130000, ID: "China", Continent: "Asia" }, - { Country: "Colombia", Pop: 46927125, ID: "Colombia", Continent: "South America" }, - { Country: "Comoros", Pop: 753943, ID: "Comoros", Continent: "Africa" }, - { Country: "Congo, Dem. Rep.", Pop: 67757577, ID: "Congo Dem Rep ", Continent: "Africa" }, - { Country: "Congo, Rep.", Pop: 4139748, ID: "Congo Rep ", Continent: "Africa" }, - { Country: "Costa Rica", Pop: 4726575, ID: "Costa Rica", Continent: "Central America" }, - { Country: "Ivory Coast", Pop: 20152894, ID: "Cote d Ivoire", Continent: "Africa" }, - { Country: "Croatia", Pop: 4403000, ID: "Croatia", Continent: "Europe" }, - { Country: "Cuba", Pop: 11253665, ID: "Cuba", Continent: "Central America" }, - { Country: "Curacao", Pop: 145619, ID: "Curacao", Continent: "Central America" }, - { Country: "Cyprus", Pop: 1116564, ID: "Cyprus", Continent: "Europe" }, - { Country: "Czechia", Pop: 10496088, ID: "Czechia", Continent: "Europe" }, - { Country: "Denmark", Pop: 5570572, ID: "Denmark", Continent: "Europe" }, - { Country: "Djibouti", Pop: 905564, ID: "Djibouti", Continent: "Africa" }, - { Country: "Dominica", Pop: 67675, ID: "Dominica", Continent: "Central America" }, - { Country: "Dominican Republic", Pop: 10056181, ID: "Dominican Republic", Continent: "Central America" }, - { Country: "Ecuador", Pop: 14666055, ID: "Ecuador", Continent: "South America" }, - { Country: "Egypt, Arab Rep.", Pop: 82536770, ID: "Egypt Arab Rep ", Continent: "Middle East" }, - { Country: "El Salvador", Pop: 6227491, ID: "El Salvador", Continent: "Central America" }, - { Country: "Equatorial Guinea", Pop: 720213, ID: "Equatorial Guinea", Continent: "Africa" }, - { Country: "Eritrea", Pop: 5415280, ID: "Eritrea", Continent: "Africa" }, - { Country: "Estonia", Pop: 1339928, ID: "Estonia", Continent: "Europe" }, - { Country: "Ethiopia", Pop: 84734262, ID: "Ethiopia", Continent: "Africa" }, - { Country: "Faeroe Islands", Pop: 48863, ID: "Faeroe Islands", Continent: "Central America" }, - { Country: "Fiji", Pop: 868406, ID: "Fiji", Continent: "Oceania" }, - { Country: "Finland", Pop: 5388272, ID: "Finland", Continent: "Europe" }, - { Country: "France", Pop: 65433714, ID: "France", Continent: "Europe" }, - { Country: "French Polynesia", Pop: 273777, ID: "French Polynesia", Continent: "Oceania" }, - { Country: "Gabon", Pop: 1534262, ID: "Gabon", Continent: "Africa" }, - { Country: "Gambia", Pop: 1776103, ID: "Gambia", Continent: "Africa" }, - { Country: "Georgia", Pop: 4486000, ID: "Georgia", Continent: "Europe" }, - { Country: "Germany", Pop: 81797673, ID: "Germany", Continent: "Europe" }, - { Country: "Ghana", Pop: 24965816, ID: "Ghana", Continent: "Africa" }, - { Country: "Greece", Pop: 11300410, ID: "Greece", Continent: "Europe" }, - { Country: "Greenland", Pop: 56840, ID: "Greenland", Continent: "North America" }, - { Country: "Grenada", Pop: 104890, ID: "Grenada", Continent: "Central America" }, - { Country: "Guam", Pop: 182111, ID: "Guam", Continent: "Central America" }, - { Country: "Guatemala", Pop: 14757316, ID: "Guatemala", Continent: "Central America" }, - { Country: "Guinea", Pop: 10221808, ID: "Guinea", Continent: "Africa" }, - { Country: "Guinea-Bissau", Pop: 1547061, ID: "Guinea-Bissau", Continent: "Africa" }, - { Country: "Guyana", Pop: 756040, ID: "Guyana", Continent: "South America" }, - { Country: "Haiti", Pop: 10123787, ID: "Haiti", Continent: "Central America" }, - { Country: "Honduras", Pop: 7754687, ID: "Honduras", Continent: "Central America" }, - { Country: "Hong Kong SAR, China", Pop: 7071600, ID: "Hong Kong SAR China", Continent: "Asia" }, - { Country: "Hungary", Pop: 9971727, ID: "Hungary", Continent: "Europe" }, - { Country: "Iceland", Pop: 319014, ID: "Iceland", Continent: "Europe" }, - { Country: "India", Pop: 1241491960, ID: "India", Continent: "Asia" }, - { Country: "Indonesia", Pop: 242325638, ID: "Indonesia", Continent: "Asia" }, - { Country: "Iran, Islamic Rep.", Pop: 74798599, ID: "Iran Islamic Rep ", Continent: "Middle East" }, - { Country: "Iraq", Pop: 32961959, ID: "Iraq", Continent: "Middle East" }, - { Country: "Ireland", Pop: 4576317, ID: "Ireland", Continent: "Europe" }, - { Country: "Isle of Man", Pop: 83327, ID: "Isle of Man", Continent: "Europe" }, - { Country: "Israel", Pop: 7765900, ID: "Israel", Continent: "Middle East" }, - { Country: "Italy", Pop: 60723603, ID: "Italy", Continent: "Europe" }, - { Country: "Jamaica", Pop: 2706500, ID: "Jamaica", Continent: "Central America" }, - { Country: "Japan", Pop: 127817277, ID: "Japan", Continent: "Asia" }, - { Country: "Jordan", Pop: 6181000, ID: "Jordan", Continent: "Middle East" }, - { Country: "Kazakhstan", Pop: 16558676, ID: "Kazakhstan", Continent: "Asia" }, - { Country: "Kenya", Pop: 41609728, ID: "Kenya", Continent: "Africa" }, - { Country: "Kiribati", Pop: 101093, ID: "Kiribati", Continent: "Oceania" }, - { Country: "Korea, Dem. Rep.", Pop: 24451285, ID: "Korea Dem Rep ", Continent: "Asia" }, - { Country: "Korea, Rep.", Pop: 49779000, ID: "Korea Rep ", Continent: "Asia" }, - { Country: "Kosovo", Pop: 1802765, ID: "Kosovo", Continent: "Europe" }, - { Country: "Kuwait", Pop: 2818042, ID: "Kuwait", Continent: "Middle East" }, - { Country: "Kyrgyz Republic", Pop: 5514600, ID: "Kyrgyz Republic", Continent: "Asia" }, - { Country: "Lao PDR", Pop: 6288037, ID: "Lao PDR", Continent: "Asia" }, - { Country: "Latvia", Pop: 2058184, ID: "Latvia", Continent: "Europe" }, - { Country: "Lebanon", Pop: 4259405, ID: "Lebanon", Continent: "Middle East" }, - { Country: "Lesotho", Pop: 2193843, ID: "Lesotho", Continent: "Africa" }, - { Country: "Liberia", Pop: 4128572, ID: "Liberia", Continent: "Africa" }, - { Country: "Libya", Pop: 6422772, ID: "Libya", Continent: "Middle East" }, - { Country: "Liechtenstein", Pop: 36304, ID: "Liechtenstein", Continent: "Europe" }, - { Country: "Lithuania", Pop: 3030173, ID: "Lithuania", Continent: "Europe" }, - { Country: "Luxembourg", Pop: 518252, ID: "Luxembourg", Continent: "Europe" }, - { Country: "Macao SAR, China", Pop: 555731, ID: "Macao SAR China", Continent: "Asia" }, - { Country: "Macedonia, FYR", Pop: 2063893, ID: "Macedonia FYR", Continent: "Europe" }, - { Country: "Madagascar", Pop: 21315135, ID: "Madagascar", Continent: "Africa" }, - { Country: "Malawi", Pop: 15380888, ID: "Malawi", Continent: "Africa" }, - { Country: "Malaysia", Pop: 28859154, ID: "Malaysia", Continent: "Asia" }, - { Country: "Maldives", Pop: 320081, ID: "Maldives", Continent: "Asia" }, - { Country: "Mali", Pop: 15839538, ID: "Mali", Continent: "Africa" }, - { Country: "Malta", Pop: 415654, ID: "Malta", Continent: "Europe" }, - { Country: "Marshall Islands", Pop: 54816, ID: "Marshall Islands", Continent: "Oceania" }, - { Country: "Mauritania", Pop: 3541540, ID: "Mauritania", Continent: "Africa" }, - { Country: "Mauritius", Pop: 1286051, ID: "Mauritius", Continent: "Africa" }, - { Country: "Mexico", Pop: 114793341, ID: "Mexico", Continent: "North America" }, - { Country: "Micronesia, Fed. Sts.", Pop: 111542, ID: "Micronesia Fed Sts ", Continent: "Oceania" }, - { Country: "Moldova", Pop: 3559000, ID: "Moldova", Continent: "Europe" }, - { Country: "Monaco", Pop: 35427, ID: "Monaco", Continent: "Europe" }, - { Country: "Mongolia", Pop: 2800114, ID: "Mongolia", Continent: "Asia" }, - { Country: "Montenegro", Pop: 632261, ID: "Montenegro", Continent: "Europe" }, - { Country: "Morocco", Pop: 32272974, ID: "Morocco", Continent: "Middle East" }, - { Country: "Mozambique", Pop: 23929708, ID: "Mozambique", Continent: "Africa" }, - { Country: "Myanmar", Pop: 48336763, ID: "Myanmar", Continent: "Asia" }, - { Country: "Namibia", Pop: 2324004, ID: "Namibia", Continent: "Africa" }, - { Country: "Nepal", Pop: 30485798, ID: "Nepal", Continent: "Asia" }, - { Country: "Netherlands", Pop: 16693074, ID: "Netherlands", Continent: "Europe" }, - { Country: "New Caledonia", Pop: 254024, ID: "New Caledonia", Continent: "Oceania" }, - { Country: "New Zealand", Pop: 4405200, ID: "New Zealand", Continent: "Oceania" }, - { Country: "Nicaragua", Pop: 5869859, ID: "Nicaragua", Continent: "Central America" }, - { Country: "Niger", Pop: 16068994, ID: "Niger", Continent: "Africa" }, - { Country: "Nigeria", Pop: 162470737, ID: "Nigeria", Continent: "Africa" }, - { Country: "Northern Mariana Islands", Pop: 61174, ID: "Northern Mariana Islands", Continent: "Central America" }, - { Country: "Norway", Pop: 4953088, ID: "Norway", Continent: "Europe" }, - { Country: "Oman", Pop: 2846145, ID: "Oman", Continent: "Middle East" }, - { Country: "Pakistan", Pop: 176745364, ID: "Pakistan", Continent: "Middle East" }, - { Country: "Palau", Pop: 20609, ID: "Palau", Continent: "Oceania" }, - { Country: "Panama", Pop: 3571185, ID: "Panama", Continent: "Central America" }, - { Country: "Papua New Guinea", Pop: 7013829, ID: "Papua New Guinea", Continent: "Oceania" }, - { Country: "Paraguay", Pop: 6568290, ID: "Paraguay", Continent: "South America" }, - { Country: "Peru", Pop: 29399817, ID: "Peru", Continent: "South America" }, - { Country: "Philippines", Pop: 94852030, ID: "Philippines", Continent: "Asia" }, - { Country: "Poland", Pop: 38534157, ID: "Poland", Continent: "Europe" }, - { Country: "Portugal", Pop: 10556999, ID: "Portugal", Continent: "Europe" }, - { Country: "Puerto Rico", Pop: 3706690, ID: "Puerto Rico", Continent: "Central America" }, - { Country: "Qatar", Pop: 1870041, ID: "Qatar", Continent: "Middle East" }, - { Country: "Romania", Pop: 21384832, ID: "Romania", Continent: "Europe" }, - { Country: "Russian Federation", Pop: 142960000, ID: "Russian Federation", Continent: "Europe" }, - { Country: "Rwanda", Pop: 10942950, ID: "Rwanda", Continent: "Africa" }, - { Country: "Samoa", Pop: 183874, ID: "Samoa", Continent: "Oceania" }, - { Country: "San Marino", Pop: 31735, ID: "San Marino", Continent: "Europe" }, - { Country: "Sao Tome and Principe", Pop: 168526, ID: "Sao Tome and Principe", Continent: "Africa" }, - { Country: "Saudi Arabia", Pop: 28082541, ID: "Saudi Arabia", Continent: "Middle East" }, - { Country: "Senegal", Pop: 12767556, ID: "Senegal", Continent: "Africa" }, - { Country: "Serbia", Pop: 7258745, ID: "Serbia", Continent: "Europe" }, - { Country: "Seychelles", Pop: 86000, ID: "Seychelles", Continent: "Africa" }, - { Country: "Sierra Leone", Pop: 5997486, ID: "Sierra Leone", Continent: "Africa" }, - { Country: "Singapore", Pop: 5183700, ID: "Singapore", Continent: "Asia" }, - { Country: "Sint Maarten", Pop: 36609, ID: "Sint Maarten", Continent: "Europe" }, - { Country: "Slovak Republic", Pop: 5398384, ID: "Slovak Republic", Continent: "Europe" }, - { Country: "Slovenia", Pop: 2052843, ID: "Slovenia", Continent: "Europe" }, - { Country: "Solomon Islands", Pop: 552267, ID: "Solomon Islands", Continent: "Oceania" }, - { Country: "Somalia", Pop: 9556873, ID: "Somalia", Continent: "Middle East" }, - { Country: "South Africa", Pop: 50586757, ID: "South Africa", Continent: "Africa" }, - { Country: "South Sudan", Pop: 10314021, ID: "South Sudan", Continent: "Africa" }, - { Country: "Spain", Pop: 46174601, ID: "Spain", Continent: "Europe" }, - { Country: "Sri Lanka", Pop: 20869000, ID: "Sri Lanka", Continent: "Asia" }, - { Country: "St. Kitts and Nevis", Pop: 53051, ID: "St Kitts and Nevis", Continent: "Central America" }, - { Country: "St. Lucia", Pop: 176000, ID: "St Lucia", Continent: "Central America" }, - { Country: "St. Martin (French part)", Pop: 30615, ID: "St Martin French part ", Continent: "Europe" }, - { Country: "St. Vincent and the Grenadines", Pop: 109365, ID: "St Vincent and the Grenadines", Continent: "Central America" }, - { Country: "Sudan", Pop: 34318385, ID: "Sudan", Continent: "Africa" }, - { Country: "SuriCountry", Pop: 529419, ID: "SuriCountry", Continent: "South America" }, - { Country: "Swaziland", Pop: 1067773, ID: "Swaziland", Continent: "Africa" }, - { Country: "Sweden", Pop: 9449213, ID: "Sweden", Continent: "Europe" }, - { Country: "Switzerland", Pop: 7912398, ID: "Switzerland", Continent: "Europe" }, - { Country: "Syrian Arab Republic", Pop: 20820311, ID: "Syrian Arab Republic", Continent: "Middle East" }, - { Country: "Tajikistan", Pop: 6976958, ID: "Tajikistan", Continent: "Asia" }, - { Country: "Tanzania", Pop: 46218486, ID: "Tanzania", Continent: "Africa" }, - { Country: "Thailand", Pop: 69518555, ID: "Thailand", Continent: "Asia" }, - { Country: "Timor-Leste", Pop: 1175880, ID: "Timor-Leste", Continent: "Oceania" }, - { Country: "Togo", Pop: 6154813, ID: "Togo", Continent: "Africa" }, - { Country: "Tonga", Pop: 104509, ID: "Tonga", Continent: "Oceania" }, - { Country: "Trinidad and Tobago", Pop: 1346350, ID: "Trinidad and Tobago", Continent: "Central America" }, - { Country: "Tunisia", Pop: 10673800, ID: "Tunisia", Continent: "Middle East" }, - { Country: "Turkey", Pop: 73639596, ID: "Turkey", Continent: "Middle East" }, - { Country: "Turkmenistan", Pop: 5105301, ID: "Turkmenistan", Continent: "Asia" }, - { Country: "Turks and Caicos Islands", Pop: 39184, ID: "Turks and Caicos Islands", Continent: "Central America" }, - { Country: "Tuvalu", Pop: 9847, ID: "Tuvalu", Continent: "Oceania" }, - { Country: "Uganda", Pop: 34509205, ID: "Uganda", Continent: "Africa" }, - { Country: "Ukraine", Pop: 45706100, ID: "Ukraine", Continent: "Europe" }, - { Country: "United Arab Emirates", Pop: 7890924, ID: "United Arab Emirates", Continent: "Middle East" }, - { Country: "United Kingdom", Pop: 62744081, ID: "United Kingdom", Continent: "Europe" }, - { Country: "United States", Pop: 311591917, ID: "United States", Continent: "North America" }, - { Country: "Uruguay", Pop: 3368595, ID: "Uruguay", Continent: "South America" }, - { Country: "Uzbekistan", Pop: 29341200, ID: "Uzbekistan", Continent: "Asia" }, - { Country: "Vanuatu", Pop: 245619, ID: "Vanuatu", Continent: "Oceania" }, - { Country: "Venezuela, RB", Pop: 29278000, ID: "Venezuela RB", Continent: "South America" }, - { Country: "Vietnam", Pop: 87840000, ID: "Vietnam", Continent: "Asia" }, - { Country: "Virgin Islands (U.S.)", Pop: 109666, ID: "Virgin Islands US", Continent: "Central America" }, - { Country: "West Bank and Gaza", Pop: 3927051, ID: "West Bank and Gaza", Continent: "Middle East" }, - { Country: "Yemen, Rep.", Pop: 24799880, ID: "Yemen Rep ", Continent: "Middle East" }, - { Country: "Zambia", Pop: 13474959, ID: "Zambia", Continent: "Africa" }, - { Country: "Zimbabwe", Pop: 12754378, ID: "Zimbabwe", Continent: "Africa" } - ]; - return data; - } -} -``` -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -## Dependencies - -When installing the charts component, the core package must also be installed. - -```cmd -npm install --save igniteui-webcomponents-core -npm install --save igniteui-webcomponents-data-grids -npm install --save igniteui-webcomponents-inputs -npm install --save igniteui-webcomponents-layouts -``` - -## Component Modules - -The Multi-Column Combo Box requires the following modules: - -```ts -import { IgcMultiColumnComboBoxModule } from 'igniteui-webcomponents-data-grids'; -import { IgcMultiColumnComboBoxComponent } from 'igniteui-webcomponents-data-grids'; - -ModuleManager.register( - IgcMultiColumnComboBoxModule -); -``` - -## Usage - -### Binding a Data Source - -In order to display your objects in the Multi-Column Combo Box component, you will need to bind the `DataSource` property. This can be bound in the form of an array of complex objects. The following code demonstrates how to bind the data source property. - -In the below code snippet, the "countryNames" collection is an any\[] full of custom objects. - -```html - - -``` - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; -} -``` - -### Setting Display Value and Data Value - -You can configure different properties of the Multi-Column Combo Box's bound `DataSource` to act as the display text for the control as well as the underlying value when a selection is made. This is done by setting the [`textField`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html#textField) and [`valueField`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html#valueField) properties of the control, respectively, to the name of the property on the data item that you want to represent these things. - -The following code snippet shows how to set these properties, given that the underlying data item has a "Country" and "ID" property: - -```html - - -``` - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.textField = "Country"; - multiColumnComboBox.valueField = ["ID"]; -} -``` - -### Setting Fields - -By default, the Multi-Column Combo Box will show all of the properties on the underlying data item, but this can be controlled by setting the [`fields`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html#fields) property on the component. This property takes a `string[]` of property paths on the underlying data item to determine which properties are shown. - -The following code snippet shows how to set this, and the resulting drop-down would only show the ID and Country columns: - -```html - - -``` - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.fields = ["ID", "Country"]; -} -``` - -### Setting Placeholder Text - -It is possible to configure the text that shows as a placeholder for when there is no selection in the Multi-Column Combo Box component. This is done by setting the [`placeholder`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html#placeholder) property to the string you would like to be displayed. The following code demonstrates how to set this: - -```html - - -``` - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.placeholder = "Please choose a country"; -} -``` - -### Configuring Sorting Mode - -The user has the ability to sort the columns that are displayed in the Multi-Column Combo Box by clicking the header of the column in the drop-down. The way the sorting is configured can be modified as well, as the columns can be sorted by only a single column or multiple columns, and they can be limited to either ascending and descending, or they can be tri-state. This is done by setting the [`sortMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html#sortMode) property of the component. - -Note, the TriState sort options will allow sorted columns to be unsorted. - -The following code demonstrates how to set the Multi-Column Combo Box to be able to sort by multiple columns tri-state. - -```html - - -``` - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.sortMode = SortMode.SortByMultipleColumnsTriState; -} -``` - -## API References - -- `DataSource` -- [`fields`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html#fields) -- `GetValueAsync` -- `GetValue` -- [`IgcMultiColumnComboBoxComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html) -- [`placeholder`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html#placeholder) -- [`sortMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html#sortMode) -- [`textField`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html#textField) -- `ValueChanged` -- [`valueField`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igcmulticolumncomboboxcomponent.html#valueField) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/navbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/navbar.md index 1777c87fd..db4d539a0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/navbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/navbar.md @@ -20,7 +20,6 @@ The following example represents a [`IgcNavbarComponent`](https://www.infragisti /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage First, you need to install the Ignite UI for Web Components by running the following command: @@ -105,7 +104,6 @@ igc-navbar::part(middle) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/navigation-drawer.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/navigation-drawer.md index 46e86f519..ed59d0863 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/navigation-drawer.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/navigation-drawer.md @@ -29,7 +29,6 @@ igc-icon-button::part(icon) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage First, you need to install the Ignite UI for Web Components by running the following command: @@ -84,7 +83,6 @@ igc-icon-button::part(icon) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Navbar Integration While any content can be provided in the drawer, the [`IgcNavDrawerItemComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcnavdraweritemcomponent.html) is available to apply out-of-the-box styling to the items. @@ -160,7 +158,6 @@ If all goes well, your component should now look like this: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Mini Variant With the mini variant, the Navigation Drawer changes its width instead of closing. It is used to maintain quick navigation, available at all times, leaving just the icons. To achieve that, you only need to set up the `mini` slot of the drawer. @@ -194,7 +191,6 @@ And here's the result: /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcNavDrawerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcnavdrawercomponent.html) exposes several CSS parts - `base`, `main`, and `mini`, giving you full control over their styling. @@ -258,7 +254,6 @@ igc-icon-button::part(icon) { } ``` - ## API References - [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/overview.md index 924d1f136..fd9f482ad 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/overview.md @@ -1,233 +1,287 @@ --- -title: Free Web Components Data Grid Lite (Open Source) - Ignite UI Grid Lite | MIT license -_description: Create apps with our open-source Grid Lite. It’s lightweight and packed with essential features - filtering, hiding, sorting, and more. Try now. -_keywords: overview, Web Components, {ComponentKeywords}, Ignite UI for Web Components, Infragistics -mentionedTypes: [{ComponentApiMembers}] -namespace: Infragistics.Controls +title: Web Components ComboBox Component – Ignite UI for Web Components +_description: Web Components Combo component provides a powerful input, combining features of the basic HTML input, select, filtering and custom drop-down lists. Try it for FREE +_keywords: Ignite UI for Web Components, UI controls, Web Components widgets, web widgets, UI widgets, Web Components, Native Web Components Components Suite, Native Web Components Controls, Native Web Components Components Library, Web Components ComboBox component _license: MIT -_tocName: Grid Lite +mentionedTypes: ["Combo", "ComboItem", "ComboHeader", "ComboList"] +_tocName: Combo Box --- -# Free & Open-Source Web Components Data Grid (Grid Lite) +# Web Components ComboBox Overview -The Ignite UI for Web Components Grid Lite is a lightweight, high-performance Web Components data grid that’s free to use, open-source, and built for modern Web Components applications. +Web Components ComboBox is a lightweight editor that enables users to easily select, filter, and group different predefined options in a provided list. The component also supports options for Web Components ComboBox keyboard navigation, templates to customize how the items, header, and footer are displayed. -Grid Lite is a free, open-source JavaScript data grid built as a Web Component, which means you can use it dependency-free with or without a web framework. It delivers essential data-display functionality with minimal overhead and the performance users expect. The Web Components Grid Lite is designed for developers who need fast and lightweight data presentation. +The Ignite UI for Web Components ComboBox component provides a list of options from which users can make a selection. It displays all options in a virtualized list of items, meaning the ComboBox can simultaneously show thousands of records, where one or more options can be selected. Additionally, the component features case-sensitive filtering, grouping, complex data binding and more. -## What You Get with our Free Web Components Data Grid +## Web Components ComboBox Example -Our free, open-source Web Components Grid Lite comes with the following column-based features: sorting, filtering, hiding, resizing and a variety of pre-defined data types. Blazing-fast performance is delivered with the use of row virtualization. In addition, the component supports keyboard navigation and theming through the [Ignite UI Theming Framework](../themes/overview.md). +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +``` -## Installation and Setup +
-### Installation +## Getting Started with Web Components ComboBox -To install Grid Lite, go to the root folder of your project (where `package.json` is located) and run the following command using npm: +First, you need to install the Ignite UI for Web Components by running the following command: ```cmd -npm install igniteui-grid-lite +npm install igniteui-webcomponents ``` -Or using yarn: +Before using the [`IgcComboComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html) component, you need to register it together with its additional components and necessary CSS: -```cmd -yarn add igniteui-grid-lite +```ts +import { defineComponents, IgcComboComponent } +from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +defineComponents(IgcComboComponent); ``` -### Using the Grid Lite in your Web Components code +For a complete introduction to the Ignite UI for Web Components, read the [**Getting Started**](../../general-getting-started.md) topic. -```html -
- -
-``` +> [!WARNING] +> The [`IgcComboComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html) component doesn't work with the standard `` element. Use `Form` instead. + +Then, we will bind an array of objects to the combo data source used for building the list of options. + +```ts +interface City { + id: string; + name: string; +} -## Grid Lite in Action - -```typescript -export type UserSimple = { - id: string; - username: string; - email: string; - subscribed: boolean; -}; - -export type ProductInfo = { - id: string; - name: string; - price: number; - sold: number; - rating: number; - total: number; -}; - -export type User = { - id: string; - firstName: string; - lastName: string; - age: number; - email: string; - avatar: string; - active: boolean; - priority: 'Low' | 'Standard' | 'High'; - satisfaction: number; - registeredAt: Date; -}; - -export class GridLiteDataService { - private counter = 0; - - private namesMen = ['John', 'Bob', 'Mark', 'Charlie', 'Martin', 'Bill', 'Frank', 'Larry', 'Henry', 'Steve', 'Mike', 'Andrew']; - private namesWomen = ['Jane', 'Alice', 'Diana', 'Eve', 'Grace' , 'Katie', 'Irene', 'Liz', 'Fiona', 'Pam', 'Val', 'Mindy']; - private lastNames = ['Smith', 'Johnson', 'Mendoza', 'Brown', 'Spencer', 'Stone', 'Stark', 'Rooney']; - private productNames = ['Widget', 'Gadget', 'Gizmo', 'Device', 'Tool', 'Instrument', 'Machine', 'Equipment']; - private productModels = ['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite']; - private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High']; - - private randomInt(min: number, max: number): number { - return Math.floor(Math.random() * (max - min + 1)) + min; - } - - private randomFloat(min: number, max: number, precision = 2): number { - const array = new Uint32Array(1); - window.crypto.getRandomValues(array); - const random01 = array[0] / 2 ** 32; - return parseFloat((random01 * (max - min) + min).toFixed(precision)); - } - - private randomElement(array: T[]): T { - return array[this.randomInt(0, array.length - 1)]; - } - - private randomBoolean(): boolean { - const array = new Uint8Array(1); - window.crypto.getRandomValues(array); - return (array[0] & 1) === 0; - } - - private generateId(): string { - return `1000-${this.counter++}-${this.randomInt(1000, 9999)}`; - } - - createProductInfo(): ProductInfo { - const price = this.randomFloat(50, 500, 2); - const sold = this.randomInt(10, 100); - const total = parseFloat((price * sold).toFixed(2)); - const product = this.randomElement(this.productNames) + ' ' + this.randomElement(this.productModels); - - return { - price, - sold, - total, - id: this.generateId(), - name: product, - rating: this.randomFloat(0, 5, 1) - }; - } - - createUserSimple(): UserSimple { - const firstName = this.randomElement(this.namesMen.concat(this.namesWomen)).toLowerCase(); - const lastName = this.randomElement(this.lastNames).toLowerCase(); - const email = firstName + '.' + lastName + '@example.com'; - const username = firstName + '.' + lastName + this.randomInt(1, 99); - return { - id: this.generateId(), - username: username, - email: email, - subscribed: this.randomBoolean() - }; - } - - createUser(): User { - let imagePath: string = ""; - let firstName: string = ""; - const gender = this.randomInt(0, 1); - if (gender === 0) { - imagePath = "https://dl.infragistics.com/x/img/people/men/" + this.randomInt(10, 40) + ".png"; - firstName = this.randomElement(this.namesMen); - } else { - imagePath = "https://dl.infragistics.com/x/img/people/women/" + this.randomInt(10, 40) + ".png"; - firstName = this.randomElement(this.namesWomen); +const cities: City[] = [ + { name: 'London', id: 'UK01' }, + { name: 'Sofia', id: 'BG01'}, + { name: 'New York', id: 'NY01'} +]; + +export class Sample { + private combo: IgcComboComponent; + + constructor() { + this.combo = document.getElementById('basic-combo') as IgcComboComponent; + this.combo.data = cities; } - const lastName = this.randomElement(this.lastNames); - const email = firstName.toLowerCase() + '.' + lastName.toLowerCase() + '@example.com'; - - return { - id: this.generateId(), - firstName, - lastName, - age: this.randomInt(18, 90), - email, - avatar: imagePath, - active: this.randomBoolean(), - priority: this.randomElement(this.priorities), - satisfaction: this.randomInt(0, 5), - registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000)) - }; - } - - generateUsers(count: number): User[] { - return Array.from({ length: count }, () => this.createUser()); - } - - generateProducts(count: number): ProductInfo[] { - return Array.from({ length: count }, () => this.createProductInfo()); - } - - generateSimpleUsers(count: number): UserSimple[] { - return Array.from({ length: count }, () => this.createUserSimple()); - } } ``` -```css -.grid-lite-wrapper { - width: 100%; - height: 100%; -} -igc-grid-lite { - min-height: 75vh; - --ig-size: 1; +```html + +``` + +### Data value and display properties + +When the combo is bound to a list of complex data (i.e. objects), we need to specify a property that the control will use to handle item selection. The component exposes the following properties: + + + +- `T` - **required**, if [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) is omitted, this should be set to "object", otherwise this needs to match the property type of [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey). + + + +- [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) - **Optional**, **required** for complex data object - Determines which field of the data source will be used to make selections. If [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) is omitted, the selection API will use object references to select items. +- [`displayKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#displayKey) - **Optional**, **recommended** for complex data objects - Determines which field in the data source is used as the display value. If no value is specified for [`displayKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#displayKey), the combo will use the specified [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) (if any). + In our case, we want the combo to display the `name` of each city and use the `id` field for item selection and as the underlying value for each item. Therefore, we provide these properties to the combo's [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) and [`displayKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#displayKey) respectively. + +> [!Note] +> When the data source consists of primitive types (e.g. `strings`, `numbers`, etc.), **do not** specify a [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) and/or [`displayKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#displayKey). + +### Setting Value + +The ComboBox component exposes a [`value`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#value) getter and setter in addition to an attribute, which is also called value. You can use the value attribute to set the selected items on component initialization. + +If you want to read the value, i.e. the list of currently selected items, or to update the value use the value getter and setter respectively. The value getter will return a list of all selected items as represented by the [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey). Likewise, if you want to update the list of selected items by using the value setter, you should provide a list of items by their [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey). + +Example: + +```ts +const combo = document.getElementById('basic-combo') as IgcComboComponent; + +// Given the overview example from above this will return ['BG01'] +console.log(combo.value); + +// Change the selected items to New York and London +combo.value = ['NY01', 'UK01']; +``` + +### Selection API + +The combo component exposes APIs that allow you to change the currently selected items. + +Besides selecting items from the list of options by user interaction, you can select items programmatically. This is done via the [`select`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#select) and [`deselect`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#deselect) methods. You can pass an array of items to both methods. If the methods are called with no arguments all items will be selected/deselected depending on which method is called. If you have specified a [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) for your combo component, then you should pass the value keys of the items you would like to select/deselect: + +#### Select/deselect some items + +```ts +// Select/deselect items by their IDs as valueKey is set to 'id' +combo.select(['BG01', 'BG02', 'BG03', 'BG04']); +combo.deselect(['BG01', 'BG02', 'BG03', 'BG04']); +``` + +#### Select/deselect all items + +```ts +// Select/deselect all items +combo.select(); +combo.deselect(); +``` + +If the [`valueKey`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#valueKey) property is omitted, you will have to list the items you wish to select/deselect as objects references: + +```ts +// Select/deselect values by object references when no valueKey is provided +combo.select([cities[1], cities[5]]); +combo.deselect([cities[1], cities[5]]); +``` + +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +.button-container { + display: flex; + margin-top: 16px; + gap: 8px; } ``` +### Validation + +The Ignite UI for Web Components Combo component supports most of the [`IgcInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html) properties, such as [`required`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#required), [`disabled`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#disabled), [`autofocus`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html#autofocus), [`invalid`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#invalid), etc. The component also exposes two methods bound to its validation: -Grid Lite is designed to give you the core features that you need to deliver a beautiful data grid / data table experience in your apps. Designed for performance and beauty, the Grid Lite will work in any framework, on any platform. +- [`reportValidity`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#reportValidity) - checks for validity and returns true if the component satisfies the validation constraints. +- [`checkValidity`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html#checkValidity) - a wrapper around reportValidity to comply with the native input API. -## Performance Built In +## Keyboard Navigation -Row-level virtualization allows you to render unlimited amounts of data with smooth scrolling. +When the combo component is focused and the list of options is **not visible**: -## Automatic Column Types +- Open the list of options using Down/Alt + Down keys. + +When the combo component is focused and the list of options is **visible**: + +- Using the Down key will activate the next item in the list. +- Using the Up key will activate the previous item in the list. If the first item is already active it will focus the input. +- Using the HOME or END keys will activate the first or the last item in the list. +- Using the SPACE key will select the active item. +- Using the ENTER key will select the active item and close the list of options. +- Using the ESC or TAB/SHIFT + TAB keys will close the list of options. + +## Styling + +You can change the appearance of the [`IgcComboComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html) component and its items, by using the exposed CSS parts listed below: + +| Part name | Description | +| -------------------- | ------------------------------------------------------------------------------- | +| `label` | The encapsulated text label. | +| `input` | The main input field. | +| `native-input` | The native input of the main input field. | +| `prefix` | The prefix wrapper. | +| `suffix` | The suffix wrapper. | +| `toggle-icon` | The toggle icon wrapper. | +| `clear-icon` | The clear icon wrapper. | +| `case-icon` | A case-icon wrapper that renders content inside the suffix of the filter-input. | +| `helper-text` | The helper text wrapper. | +| `search-input` | The search input field. | +| `list-wrapper` | The list of options wrapper. | +| `list` | The list of options box. | +| `item` | Represents each item in the list of options. | +| `group-header` | Represents each header in the list of options. | +| `active` | Appended to the item parts list when the item is active. | +| `selected` | Appended to the item parts list when the item is selected. | +| `checkbox` | Represents each checkbox of each list item. | +| `checkbox-indicator` | Represents the checkbox indicator of each list item. | +| `checked` | Appended to checkbox parts list when checkbox is checked. | +| `header` | The container holding the header content. | +| `footer` | The container holding the footer content. | +| `empty` | The container holding the empty content. | + +Using the CSS parts we have full control over the Combo styling. + +```css +igc-combo::part(search-input) { + background-color: var(--ig-gray-100); + border-radius: 2px; +} -Column types are automatically generated based on your data source, with built-in filtering tailored to each column type. +igc-combo::part(input) { + background-color: var(--ig-gray-100); +} -## Custom Column Templates +igc-combo::part(prefix) { + background-color: var(--ig-secondary-50); + color: var(--ig-primary-500); +} -Deliver any type of UX with column templates. Anything you imagine can render in a grid column! +igc-combo::part(toggle-icon) { + color: var(--ig-primary-500); +} +``` -## Interactive Features +```css +igc-combo::part(search-input) { + background-color: var(--ig-gray-100); + border-radius: 2px; +} -All the core interactive features your users expect: column filtering, column hiding, column resizing, column sorting, and more. +igc-combo::part(input) { + background-color: var(--ig-gray-100); +} -## Beautiful UX & Branding +igc-combo::part(prefix) { + background-color: var(--ig-secondary-50); + color: var(--ig-primary-500); +} -Built-in theme support for Bootstrap, Material & Fluent, plus endless branding options in color palettes, fonts, elevation, display density & more. +igc-combo::part(toggle-icon) { + color: var(--ig-primary-500); +} +``` +```css +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +igc-combo::part(label), +igc-combo::part(empty), +igc-combo::part(group-header) { + color: #2B3A55; +} -## Rich Keyboard Navigation +igc-combo::part(native-input), +igc-combo::part(list-wrapper) { + background-color: #F2E5E5; +} -Full Excel-style keyboard navigation gives users the experience they expect, with high performance even on large datasets. +igc-combo::part(item selected) { + background: #E8C4C4; +} -## Is Grid Lite a Free & Open-Source Web Components Data Grid? +igc-combo::part(item selected active), +igc-combo::part(item selected):hover { + background: #CE7777; +} -Yes. Ignite UI Grid Lite is a free, open-source Web Components data grid released under the MIT license. You can use it in commercial or personal projects with no licensing fees. It is part of our initiative to make Ignite UI more open, transparent, and accessible. +igc-combo::part(prefix), +igc-combo::part(suffix), +igc-combo::part(case-icon) { + color: #F2E5E5; + background-color: #2B3A55; +} -- MIT-licensed +igc-combo::part(checkbox checked)::after { + background: #2B3A55; + box-shadow: none; +} +``` -- Free for commercial use +## API Reference -- Community-driven development +- [`IgcComboComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccombocomponent.html) +- [`Styling & Themes`](../../themes/overview.md) -- No feature gating +## Additional Resources -However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free Web Components data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster. +- [Ignite UI for Web Components **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-web-components) +- [Ignite UI for Web Components **GitHub**](https://github.com/IgniteUI/igniteui-webcomponents) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pie-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pie-chart.md index 817c5448a..25f548584 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pie-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pie-chart.md @@ -49,7 +49,6 @@ export class EnergyGlobalDemand extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Pie Chart Recommendations @@ -97,9 +96,9 @@ Do Not Use Pie Chart When: Legends are used to show information about each point, to know about its contribution towards the total sum. You can collapse the point using legend click. -In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`IgcLegendComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igclegendcomponent.html) property. The [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#legendLabelMemberPath) can then be used to specify which property on your data model it will use to display inside the legend for each pie slice. +In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the [`IgcLegendComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igclegendcomponent.html) property. The [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#legendLabelMemberPath) can then be used to specify which property on your data model it will use to display inside the legend for each pie slice. -Additionally you can use the [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#legendItemTemplate) and [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#legendItemBadgeTemplate) properties and the various font properties on ItemLegend to further customize the look of the legend items. +Additionally you can use the [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#legendItemTemplate) and [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#legendItemBadgeTemplate) properties and the various font properties on ItemLegend to further customize the look of the legend items. ```typescript export class EnergyGlobalDemandItem { @@ -133,16 +132,15 @@ export class EnergyGlobalDemand extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Pie Chart Others Category Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice -In the sample below, the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryThreshold) is set to 2, and [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryType) is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category. +In the sample below, the [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryThreshold) is set to 2, and [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryType) is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category. -If you set [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryType) to Percent, then [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryThreshold) will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryType) is most appropriate for your application. +If you set [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryType) to Percent, then [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryThreshold) will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryType) is most appropriate for your application. ```typescript export class EnergyGlobalDemandItem { @@ -176,7 +174,6 @@ export class EnergyGlobalDemand extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Pie Chart Explosion @@ -188,14 +185,13 @@ The pie chart supports explosion of individual pie slices as well as a `SliceCli /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Pie Chart Selection -The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the [`selectedItems`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#selectedItems) property. The selected slices are then highlighted. +The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the [`selectedItems`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#selectedItems) property. The selected slices are then highlighted. -There is a property called [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#selectionMode) which is how you set what mode you want the pie chart to use. The default value is `Single`. In order to disable selection, set the property to `Manual`. +There is a property called [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#selectionMode) which is how you set what mode you want the pie chart to use. The default value is `Single`. In order to disable selection, set the property to `Manual`. The pie chart supports three different selection modes. @@ -219,7 +215,6 @@ For scenarios where you click on the Others slice, the pie chart will return an /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Pie Chart Animation @@ -233,7 +228,6 @@ In the code below, the radiusFactor is increasing the chart by 0.25% of the size /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Pie Chart Styling @@ -272,7 +266,6 @@ export class EnergyGlobalDemand extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Radial Pie Chart @@ -311,7 +304,6 @@ export class FootballPlayerStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources @@ -324,12 +316,12 @@ export class FootballPlayerStats extends Array { The following table lists API members mentioned in the above sections: -- [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#legendItemBadgeTemplate) -- [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#legendItemTemplate) -- [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#legendLabelMemberPath) -- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryThreshold) -- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#othersCategoryType) -- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartbasecomponent.html#selectionMode) +- [`legendItemBadgeTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#legendItemBadgeTemplate) +- [`legendItemTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#legendItemTemplate) +- [`legendLabelMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#legendLabelMemberPath) +- [`othersCategoryThreshold`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryThreshold) +- [`othersCategoryType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#othersCategoryType) +- [`selectionMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpiechartcomponent.html#selectionMode) |Chart Type | Control Name | API Members | |-----------------|----------------|------------ | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md index aabb97aff..6c0f4c011 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md @@ -102,7 +102,6 @@ export class PivotSalesData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Getting Started With Web Components Pivot Grid The Web Components IgcPivotGrid can be configured via the [`pivotConfiguration`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html#pivotConfiguration) property. @@ -340,7 +339,6 @@ export class PivotDataFlat extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Auto generate configuration The [`autoGenerateConfig`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html#autoGenerateConfig) property automatically generates dimensions and values based on the data source fields: @@ -409,7 +407,7 @@ The default values are: |Limitation|Description| |--- |--- | -| Setting columns declaratively is not supported. | The Pivot grid generates its columns based on the [`columns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#columns) configuration, so setting them declaratively, like in the base grid, is not supported. Such columns are disregarded. | +| Setting columns declaratively is not supported. | The Pivot grid generates its columns based on the [`columns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html#columns) configuration, so setting them declaratively, like in the base grid, is not supported. Such columns are disregarded. | | Setting duplicate [`memberName`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotdimension.html#memberName) or [`member`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#member) property values for dimensions/values. | These properties should be unique for each dimension/value. Duplication may result in loss of data from the final result. | | Row Selection is only supported in **Single** mode. | Multiple selection is currently not supported. | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-remote-operations.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-remote-operations.md index 771f98de2..e6d756756 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-remote-operations.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-remote-operations.md @@ -140,7 +140,6 @@ export class PivotNoopData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - Users have the ability to achieve certain scenarios by feeding the pivot grid with already aggregated data. There are some requirements on how the data should look like and some specifics regarding hierarchies in the pivot view. For example, to declare hierarchy in **rows** dimension: @@ -233,7 +232,7 @@ public pivotConfig: IgcPivotConfiguration = { It is important for the data to match the configuration. For the best results no additional fields should be included into the aggregated data and no fields from the provided data should be left undeclared as rows or columns. The [`IgcPivotGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html) component builds its data based on the [`pivotConfiguration`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html#pivotConfiguration) and it is expected for the configuration and aggregated data to match accordingly. -Similarly for other remote data operations like sorting and filtering, data processing can be skipped by setting the related empty strategies - [`filterStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#filterStrategy), [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#sortStrategy): +Similarly for other remote data operations like sorting and filtering, data processing can be skipped by setting the related empty strategies - [`filterStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html#filterStrategy), [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html#sortStrategy): ```html diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-state-persistence.md index fcb85c711..2e3c48b99 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-state-persistence.md @@ -13,11 +13,11 @@ _premium: true # Web Components Pivot Grid State Persistence -The Ignite UI for Web Components State Persistence in Web Components Pivot Grid allows developers to easily save and restore the grid state. When the [`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) is applied on the Web Components [`IgcPivotGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html), it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState), [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString), [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState) and [`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) methods that developers can use to achieve state persistence in any scenario. +The Ignite UI for Web Components State Persistence in Web Components Pivot Grid allows developers to easily save and restore the grid state. When the [`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) is applied on the Web Components [`IgcPivotGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html), it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState), [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString), [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState) and [`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) methods that developers can use to achieve state persistence in any scenario. ## Supported Features -[`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) supports saving and restoring the state of the following features: +[`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) supports saving and restoring the state of the following features: @@ -35,9 +35,9 @@ The Ignite UI for Web Components State Persistence in Web Components Pivot Grid ## Usage -The [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState) method returns the grid state in a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object, containing all the state info. Additional steps may be required in order to save it. +The [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState) method returns the grid state in a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object, containing all the state info. Additional steps may be required in order to save it. -The [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) returns a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). +The [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) returns a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). The developer may choose to get only the state for a certain feature/features, by passing in an array with feature names as an argument. Empty array will result to using the default state options. @@ -66,9 +66,9 @@ const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', -[`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState) - The method accepts a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object as argument and will restore the state of each feature found in the object or specified features as second argument. +[`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState) - The method accepts a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object as argument and will restore the state of each feature found in the object or specified features as second argument. -[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) - The method accepts a serialized JSON string as argument and will restore the state of each feature found in the JSON string or specified features as second argument. +[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) - The method accepts a serialized JSON string as argument and will restore the state of each feature found in the JSON string or specified features as second argument. ```typescript gridState.applyState(gridState); @@ -76,7 +76,7 @@ gridState.applyStateFromString(gridStateString); gridState.applyState(sortingFilteringStates) ``` -The [`options`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatebasedirective.html#options) object implements the [`IgcGridStateOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateoptions.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState)/[`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) methods will not put the state of these features in the returned value and [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState)/[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) methods will not restore state for them. +The [`options`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatebasedirective.html#options) object implements the [`IgcGridStateOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateoptions.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState)/[`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) methods will not put the state of these features in the returned value and [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState)/[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) methods will not restore state for them. ```typescript gridState.options = { cellSelection: false, sorting: false }; @@ -123,7 +123,7 @@ public restoreGridStateString() { ## Restoring Pivot Configuration -[`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) will not persist pivot dimension functions, value formatters, etc. by default (see [limitations](state-persistence.md#limitations)). Restoring any of these can be achieved with code on application level. The [`IgcPivotGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html) exposes two events which can be used to set back any custom functions you have in the configuration: `DimensionInit` and `ValueInit`. Let's show how to do this: +[`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) will not persist pivot dimension functions, value formatters, etc. by default (see [limitations](state-persistence.md#limitations)). Restoring any of these can be achieved with code on application level. The [`IgcPivotGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotgridcomponent.html) exposes two events which can be used to set back any custom functions you have in the configuration: `DimensionInit` and `ValueInit`. Let's show how to do this: - Assign event handlers for the `DimensionInit` and `ValueInit` events: @@ -271,16 +271,15 @@ export class PivotDataFlat extends Array { } ``` - ## Restoring Pivot Strategies -[`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) will not persist neither remote pivot operations nor custom dimension strategies. +[`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) will not persist neither remote pivot operations nor custom dimension strategies. -Restoring any of these can be achieved with code on application level. The [`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) exposes an event called `StateParsed` which can be used to additionally modify the grid state before it gets applied. Let's show how to do this: +Restoring any of these can be achieved with code on application level. The [`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) exposes an event called `StateParsed` which can be used to additionally modify the grid state before it gets applied. Let's show how to do this: > `StateParsed` is only emitted when we are using `SetState` with string argument. @@ -449,14 +448,13 @@ export class PivotNoopData extends Array { } ``` - ## Limitations -- [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.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 [`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) directive will ignore the pivot dimension [`memberFunction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotdimension.html#memberFunction), pivot values [`member`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#member), [`formatter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#formatter), custom [`aggregate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#aggregate) functions, [`styles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#styles) and pivot configuration strategies: [`columnStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotconfiguration.html#columnStrategy) and [`rowStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotconfiguration.html#rowStrategy). +- [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.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 [`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) directive will ignore the pivot dimension [`memberFunction`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotdimension.html#memberFunction), pivot values [`member`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#member), [`formatter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#formatter), custom [`aggregate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#aggregate) functions, [`styles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#styles) and pivot configuration strategies: [`columnStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotconfiguration.html#columnStrategy) and [`rowStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotconfiguration.html#rowStrategy). diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/point-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/point-chart.md index 7212d183c..c90d37332 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/point-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/point-chart.md @@ -50,7 +50,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Point Chart with Single Series @@ -90,7 +89,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Point Chart with Multiple Series @@ -130,7 +128,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Point Chart Styling @@ -170,7 +167,6 @@ export class CountryRenewableElectricity extends Array ## Advanced Types of Point Charts diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/polar-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/polar-chart.md index 160ae85b5..8785faee8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/polar-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/polar-chart.md @@ -49,7 +49,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Polar Spline Area Chart @@ -88,7 +87,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Polar Marker Chart @@ -127,7 +125,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Polar Line Chart @@ -166,7 +163,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Polar Spline Chart @@ -205,7 +201,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Polar Chart Styling @@ -244,7 +239,6 @@ export class BoatSailingData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources @@ -270,7 +264,7 @@ The following table lists API members mentioned in the above sections: - [`IgcPolarSplineAreaSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpolarsplineareaseriescomponent.html) - [`IgcPolarScatterSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpolarscatterseriescomponent.html) - `ItemsSource` -- [`angleMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpolarbasecomponent.html#angleMemberPath) -- [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpolarbasecomponent.html#radiusMemberPath) +- [`angleMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpolarareaseriescomponent.html#angleMemberPath) +- [`radiusMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcpolarareaseriescomponent.html#radiusMemberPath) - [`IgcNumericAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericangleaxiscomponent.html) - [`IgcNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericradiusaxiscomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/query-builder.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/query-builder.md index 00e7d5bd9..b4339be0b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/query-builder.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/query-builder.md @@ -25,7 +25,6 @@ The Ignite UI for Web Components Query Builder provides a rich UI that allows de } ``` - # Getting started with Web Components Query Builder To start using the `QueryBuilder`, first, you need to install the `Ignite UI for Web Components` package by running the following command: @@ -385,7 +384,6 @@ We’ve created this example to show you the templating and formatter functional } ``` - ## API Reference - `QueryBuilder` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radial-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radial-chart.md index 80e76a280..542a02a4d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radial-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radial-chart.md @@ -49,7 +49,6 @@ export class FootballPlayerStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Radial Column Chart @@ -88,7 +87,6 @@ export class FootballPlayerStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Radial Line Chart @@ -127,7 +125,6 @@ export class FootballPlayerStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Radial Pie Chart @@ -166,7 +163,6 @@ export class FootballPlayerStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Radial Chart Styling @@ -205,7 +201,6 @@ export class FootballPlayerStats extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Radial Chart Settings @@ -236,6 +231,6 @@ The following table lists API members mentioned in the above sections: - `ItemsSource` - `AngleAxisName` - `ValueAxisName` -- [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcanchoredradialseriescomponent.html#valueMemberPath) +- [`valueMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcradiallineseriescomponent.html#valueMemberPath) - [`IgcCategoryAngleAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igccategoryangleaxiscomponent.html) - [`IgcNumericRadiusAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericradiusaxiscomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radial-gauge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radial-gauge.md index 1a72e99d5..5787bd657 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radial-gauge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radial-gauge.md @@ -22,7 +22,6 @@ The following sample demonstrates how setting multiple properties on the same [` /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Dependencies @@ -114,7 +113,6 @@ The backing can be circular or fitted. A circular shape creates a 360 degree cir /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Scale The scale is visual element that highlights full range of values in the gauge which can be created by supplying [`minimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#minimumValue) and [`maximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#maximumValue) values. Together with backing, it defines overall shape of gauge. The [`scaleStartAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#scaleStartAngle) and [`scaleEndAngle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#scaleEndAngle) properties define bounds of arc of the scale. While, the [`scaleSweepDirection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#scaleSweepDirection) property specifies whether the scale sweeps in clockwise or counter-clockwise direction. You can customize appearance of the scale by setting [`scaleBrush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#scaleBrush), [`scaleStartExtent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#scaleStartExtent), and [`scaleEndExtent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#scaleEndExtent) properties. @@ -140,7 +138,6 @@ The scale is visual element that highlights full range of values in the gauge wh /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Labels and Titles The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the [`minimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#minimumValue) and [`maximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#maximumValue) properties. You can position labels by setting the [`labelExtent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#labelExtent) property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as [`fontBrush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#fontBrush) and [`font`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#font). @@ -164,7 +161,6 @@ Each of these labels for the needle have various styling attributes you can appl /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Title & Subtitle [`titleText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#titleText) and [`subtitleText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#subtitleText) properties are available and can both be used to display custom text for the needle. Alternatively, [`titleDisplaysValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#titleDisplaysValue) and [`subtitleDisplaysValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#subtitleDisplaysValue), when set to true, will let display the needle's value and override [`titleText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#titleText) and [`subtitleText`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#subtitleText). So you can occupy custom text for the title but show the value via the subtitle and vice versa. @@ -187,7 +183,6 @@ The radial gauge's labels and titles can change it's scaling. To enable this, fi /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Tick Marks Tick marks are thin lines radiating from the center of the radial gauge. There are two types of tick marks: major and minor. Major tick marks are displayed at the [`interval`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#interval) between the [`minimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#minimumValue) and [`maximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#maximumValue) properties. Use the [`minorTickCount`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#minorTickCount) property to specify the number of minor tick marks displayed between each major tick mark. You can control the length of tick marks by setting a fraction (between 0 and 1) to [`tickStartExtent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#tickStartExtent), [`tickEndExtent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#tickEndExtent), [`minorTickStartExtent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#minorTickStartExtent), and [`minorTickEndExtent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#minorTickEndExtent) properties. @@ -214,7 +209,6 @@ Tick marks are thin lines radiating from the center of the radial gauge. There a /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Ranges A range highlights a set of continuous values bound by a specified [`minimumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#minimumValue) and [`maximumValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#maximumValue) properties. You can add multiple ranges to the radial gauge by specifying their starting and ending values. Each range has a few customization properties such as [`brush`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugerangecomponent.html#brush) and [`outline`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugerangecomponent.html#outline). Alternatively, you can set [`rangeBrushes`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#rangeBrushes) and [`rangeOutlines`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#rangeOutlines) properties to a list of colors for the ranges. @@ -243,7 +237,6 @@ A range highlights a set of continuous values bound by a specified [`minimumValu /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Needle Radial gauge needles are visual elements used to signify a gauge set value. Needles are available in one of the several predefined shapes. The needle can have a pivot shape, which is placed in the center of the gauge. The pivot shape also takes one of the predefined shapes. Pivot shapes that include an overlay or an underlay can have a separate pivot brush applied to the shape. @@ -277,7 +270,6 @@ You can enable an interactive mode of the gauge (using [`isNeedleDraggingEnabled /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Highlight Needle The radial gauge can be modified to show a second needle. This will make the main needle's [`value`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#value) appear with a lower opacity. To enable this first set [`highlightValueDisplayMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#highlightValueDisplayMode) to Overlay and then apply a [`highlightValue`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_gauges.igcradialgaugecomponent.html#highlightValue). @@ -304,7 +296,6 @@ The radial gauge can be modified to show a second needle. This will make the mai /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Summary For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the radial gauge with all features and visuals enabled. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radio.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radio.md index 865c179cf..099594360 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radio.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/radio.md @@ -18,7 +18,6 @@ The Ignite UI for Web Components Radio component allows the user to select a sin /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Usage @@ -89,7 +88,6 @@ The [`IgcRadioComponent`](https://www.infragistics.com/products/ignite-ui-web-co /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Checked You can use the `checked` attribute to toggle on the radio. @@ -108,7 +106,6 @@ You can use the `checked` attribute to toggle on the radio. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Invalid You can use the `invalid` attribute to mark the radio as invalid. @@ -122,7 +119,6 @@ You can use the `invalid` attribute to mark the radio as invalid. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Disabled You can use the `disabled` attribute to disable the radio. @@ -141,7 +137,6 @@ You can use the `disabled` attribute to disable the radio. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Group Alignment The [`IgcRadioGroupComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcradiogroupcomponent.html) allows you to easily change the placement directionality of the radio buttons it contains using the `alignment` attribute. Allowed values are `vertical`(default) and `horizontal`. @@ -160,7 +155,6 @@ The [`IgcRadioGroupComponent`](https://www.infragistics.com/products/ignite-ui-w /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Forms You can use the `name` and `value` attributes when using the radio with `Form`. @@ -227,7 +221,6 @@ igc-radio::part(control) { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/rating.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/rating.md index 2c39c3e8c..adf6c3e69 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/rating.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/rating.md @@ -19,7 +19,6 @@ The Ignite UI for Web Components Rating component allows users to view and provi } ``` - First, you need to install the Ignite UI for Web Components by running the following command: ```cmd @@ -63,7 +62,6 @@ The [`IgcRatingComponent`](https://www.infragistics.com/products/ignite-ui-web-c /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - > The number of rating symbols between the opening and closing brackets of the rating component determines the max value. ## Single Selection @@ -88,7 +86,6 @@ igc-rating::part(symbols) { } ``` - > Keep in mind that the `step` attribute doesn't work with single selection mode. ## Empty & Selected @@ -107,7 +104,6 @@ The Ignite UI for Web Components Rating component allows users to use different /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Configuration ### Single @@ -229,7 +225,6 @@ igc-rating::part(symbols) { } ``` - ## API Reference - [`IgcRatingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcratingcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/ripple.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/ripple.md index f2a082d4a..1d902c84f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/ripple.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/ripple.md @@ -18,7 +18,6 @@ The Ignite UI for Web Components Ripple component creates an animation in respon /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage First, you need to install the Ignite UI for Web Components by running the following command: @@ -71,7 +70,6 @@ igc-ripple { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcButtonComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcbuttoncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/scatter-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/scatter-chart.md index cb0d990d5..f7168aef0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/scatter-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/scatter-chart.md @@ -78,7 +78,6 @@ export class CountryDemographicEurope extends Array ## Web Components Scatter Line Chart @@ -146,7 +145,6 @@ export class HealthDataForGermany extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Scatter Spline Chart @@ -214,7 +212,6 @@ export class HealthDataForGermany extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Scatter High Density Chart @@ -277,7 +274,6 @@ export class SampleDensityData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Scatter Area Chart @@ -331,7 +327,6 @@ export class SampleScatterData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Scatter Contour Chart @@ -385,7 +380,6 @@ export class SampleScatterData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/select.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/select.md index d7aeacf5b..a4770a3b4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/select.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/select.md @@ -18,7 +18,6 @@ The Ignite UI for Web Components Select component allows a single selection from /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -71,7 +70,6 @@ The [`IgcSelectItemComponent`](https://www.infragistics.com/products/ignite-ui-w /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Header You can use the [`IgcSelectHeaderComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcselectheadercomponent.html) to provide a header for a group of items. @@ -81,7 +79,6 @@ You can use the [`IgcSelectHeaderComponent`](https://www.infragistics.com/produc /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ```html Tasks @@ -100,7 +97,6 @@ Multiple [`IgcSelectItemComponent`](https://www.infragistics.com/products/ignite /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ```html @@ -228,7 +224,6 @@ igc-select::part(suffix) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API Reference - [`IgcSelectComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcselectcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/shape-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/shape-chart.md index b521d0723..7bfeb112b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/shape-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/shape-chart.md @@ -24,7 +24,6 @@ You can create this type of chart in the [`IgcDataChartComponent`](https://www.i /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Scatter Polyline Chart @@ -38,7 +37,6 @@ You can create this type of chart in the [`IgcDataChartComponent`](https://www.i /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources @@ -57,7 +55,7 @@ The following table lists API members mentioned in the above sections: - [`IgcScatterPolygonSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcscatterpolygonseriescomponent.html) - [`IgcScatterPolylineSeriesComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcscatterpolylineseriescomponent.html) - `ItemsSource` -- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcshapeseriesbasecomponent.html#shapeMemberPath) +- [`shapeMemberPath`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcscatterpolygonseriescomponent.html#shapeMemberPath) - [`IgcNumericXAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericxaxiscomponent.html) - [`IgcNumericYAxisComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igcnumericyaxiscomponent.html) - `YAxisName` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/single-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/single-selection.md index 853908117..896848915 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/single-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/single-selection.md @@ -30,7 +30,6 @@ To enable single-selection and quick filtering, set the [`singleSelect`](https:/ } ``` -
## Selection API diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/skills.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/skills.md index 1ee296c3b..f29771a0c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/skills.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/skills.md @@ -4,9 +4,12 @@ _description: Learn how to use Agent Skills to supercharge AI-assisted developme _keywords: Ignite UI for Web Components, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie _license: MIT mentionedTypes: [] +last_updated: "2026-04-24" _tocName: Agent Skills --- + + # Ignite UI for Web Components Agent Skills Ignite UI for Web Components ships with **[Agent Skills](https://agentskills.io/)** - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with Ignite UI for Web Components. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. @@ -23,7 +26,8 @@ The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-web | Components & Layout | [`skills/igniteui-wc-choose-components/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-choose-components/SKILL.md) | Standalone components, form controls, overlays, layout | | Platform Integration | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.md) | Helps with integrating components to the user's platform of choice | | Theming & Styling | [`skills/igniteui-wc-customize-component-theme/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | -| Optimization | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size +| Optimization | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size | +| Generate From Image Design | [`skills/igniteui-wc-generate-from-image-design/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-generate-from-image-design/SKILL.md) | Build Web Components apps from screenshots, mockups, and wireframes using Ignite UI components | ## Skill Locations @@ -44,6 +48,8 @@ The `.agents/skills/` directory is a cross-agent convention supported by multipl SKILL.md igniteui-wc-optimize-bundle-size/ SKILL.md + igniteui-wc-generate-from-image-design/ + SKILL.md ``` For user-level (global) skills available across all projects, use `~/.agents/skills/` instead. @@ -57,7 +63,7 @@ For user-level (global) skills available across all projects, use `~/.agents/ski | Project | `.github/skills/`, `.claude/skills/` | | Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | -> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. +> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. ### Claude @@ -112,7 +118,40 @@ For user-level (global) skills available across all projects, use `~/.agents/ski Use one of the options below to download and place the skill files into the appropriate [skill location](#skill-locations) for your AI assistant. -### **Option A - Use the installed npm package** +### **Option A - Use the Ignite UI CLI** + +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files — all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below. + +```bash +ig ai-config --assistants generic --agents claude +``` + +Use `--agents` with multiple values to target several agents at once: + +```bash +ig ai-config --assistants generic vscode --agents claude copilot cursor +``` + +| Flag | Values | Default | +|------|--------|---------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively | + +### **Option B - Use the `GitHub CLI`** + +The GitHub CLI can be used to download skill files directly from the Ignite UI for Web Components repository. Run the following commands in your project root to start the installation process: + +```bash +gh skill install IgniteUI/igniteui-webcomponents +``` + +You will be asked to select which skills to install and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents. + +To update skills later, run the following command: + +```bash +gh skill update IgniteUI/igniteui-webcomponents +``` If Ignite UI for Web Components is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: @@ -137,6 +176,7 @@ cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-choose-components . cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-customize-component-theme .agents/skills/ cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-optimize-bundle-size .agents/skills/ cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-integrate-with-framework .agents/skills/ +cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-generate-from-image-design .agents/skills/ ``` **Windows (Command Prompt)** @@ -146,9 +186,10 @@ robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-choose-component robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-customize-component-theme .agents\skills\igniteui-wc-customize-component-theme /E robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-optimize-bundle-size .agents\skills\igniteui-wc-optimize-bundle-size /E robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-integrate-with-framework .agents\skills\igniteui-wc-integrate-with-framework /E +robocopy node_modules\igniteui-webcomponents\skills\igniteui-wc-generate-from-image-design .agents\skills\igniteui-wc-generate-from-image-design /E ``` -### **Option B - Use the `gemini skills` CLI** +### **Option C - Use the `gemini skills` CLI** The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: @@ -162,6 +203,7 @@ gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --p gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-customize-component-theme gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-optimize-bundle-size gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-integrate-with-framework +gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-generate-from-image-design ``` **Install to workspace scope:** @@ -171,15 +213,16 @@ gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-web gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-customize-component-theme gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-optimize-bundle-size gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-integrate-with-framework +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-generate-from-image-design ``` Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. -### **Option C - Use the `npx skills` CLI** +### **Option D - Use the `npx skills` CLI** The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: -```shell +```bash npx skills add IgniteUI/igniteui-webcomponents ``` @@ -207,9 +250,6 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./ - [Getting Started with Ignite UI for Web Components](../general-getting-started.md) - [Ignite UI CLI](../general-cli-overview.md) - - - - [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) - [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/slider.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/slider.md index 94c8a5de9..996ee1f60 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/slider.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/slider.md @@ -35,7 +35,6 @@ igc-range-slider { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage First, you need to install the Ignite UI for Web Components by running the following command: @@ -88,12 +87,11 @@ igc-range-slider { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - -While dragging a slider thumb, it displays its value in a tooltip. You could hide this tooltip using the [`hideTooltip`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#hideTooltip) property. +While dragging a slider thumb, it displays its value in a tooltip. You could hide this tooltip using the [`hideTooltip`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#hideTooltip) property. ### Disabled -You can use the [`disabled`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#disabled) property of the sliders to disable their user interactions. +You can use the [`disabled`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#disabled) property of the sliders to disable their user interactions. ```css igc-slider { @@ -105,10 +103,9 @@ igc-slider { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Constraints -The track of the sliders has a minimum and maximum values which are configured using the [`min`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html#min) and [`max`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html#max) properties. Additionally, you can restrict the thumb dragging using the [`lowerBound`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#lowerBound) and [`upperBound`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#upperBound) properties. +The track of the sliders has a minimum and maximum values which are configured using the [`min`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html#min) and [`max`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html#max) properties. Additionally, you can restrict the thumb dragging using the [`lowerBound`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#lowerBound) and [`upperBound`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#upperBound) properties. ```css igc-slider { @@ -120,10 +117,9 @@ igc-slider { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Step -The [`step`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html#step) property specifies the granularity of the slider that the value must adhere to. By default, the slider track looks continuous. Setting the [`discreteTrack`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#discreteTrack) property of the slider to **true** will make it to display the steps on the track. +The [`step`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html#step) property specifies the granularity of the slider that the value must adhere to. By default, the slider track looks continuous. Setting the [`discreteTrack`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#discreteTrack) property of the slider to **true** will make it to display the steps on the track. ```css igc-slider { @@ -135,12 +131,11 @@ igc-slider { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - -If the [`step`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html#step) property is set to `0`, no stepping is implied and any value in the slider range is allowed. In this case, the slider will look continuous even if [`discreteTrack`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#discreteTrack) is set to **true**. +If the [`step`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html#step) property is set to `0`, no stepping is implied and any value in the slider range is allowed. In this case, the slider will look continuous even if [`discreteTrack`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#discreteTrack) is set to **true**. ### Tick Marks -The slider components could display tick marks and labels. The slider components support two types of tick marks: primary and secondary. In order to display the primary tick marks, you should set the [`primaryTicks`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#primaryTicks) property to a value greater than `1`. The number of primary ticks will be evenly distributed on the track. In order to display the secondary tick marks, you should set the [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#secondaryTicks) property to a value greater than `0`. The value of [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#secondaryTicks) specifies the number of secondary ticks between every two primary ticks. +The slider components could display tick marks and labels. The slider components support two types of tick marks: primary and secondary. In order to display the primary tick marks, you should set the [`primaryTicks`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#primaryTicks) property to a value greater than `1`. The number of primary ticks will be evenly distributed on the track. In order to display the secondary tick marks, you should set the [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#secondaryTicks) property to a value greater than `0`. The value of [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#secondaryTicks) specifies the number of secondary ticks between every two primary ticks. ```css igc-slider { @@ -152,10 +147,9 @@ igc-slider { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` +Additionally, you could configure the orientation of the tick marks using the [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#tickOrientation) property. By default, the [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#tickOrientation) value is `end` which displays the ticks below the slider track. You could set it to `start` which displays them above the track and `mirror` which mirrors the ticks above and below the track. -Additionally, you could configure the orientation of the tick marks using the [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#tickOrientation) property. By default, the [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#tickOrientation) value is `end` which displays the ticks below the slider track. You could set it to `start` which displays them above the track and `mirror` which mirrors the ticks above and below the track. - -By default, the tick marks display labels with their values. You could modify the rotation of the tick labels using the `SliderTickLabelRotation` property. Additionally, you could hide the labels of the primary and secondary ticks using the [`hidePrimaryLabels`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#hidePrimaryLabels) and [`hideSecondaryLabels`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#hideSecondaryLabels) properties. +By default, the tick marks display labels with their values. You could modify the rotation of the tick labels using the `SliderTickLabelRotation` property. Additionally, you could hide the labels of the primary and secondary ticks using the [`hidePrimaryLabels`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#hidePrimaryLabels) and [`hideSecondaryLabels`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#hideSecondaryLabels) properties. ```css igc-slider { @@ -167,10 +161,9 @@ igc-slider { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Value Format -If you want to format the thumb and tick label values, the slider provides [`valueFormat`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#valueFormat), [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#valueFormatOptions) and [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#locale) properties. Тhe [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#valueFormatOptions) allows you to specify the number of fraction and significant digits, style (decimal, currency, percent, unit), notation and others taking into account the specified [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#locale). The [`valueFormat`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#valueFormat) is a string which may contain the `{0}` identifier which will be replaced by the value with applied format options. +If you want to format the thumb and tick label values, the slider provides [`valueFormat`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#valueFormat), [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#valueFormatOptions) and [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#locale) properties. Тhe [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#valueFormatOptions) allows you to specify the number of fraction and significant digits, style (decimal, currency, percent, unit), notation and others taking into account the specified [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#locale). The [`valueFormat`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#valueFormat) is a string which may contain the `{0}` identifier which will be replaced by the value with applied format options. ```css igc-slider { @@ -182,10 +175,9 @@ igc-slider { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Labels -In some cases you would want to format the values of the slider as string values i.e. map the values **\[0, 1, 2]** to **\['Low', 'Medium', 'High']**. For this scenario the slider allows you to define [`IgcSliderLabelComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderlabelcomponent.html) elements inside it. The text content of the slider labels is going to be used for thumb and tick labels. Please note that when slider labels are provided, the [`min`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#min), [`max`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#max) and [`step`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#step) properties are automatically calculated so that they do not allow values that do not map to the provided labels. In the case of 'Low', 'Medium' and 'High' labels, [`min`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#min) is set to `0`, [`max`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#max) is set to `2` and [`step`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#step) is set to `1`. +In some cases you would want to format the values of the slider as string values i.e. map the values **\[0, 1, 2]** to **\['Low', 'Medium', 'High']**. For this scenario the slider allows you to define [`IgcSliderLabelComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderlabelcomponent.html) elements inside it. The text content of the slider labels is going to be used for thumb and tick labels. Please note that when slider labels are provided, the [`min`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#min), [`max`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#max) and [`step`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#step) properties are automatically calculated so that they do not allow values that do not map to the provided labels. In the case of 'Low', 'Medium' and 'High' labels, [`min`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#min) is set to `0`, [`max`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#max) is set to `2` and [`step`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#step) is set to `1`. ```css igc-slider { @@ -198,7 +190,6 @@ igc-slider { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcSliderComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -269,22 +260,21 @@ igc-range-slider { } ``` - ## API References -- [`hidePrimaryLabels`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#hidePrimaryLabels) -- [`hideSecondaryLabels`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#hideSecondaryLabels) -- [`hideTooltip`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#hideTooltip) -- [`primaryTicks`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#primaryTicks) +- [`hidePrimaryLabels`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#hidePrimaryLabels) +- [`hideSecondaryLabels`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#hideSecondaryLabels) +- [`hideTooltip`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#hideTooltip) +- [`primaryTicks`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#primaryTicks) - [`IgcRangeSliderComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcrangeslidercomponent.html) -- [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#secondaryTicks) +- [`secondaryTicks`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#secondaryTicks) - [`IgcSliderLabelComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderlabelcomponent.html) - [`IgcSliderComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html) - `SliderTickLabelRotation` -- [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#tickOrientation) -- [`upperBound`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#upperBound) -- [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#valueFormatOptions) -- [`valueFormat`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsliderbasecomponent.html#valueFormat) +- [`tickOrientation`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#tickOrientation) +- [`upperBound`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#upperBound) +- [`valueFormatOptions`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#valueFormatOptions) +- [`valueFormat`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcslidercomponent.html#valueFormat) - [`Styling & Themes`](../themes/overview.md) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/snackbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/snackbar.md index bad9537b3..273a6821f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/snackbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/snackbar.md @@ -20,7 +20,6 @@ This sample demonstrates how to create [`IgcSnackbarComponent`](https://www.infr /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Usage @@ -59,7 +58,6 @@ Use the [`displayTime`](https://www.infragistics.com/products/ignite-ui-web-comp /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Action Text By default, the snackbar component is hidden automatically after a period specified by the [`displayTime`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsnackbarcomponent.html#displayTime). You can use [`keepOpen`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsnackbarcomponent.html#keepOpen) property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar [`actionText`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsnackbarcomponent.html#actionText) you can display an action button inside the component. @@ -69,7 +67,6 @@ By default, the snackbar component is hidden automatically after a period specif /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling The [`IgcSnackbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsnackbarcomponent.html) component exposes several CSS parts to give you full control over its styling: @@ -101,7 +98,6 @@ igc-snackbar::part(base) { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/sparkline-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/sparkline-chart.md index f75a0b39a..82d5e6ffe 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/sparkline-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/sparkline-chart.md @@ -22,7 +22,6 @@ The following example shows all the different types of [`Sparkline`](https://www /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
Like this sample? Get access to our complete Web Components toolkit and start building your own apps in minutes. Download it for free. @@ -71,7 +70,6 @@ The Web Components Sparkline supports the following types of sparklines by setti /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Markers @@ -120,7 +118,6 @@ export class SparklineProfitData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Normal Range @@ -168,7 +165,6 @@ export class SparklineMixedData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Trendlines @@ -212,7 +208,6 @@ export class SparklineMixedData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Unknown Value Interpolation @@ -252,7 +247,6 @@ export class SparklineUnknownData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Sparkline in Data Grid @@ -380,7 +374,6 @@ export class Products { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Additional Resources You can find more information about related chart types in these topics: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spline-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spline-chart.md index bb50f31dc..67c1a3d82 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spline-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spline-chart.md @@ -49,7 +49,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Spline Chart with Single Series @@ -91,7 +90,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Spline Chart with Multiple Series @@ -133,7 +131,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Spline Chart Styling @@ -175,7 +172,6 @@ export class CountryRenewableElectricity extends Array ## Advanced Types of Spline Charts @@ -224,7 +220,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked 100% Spline Chart @@ -269,7 +264,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/splitter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/splitter.md index 096db7d50..5eb46a5c2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/splitter.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/splitter.md @@ -3,7 +3,7 @@ title: Web Components Splitter Component | Layout Controls | Infragistics _description: Use the Ignite UI for Web Components Splitter component to create two resizable panes with horizontal or vertical layouts, collapse and expand behavior, keyboard support, and nested split views. _keywords: splitter, split panes, resizable panes, web components splitter, Web Components splitter, Ignite UI for Web Components _license: MIT -mentionedTypes: ["Splitter"] +mentionedTypes: ["Splitter", "SplitterResizeEventArgs"] _tocName: Splitter --- @@ -35,10 +35,9 @@ p { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
-## Usage +## Getting Started with Web Components Splitter First, you need to install the Ignite UI for Web Components by running the following command: @@ -46,7 +45,7 @@ First, you need to install the Ignite UI for Web Components by running the follo npm install igniteui-webcomponents ``` -Before using the `Splitter`, you need to register it as follows: +Before using the [`IgcSplitterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html), you need to register it as follows: ```ts import { defineComponents, IgcSplitterComponent } from 'igniteui-webcomponents'; @@ -56,6 +55,8 @@ defineComponents(IgcSplitterComponent); For a complete introduction to the Ignite UI for Web Components, read the [**Getting Started**](../general-getting-started.md) topic. +## Using Web Components Splitter + Use the `start` and `end` slots to place pane content: ```html @@ -67,7 +68,7 @@ Use the `start` and `end` slots to place pane content: ### Orientation -Set the `orientation` property to control pane direction: +Set the [`orientation`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#orientation) property to control pane direction: - `horizontal` (default): start and end panes are rendered left and right. - `vertical`: start and end panes are rendered top and bottom. @@ -83,9 +84,9 @@ Set the `orientation` property to control pane direction: Use size properties to set initial and constrained pane sizes: -- `start-size`, `end-size` -- `start-min-size`, `end-min-size` -- `start-max-size`, `end-max-size` +- [`startSize`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#startSize), [`endSize`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#endSize) +- [`startMinSize`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#startMinSize), [`endMinSize`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#endMinSize) +- [`startMaxSize`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#startMaxSize), [`endMaxSize`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#endMaxSize) Values accept CSS length values such as `px` and `%`. @@ -106,10 +107,10 @@ Values accept CSS length values such as `px` and `%`. Use these properties to control interactions: -- `disable-resize`: disables pane resizing. -- `disable-collapse`: disables pane collapsing. -- `hide-drag-handle`: hides the drag handle. -- `hide-collapse-buttons`: hides collapse and expand buttons. +- [`disableResize`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#disableResize): disables pane resizing. +- [`disableCollapse`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#disableCollapse): disables pane collapsing. +- [`hideDragHandle`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#hideDragHandle): hides the drag handle. +- [`hideCollapseButtons`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html#hideCollapseButtons): hides collapse and expand buttons. You can also collapse or expand panes programmatically: @@ -136,7 +137,6 @@ p { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Events The Splitter emits the following events during resize operations: @@ -170,7 +170,7 @@ When the splitter bar is focused: ## Styling -The `Splitter` component exposes CSS parts for styling: +The [`IgcSplitterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html) component exposes CSS parts for styling: | Name | Description | | ---- | ----------- | @@ -224,10 +224,9 @@ p { } ``` - ## API References -- `Splitter` +- [`IgcSplitterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcsplittercomponent.html) - [`Styling & Themes`](../themes/overview.md) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-activation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-activation.md index 3e2dd3dbb..50923412d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-activation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-activation.md @@ -129,7 +129,6 @@ export class ExcelUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Activation Overview diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-chart-adapter.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-chart-adapter.md index 82a1a8bab..9395125d0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-chart-adapter.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-chart-adapter.md @@ -128,7 +128,6 @@ export class ExcelUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Chart Adapter Overview diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-clipboard.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-clipboard.md index aacc64063..3ca8210fd 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-clipboard.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-clipboard.md @@ -128,7 +128,6 @@ export class ExcelUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Dependencies diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-commands.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-commands.md index 4896025e1..d9d8c37e8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-commands.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-commands.md @@ -128,7 +128,6 @@ export class ExcelUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Dependencies diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-conditional-formatting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-conditional-formatting.md index 0772e647a..422b24551 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-conditional-formatting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-conditional-formatting.md @@ -128,7 +128,6 @@ export class ExcelUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Conditional Formatting Overview diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-configuring.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-configuring.md index bc9de8bdd..c7dcc30da 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-configuring.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-configuring.md @@ -128,7 +128,6 @@ export class ExcelUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Configuring Cell Editing diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-data-validation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-data-validation.md index 485c78b13..aaa251f56 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-data-validation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-data-validation.md @@ -19,7 +19,6 @@ This topic explains how to configure and set the built-in data validation rules. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Dependencies diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-hyperlinks.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-hyperlinks.md index 233a73ac9..5139106b2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-hyperlinks.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-hyperlinks.md @@ -128,7 +128,6 @@ export class ExcelUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Hyperlinks Overview diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-overview.md index a1824cd7f..6ac91a873 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/spreadsheet-overview.md @@ -127,7 +127,6 @@ export class ExcelUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Functionality diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stacked-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stacked-chart.md index 8269a46a9..8a88e5aee 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stacked-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stacked-chart.md @@ -22,7 +22,6 @@ The following example, you can use the drop-down to switch between all of the di /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
The following sections demonstrate individual types of Ignite UI for Web Components Stacked Charts. @@ -69,7 +68,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked 100 Area Chart @@ -114,7 +112,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked Bar Chart @@ -160,7 +157,6 @@ export class EnergyRenewableConsumption extends Array ## Web Components Stacked 100% Bar Chart @@ -204,7 +200,6 @@ export class EnergyRenewableConsumption extends Array ## Web Components Stacked Column Chart @@ -249,7 +244,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked 100% Column Chart @@ -291,7 +285,6 @@ export class OnlineTrafficByDevice extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked Line Chart @@ -334,7 +327,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked 100% Line Chart @@ -379,7 +371,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked Spline Area Chart @@ -424,7 +415,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked 100% Spline Area Chart @@ -469,7 +459,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked Spline Chart @@ -512,7 +501,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stacked 100% Spline Chart @@ -557,7 +545,6 @@ export class ContinentsBirthRate extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/step-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/step-chart.md index 3377b2a52..c57817e46 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/step-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/step-chart.md @@ -50,7 +50,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Step Line Chart @@ -92,7 +91,6 @@ export class CountryRenewableElectricity extends Array ## Web Components Step Chart Styling @@ -132,7 +130,6 @@ export class CountryRenewableElectricity extends Array ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stepper.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stepper.md index 865b8b071..83c11c218 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stepper.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stepper.md @@ -25,7 +25,6 @@ igc-switch { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Getting Started with Web Components Stepper @@ -147,7 +146,6 @@ The sample below demonstrates how stepper orientation and titles position could /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Step States @@ -254,7 +252,6 @@ The sample below demonstrates all exposed step types and how they could be chang /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Stepper Animations @@ -288,7 +285,6 @@ The [`IgcStepperComponent`](https://www.infragistics.com/products/ignite-ui-web- } ``` -
## Keyboard Navigation @@ -407,7 +403,6 @@ igc-step[active]:active::part(indicator) { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stock-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stock-chart.md index ba970376d..9d0fdff55 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stock-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/stock-chart.md @@ -133,7 +133,6 @@ export class StockItem { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Stock Chart Recommendations @@ -293,7 +292,6 @@ export class StockItem { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stock Chart @@ -564,7 +562,6 @@ export class StockIndexData { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Stock Chart Styling @@ -687,7 +684,6 @@ export class StockItem { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Chart Annotations @@ -885,7 +881,6 @@ export class StocksUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Web Components Chart Panes @@ -1107,7 +1102,6 @@ export class StocksUtility { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/switch.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/switch.md index 9e287f895..1fff59a1f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/switch.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/switch.md @@ -18,7 +18,6 @@ The Ignite UI for Web Components Switch component is a binary choice selection c /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage @@ -61,7 +60,7 @@ To provide a meaningful label for the switch, simply place some text between the Label ``` -You can specify if the label should be positioned before or after the switch toggle by setting the [`labelPosition`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccheckboxcomponent.html#labelPosition) attribute of the switch. Allowed values are `before` and `after`(default): +You can specify if the label should be positioned before or after the switch toggle by setting the [`labelPosition`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcswitchcomponent.html#labelPosition) attribute of the switch. Allowed values are `before` and `after`(default): ```html Label @@ -86,7 +85,6 @@ The switch can also be labelled by elements external to the switch. In this case /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Checked You can use the `checked` attribute to toggle on the switch. @@ -100,7 +98,6 @@ You can use the `checked` attribute to toggle on the switch. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Required You can use the `required` attribute to mark the switch as required. @@ -130,7 +127,6 @@ You can use the `disabled` attribute to disable the switch. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Forms You can use the `name` and `value` attributes when using the switch with `Form`. @@ -174,12 +170,11 @@ igc-switch { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## API References -- [`labelPosition`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccheckboxcomponent.html#labelPosition) +- [`labelPosition`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcswitchcomponent.html#labelPosition) - [`IgcSwitchComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcswitchcomponent.html) - [`Styling & Themes`](../themes/overview.md) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tabs.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tabs.md index cd649b7e8..2dfb25cb3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tabs.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tabs.md @@ -22,7 +22,6 @@ The Web Components Tabs example below displays three different tabs aligned in a /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## How to use Tabs with Ignite UI for Web Components First, you need to install the Ignite UI for Web Components by running the following command: @@ -45,12 +44,10 @@ Simple [`IgcTabsComponent`](https://www.infragistics.com/products/ignite-ui-web- ```html - -
Tab 1
+ Content for tab 1 - -
Tab 2
+ Content for tab 2 @@ -60,6 +57,8 @@ Simple [`IgcTabsComponent`](https://www.infragistics.com/products/ignite-ui-web- ``` +Tab text can be set either as simple string using the [`label`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctabcomponent.html#label) property or by assigning children to the `label` slot. Any remaining children in the default slot are rendered as the tab content. + ### Selection The [`IgcTabsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctabscomponent.html) emits `Change` event when the user selects an item either by key press or click. The [`select`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctabscomponent.html#select) method allows you to select a tab by specifying the [`IgcTabComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctabcomponent.html) or its id. @@ -73,7 +72,7 @@ The default behavior, which selects a tab when the user is navigating with the a A tab is disabled by setting the [`disabled`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctabcomponent.html#disabled) attribute: ```html -Tab 1 + ``` ### Alignment @@ -92,7 +91,6 @@ If the space is not enough to fit all tabs, scroll buttons are displayed. /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Scrolling Scroll buttons are shown when the available space is not enough to render all Web Components tabs. The start scroll button is disabled if the first tab is in view. Respectively, when last tab is in view the end scroll button is disabled. By pressing one of the scroll buttons the tabs are scrolled so the tab in that direction is fully visible, or if it is already visible the previous/next tab in that direction is displayed. @@ -102,7 +100,6 @@ Scroll buttons are shown when the available space is not enough to render all We /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Keyboard Navigation |Keys|Description| @@ -115,7 +112,7 @@ Scroll buttons are shown when the available space is not enough to render all We ### Prefix / Suffix -Each tab has default slot to display information - icon, text or both and `prefix` and `suffix` slots to show additional content in the beginning and/or in the end. +Besides the `label` slot to display information - icon, text or both, each tab also has `prefix` and `suffix` slots to show additional content in the beginning and/or in the end. ```css /* shared styles are loaded from: */ @@ -130,7 +127,6 @@ igc-icon-button { } ``` - ## Styling The [`IgcTabsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctabscomponent.html) component exposes several CSS parts, giving you full control over its style: @@ -229,7 +225,6 @@ igc-tab::part(tab-header)::before { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API Reference - [`IgcTabsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctabscomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tailwind.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tailwind.md index 7b2d11b52..39ab1c657 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tailwind.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tailwind.md @@ -86,7 +86,6 @@ main { } ``` - > [!NOTE] > This sample is fictional and fully custom, it’s not part of the Ignite UI component library. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/templates.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/templates.md index df0e139ee..a42ebc8d4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/templates.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/templates.md @@ -27,7 +27,6 @@ igc-combo::part(empty) { } ``` - ## Template Types ### Item Template diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/text-area.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/text-area.md index 26f19599e..2dbeaba8e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/text-area.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/text-area.md @@ -20,7 +20,6 @@ The Ignite UI for Web Components Text Area represents a multi-line plain-text ed /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Dependencies To get started we need to import the [`IgcTextareaComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctextareacomponent.html) in our typescript file and register the component by calling the [defineComponents()](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/index.html#defineComponents) function as follows: @@ -49,7 +48,6 @@ With `prefix` and `suffix` slots we can add different content before and after t /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Text Area Resizing There are three different resize options of the [`IgcTextareaComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctextareacomponent.html). When set to `none`, the text area does not resize and uses a scroll bar to show overflow text. When set to `vertical` (the default option), the text area lets the user resize it vertically. When set to `auto`, the text area shows all the user input at once. Overflow text wraps onto a new line and expands the text area automatically. @@ -65,7 +63,6 @@ There are three different resize options of the [`IgcTextareaComponent`](https:/ } ``` - The full list of attributes of the text area can be found in [`IgcTextareaComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctextareacomponent.html) API. ## Form Integration @@ -80,7 +77,6 @@ The sample below shows how a [`IgcTextareaComponent`](https://www.infragistics.c } ``` - ## Styling The [`IgcTextareaComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igctextareacomponent.html) component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts: @@ -134,7 +130,6 @@ igc-textarea::part(suffix) { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-grid.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-grid.md index 415e0180c..fe855f3e3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-grid.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-grid.md @@ -17,7 +17,6 @@ In addition to predefined themes and palettes, you can further customize the loo - ## Available Theming Properties | Property name | Type | Description | diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-mcp.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-mcp.md index 19fa57131..087e044a6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-mcp.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/theming-mcp.md @@ -1,25 +1,27 @@ --- -title: Web Components Theming MCP | Infragistics -_description: Web Components works with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Ignite UI for Web Components applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements. +title: Web Components Theming MCP | Infragistics +_description: Use the Ignite UI Theming MCP server to generate Ignite UI for Web Components palettes, themes, typography, and design token overrides through your AI assistant. _keywords: Ignite UI for Web Components controls, Web Components widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations _license: MIT mentionedTypes: [] _tocName: Theming MCP --- + + # Ignite UI Theming MCP -

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe what you want — the assistant does the rest.

+

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe the theme, palette, or component overrides you want generated.

## Overview -Instead of writing styles by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more. +The Ignite UI Theming MCP server gives AI assistants the knowledge and tools to produce accurate theming code, including palettes with proper shade generation, typography, elevations, component design token overrides, and more. -The server supports all four Ignite UI design systems — **Material**, **Bootstrap**, **Fluent**, and **Indigo** — in both light and dark variants. While this guide focuses on Web Components, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. +The server supports all four Ignite UI design systems (**Material**, **Bootstrap**, **Fluent**, and **Indigo**) in both light and dark variants. While this guide focuses on Web Components, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. -Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** — the server compiles it for you. +Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** - the server compiles it for you. The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, the Theming MCP handles palettes, themes, tokens, typography, elevations, and styling workflows, while the CLI MCP handles project creation, project modification, component workflows, and documentation-oriented tasks. Most teams will want both servers connected in the same AI client. @@ -31,7 +33,7 @@ For a concrete combined workflow after setup, see [Build an App End-to-End with > _"What design tokens are available for the button component? Customize it with my brand purple #8b5cf6."_ -> _"My brand guidelines specify exact hex values for every primary shade — create a custom palette with those explicit values."_ +> _"My brand guidelines specify exact hex values for every primary shade - create a custom palette with those explicit values."_ > _"Make the calendar component use smaller spacing."_ @@ -39,9 +41,9 @@ For a concrete combined workflow after setup, see [Build an App End-to-End with Before configuring the MCP server, make sure you have: -- **Node.js** (v18 or later) installed — this provides the `npx` command used to launch the server. +- **Node.js** (v18 or later) installed. This provides the `npx` command used to launch the server. - A project with an **Ignite UI package** listed as a dependency in `package.json`. -- An **AI client with MCP support** — for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. +- An **AI client with MCP support** - for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. If you do not have Ignite UI Theming installed yet, run: @@ -181,11 +183,11 @@ For any other MCP-compatible client, use the STDIO transport with this launch co npx -y igniteui-theming igniteui-theming-mcp ``` -## Customizing AI Behavior with Project Rules +## Customize AI Behavior with Project Rules This section is optional. It is aimed at teams that want to fine-tune _how_ the AI generates theming code to match their existing codebase conventions. -Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI _which tools to call and in what order_ — you do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. +Editors like VS Code and Cursor let you provide project-level instruction files that shape how the AI behaves. The MCP server already teaches the AI _which tools to call and in what order_. You do not need to repeat that. Instead, use these instruction files to encode your **project's design decisions, code conventions, and file organization** so the AI produces code that fits your codebase on the first try. ### VS Code (`.github/copilot-instructions.md`) @@ -193,12 +195,12 @@ Editors like VS Code and Cursor let you provide project-level instruction files ## Theming Conventions ### Sass Code Style -- Use `@use` / `@forward` — never `@import`. +- Use `@use` / `@forward` - never `@import`. - Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`). - Prefer setting primary design tokens over overriding many dependent tokens. For example, setting `$foreground` on a flat button automatically derives `$hover-background`, `$focus-background`, and `$active-background`. -- Keep component overrides scoped — use the component's default selector +- Keep component overrides scoped - use the component's default selector (e.g., `.igx-button--flat`) unless a narrower scope is needed. ``` @@ -213,12 +215,12 @@ globs: ["**/*.scss", "**/styles/**"] ## Project Theming Rules ### Code conventions -- `@use` / `@forward` only — no `@import`. +- `@use` / `@forward` only - no `@import`. - Extract shared colors into variables; do not repeat hex literals. -- Prefer primary tokens — let dependent tokens derive automatically. +- Prefer primary tokens - let dependent tokens derive automatically. - One component override per file. Name the file after the component. - Comment every override with the design rationale. -- Never hard-code gray shades for text — use palette grays so dark mode works. +- Never hard-code gray shades for text - use palette grays so dark mode works. - For dark mode, only the palette changes. Component overrides stay the same. ``` @@ -227,7 +229,7 @@ globs: ["**/*.scss", "**/styles/**"] ## Available Tools -The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly — just describe what you want. +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never need to call them directly. Just describe what you want. To see the current full list of tools and their parameters at any time, ask your AI assistant: @@ -238,15 +240,15 @@ Here is a brief overview of each tool: | Tool | Description | |------|-------------| | `detect_platform` | Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. | -| `create_palette` | Generates a color palette with automatic shade variants (50–900, A100–A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | -| `create_custom_palette` | Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. | +| `create_palette` | Generates a color palette with automatic shade variants (50-900, A100-A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | +| `create_custom_palette` | Fine-grained palette creation. Specify exact hex values for every shade when automatic generation is not suitable. | | `create_typography` | Sets up a font family and type scale for a given design system. | -| `create_elevations` | Configures box-shadow elevation levels (0–24) for Material or Indigo design systems. | +| `create_elevations` | Configures box-shadow elevation levels (0-24) for Material or Indigo design systems. | | `create_theme` | One-shot complete theme: palette + typography + elevations, ready to include in your `styles.scss`. Accepts a `designSystem` (`material`, `bootstrap`, `fluent`, or `indigo`) and `variant` (`light` or `dark`). | | `set_size` | Sets `--ig-size` globally or for a specific component (`small`, `medium`, or `large`). | | `set_spacing` | Sets `--ig-spacing` (and optionally inline/block overrides) globally or per component. | | `set_roundness` | Sets `--ig-radius-factor` (0 = square, 1 = fully round) globally or per component. | -| `get_component_design_tokens` | Returns all available design tokens for a component — always call this before `create_component_theme`. | +| `get_component_design_tokens` | Returns all available design tokens for a component. Always call this before `create_component_theme`. | | `create_component_theme` | Generates Sass or CSS to customize a component's tokens (colors, borders, etc.). Accepts a `variant` (`light` or `dark`) to select the correct schema. | | `get_color` | Returns a CSS variable reference for a palette color, e.g. `var(--ig-primary-500)`. Supports optional contrast and opacity parameters. | | `read_resource` | Reads built-in reference resources organized into four categories: platform configs (6), palette/typography/elevation presets (5), color guidance (7), and layout/spacing docs (8). | @@ -254,7 +256,7 @@ Here is a brief overview of each tool: > [!NOTE] > For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. -## Example Scenarios +## Common Workflows The following scenarios show what you can ask the AI to do once the MCP server is connected. @@ -290,7 +292,7 @@ $my-palette: palette( ### Brand-Exact Color Shades -> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."_ +> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values - create a custom palette."_ The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. @@ -302,7 +304,7 @@ The AI will call `get_component_design_tokens` first to discover valid token nam ### Layout Adjustments -> _"The calendar feels bloated — reduce its spacing, and make all components slightly smaller."_ +> _"The calendar feels bloated - reduce its spacing, and make all components slightly smaller."_ The AI will call `set_spacing` scoped to the calendar component and `set_size` at the `:root` level. @@ -323,12 +325,10 @@ For light themes use a light surface (e.g., `#fafafa`). For dark themes use a da ## Additional Resources - [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md) - - - - [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) - [Ignite UI for Web Components Skills](./skills.md) - [Ignite UI CLI MCP](./cli-mcp.md) +- [MAKER Framework](./maker-framework.md) @@ -88,7 +87,7 @@ constructor() { -The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filteringExpressionsTree) which is stored in the `AdvancedFilteringExpressionsTree` input property. You could use the `AdvancedFilteringExpressionsTree` property to set an initial state of the advanced filtering. +The advanced filtering generates a [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filteringExpressionsTree) which is stored in the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#advancedFilteringExpressionsTree) input property. You could use the [`advancedFilteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#advancedFilteringExpressionsTree) property to set an initial state of the advanced filtering. ```typescript connectedCallback(): void { @@ -117,7 +116,7 @@ connectedCallback(): void { } ``` -In case you don't want to show the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) toolbar, you could use the `OpenAdvancedFilteringDialog` and `CloseAdvancedFilteringDialog` methods to open and close the advanced filtering dialog programmatically. +In case you don't want to show the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) toolbar, you could use the [`openAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#openAdvancedFilteringDialog) and [`closeAdvancedFilteringDialog`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#closeAdvancedFilteringDialog) methods to open and close the advanced filtering dialog programmatically. > [!Note] > You can enable both the **QuickFilter**/**ExcelStyleFilter** and the advanced filtering user interfaces in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). Both filtering user interfaces will work independently of one another. The final filtered result in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) is the intersection between the results of the two filters. @@ -192,7 +191,6 @@ export class EmployeesFlatData extends Array { } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-editing.md index 9a489b8a6..827b12b3c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-editing.md @@ -57,7 +57,6 @@ export class EmployeesNestedTreeData extends Array /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Cell Editing ### Editing through UI @@ -204,7 +203,6 @@ export class RoleplayTreeGridData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## CRUD operations > [!Note] @@ -232,7 +230,7 @@ public addNewChildRow() { ### Updating data in the Tree Grid -Updating data in the Tree Grid is achieved through `UpdateRow` and `UpdateCell` methods but **only if the PrimaryKey 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 Tree Grid is achieved through [`updateRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#updateRow) and [`updateCell`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#updateCell) methods but **only if the PrimaryKey for the grid is defined**. You can also directly update a cell and/or a row value through their respective **update** methods. @@ -255,7 +253,7 @@ row.update(newData); ### Deleting data from the Tree Grid -Please keep in mind that `DeleteRow` method will remove the specified row only if a `PrimaryKey` is defined. +Please keep in mind that [`deleteRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#deleteRow) method will remove the specified row only if a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#primaryKey) is defined. @@ -310,6 +308,8 @@ public webTreeGridCellEdit(event: CustomEvent): void { ``` + + The result of the above validation being applied to our [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) can be seen in the below demo: @@ -351,7 +351,6 @@ export class EmployeesNestedTreeData extends Array /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -420,13 +419,9 @@ export class EmployeesNestedTreeData extends Array } ``` - ## API References - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) - - - - [`IgcDatePickerComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcdatepickercomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-merging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-merging.md index f89b4e93f..7202c1b93 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-merging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-merging.md @@ -62,7 +62,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Enabling and Using Cell Merging @@ -444,7 +443,6 @@ export const generateEmployeeDetailedFlatData2 = () => ([ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Feature Integration diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-selection.md index ace267d2e..f67db6a4f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-cell-selection.md @@ -62,7 +62,6 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Selection Types ### Tree Grid Multiple-Cell Selection @@ -145,18 +144,17 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Tree Grid Single Selection -When you set the `CellSelection` to **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. +When you set the [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#cellSelection) to **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. > When single cell is selected [`selected`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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` event is emitted. ### Tree Grid None Selection -If you want to disable cell selection you can just set `CellSelection` to **none**. 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. +If you want to disable cell selection you can just set [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#cellSelection) to **none**. 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 @@ -185,7 +183,7 @@ Below are the methods that you can use in order to select ranges, clear selectio ### Select range -`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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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. ```ts const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 }; @@ -196,7 +194,7 @@ this.grid.selectRange(range); ### Clear cell selection -`ClearCellSelection` will clear the current cell selection. +[`clearCellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#clearCellSelection) will clear the current cell selection. ```ts this.grid.clearCellSelection(); @@ -274,7 +272,7 @@ The multi-cell selection is index based (DOM elements selection). - `Filtering` - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells. - `Resizing` - On column resizing selected cells will not be cleared. - `Hiding` - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected. -- `Pinning` - Selected cell will not be cleared. Same as hiding +- [`pinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#pinning) - Selected cell will not be cleared. Same as hiding - `GroupBy` - On column grouping selected cells will not be cleared. @@ -349,7 +347,6 @@ export class OrdersTreeData extends Array { } ``` - ## API References - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-clipboard-interactions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-clipboard-interactions.md index 5d85bcab1..e47026bb7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-clipboard-interactions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-clipboard-interactions.md @@ -94,7 +94,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Functionality Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are: @@ -121,17 +120,17 @@ Copy behavior is working with the default interaction defined by the browser and ## API Usage -We expose [`IgcClipboardOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcclipboardoptions.html) property, which handles the following options: +We expose [`clipboardOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#clipboardOptions) property, which handles the following options: -- [`enabled`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcclipboardoptions.html#enabled) Enables/disables copying of selected cells. -- [`copyHeaders`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcclipboardoptions.html#copyHeaders) Include the associated headers when copying. -- [`copyFormatters`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcclipboardoptions.html#copyFormatters) Apply any existing column formatters to the copied data. -- [`separator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcclipboardoptions.html#separator) The string separator to use the for formatting the data in the clipboard. Default is `/t` +- `Enabled` Enables/disables copying of selected cells. +- `CopyHeaders` Include the associated headers when copying. +- `CopyFormatters` Apply any existing column formatters to the copied data. +- `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` Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the [`IgcClipboardOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcclipboardoptions.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#clipboardOptions). ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-collapsible-column-groups.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-collapsible-column-groups.md index dde740f35..b314ac5f0 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-collapsible-column-groups.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-collapsible-column-groups.md @@ -64,7 +64,6 @@ export class EmployeesFlatDetails extends Array { } ``` - ## Setup To get started with the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) and the **Collapsible multi-column headers** feature, first you need to install Ignite UI for Web Components by typing the following command: @@ -82,9 +81,9 @@ Also, we strongly suggest that you take a brief look at [multi-column headers](m **Collapsible Column Groups** is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated. -In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#columnGroup) to **true**. +In order to define a column group as collapsible, you need to set the [`collapsible`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#collapsible) property on the [`columnGroup`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#columnGroup) to **true**. -You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. +You need to define the property [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) to at least two child columns. At least one column must be visible when the group is collapsed ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) set to **true**) and at least one column must be hidden when the group is expanded ([`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) set to `false`), otherwise the **collapsible functionality will be disabled**. If [`visibleWhenCollapsed`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumngroupcomponent.html#visibleWhenCollapsed) is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed. Let's see the markup below: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-hiding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-hiding.md index 542d08ed9..3d4814ddf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-hiding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-hiding.md @@ -60,7 +60,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Tree Grid Setup Let's start by creating our [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) and binding it to our data. We will also enable both filtering and sorting for the columns. @@ -87,7 +86,7 @@ Let's start by creating our [`IgcTreeGridComponent`](https://www.infragistics.co The built-in Column Hiding UI is placed inside an `DropDown` in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'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 [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) and the [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) inside of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). +For this purpose all we have to do is set both the [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) and the [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) inside of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). @@ -275,7 +274,6 @@ export class EmployeesFlatDetails extends Array { } ``` - ## API References In this article we learned how to use the built-in column hiding UI in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s toolbar. The column hiding UI has a few more APIs to explore, which are listed below. @@ -288,15 +286,15 @@ Additional components with relative APIs that were used: - [`disableHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#disableHiding) -[`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) properties: +[`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) properties: - `showProgress` -[`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) methods: +[`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) methods: -- [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) -- [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) -- [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html) +- [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) +- [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) +- [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html) [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) events: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-moving.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-moving.md index 3108f04d8..c49798516 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-moving.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-moving.md @@ -77,16 +77,15 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Overview -**Column moving** feature is enabled on a per-grid level, meaning that the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) could have either movable or immovable columns. This is done via the `Moving` input of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). +**Column moving** feature is enabled on a per-grid level, meaning that the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) could have either movable or immovable columns. This is done via the [`moving`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#moving) input of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). ## API In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: -`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` value), which determines whether to place the column before or after the target column. +[`moveColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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` value), which determines whether to place the column before or after the target column. ```typescript // Move the ID column after the Name column @@ -104,7 +103,7 @@ const idColumn = grid.getColumnByName("ID"); idColumn.move(3); ``` -Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the `Moving` property to true. +Note that when using the column moving feature, the `ColumnMovingEnd` event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the [`moving`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#moving) property to true. ## Events @@ -206,7 +205,6 @@ export class EmployeesFlatDetails extends Array { } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-pinning.md index f88881211..9ad46a513 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-pinning.md @@ -56,7 +56,6 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Column Pinning API Column pinning is controlled through the [`pinned`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pinned) property of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html). Pinned columns are rendered on the left side of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) by default and stay fixed through horizontal scrolling of the unpinned columns in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) body. @@ -71,7 +70,7 @@ Column pinning is controlled through the [`pinned`](https://www.infragistics.com -You may also use the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s `PinColumn` or `UnpinColumn` methods of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) to pin or unpin columns by their field name: +You may also use the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s [`pinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#pinColumn) or [`unpinColumn`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#unpinColumn) methods of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) to pin or unpin columns by their field name: @@ -112,7 +111,7 @@ public columnPinning(event) { ## Pinning Position -You can change the column pinning position via the `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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#pinning) configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right. ```html @@ -169,7 +168,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Column Pinning on Both Sides Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one. @@ -217,7 +215,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Custom Column Pinning UI You can define your custom UI and change the pin state of the columns via the related API. @@ -330,7 +327,6 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Pinning Limitations - Setting column widths in percentage (%) explicitly makes the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) 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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). @@ -403,7 +399,6 @@ export class EmployeesFlatData extends Array { } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-resizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-resizing.md index 8e4185690..26fab28b1 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-resizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-resizing.md @@ -60,7 +60,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - **Column resizing** is also enabled per-column level, meaning that the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) can have a mix of resizable and non-resizable columns. This is done via the [`resizable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#resizable) input of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html). ```html @@ -226,7 +225,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -293,7 +291,6 @@ export class EmployeesFlatDetails extends Array { } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-selection.md index c73a8eca1..676e27841 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-selection.md @@ -13,7 +13,7 @@ _premium: true # Web Components Tree Grid Column Selection Overview -The Web Components Tree Grid Column Selection feature in Ignite UI for Web Components offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the `ColumnSelection` input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. +The Web Components Tree Grid Column Selection feature in Ignite UI for Web Components offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#columnSelection) input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. ## Web Components Tree Grid Column Selection Example @@ -60,10 +60,9 @@ export class FoodsData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Basic Usage -The column selection feature can be enabled through the `ColumnSelection` input, which takes `GridSelectionMode` values. +The column selection feature can be enabled through the [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#columnSelection) input, which takes `GridSelectionMode` values. ## Interactions @@ -121,11 +120,10 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Keyboard Combinations > [!Note] -> The keyboard combinations are available only when the grid `ColumnSelection` input is set to `multiple`. +> The keyboard combinations are available only when the grid [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#columnSelection) input is set to `multiple`. There are two scenarios for keyboard navigation of the **Column Selection** feature: @@ -219,7 +217,6 @@ export class EmployeesFlatDetails extends Array { } ``` - ## API References The column selection UI has a few more APIs to explore, which are listed below. @@ -230,12 +227,12 @@ The column selection UI has a few more APIs to explore, which are listed below. [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) properties: -- `ColumnSelection` -- `SelectedColumns` -- `SelectColumns` -- `DeselectColumns` -- `SelectAllColumns` -- `DeselectAllColumns` +- [`columnSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#columnSelection) +- [`selectedColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#selectedColumns) +- [`selectColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#selectColumns) +- [`deselectColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#deselectColumns) +- [`selectAllColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#selectAllColumns) +- [`deselectAllColumns`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#deselectAllColumns) [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-types.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-types.md index 8e19d4fc5..a7cf2cd3c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-types.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-column-types.md @@ -301,7 +301,6 @@ img { } ``` - ## Web Components Tree Grid Default Template @@ -316,7 +315,7 @@ This column [`dataType`](https://www.infragistics.com/products/ignite-ui-web-com ### Number -If the [`dataType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#dataType) is set to **number**, the cell value will be formatted based on application or grid's `Locale` settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: +If the [`dataType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#locale) settings, as well as when [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) property is specified. Then the number format will be changed based on them, for example it might change the: - Number of digits after the decimal point - Decimal separator with `,` or `.` @@ -341,7 +340,7 @@ constructor() { ### DateTime, Date and Time -The appearance of the date portions will be set (e.g. day, month, year) based on `Locale` format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: +The appearance of the date portions will be set (e.g. day, month, year) based on [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#locale) format or [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) input. The pipe arguments can be used to specify a custom date format or timezone: - **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc. - **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: @@ -437,7 +436,7 @@ Default template is using the value coming from the data as an image source to a ``` -When `AutoGenerate` is used for the 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 [`autoGenerate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#autoGenerate) is used for the 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. ### Currency @@ -563,7 +562,7 @@ public formatCurrency(value: number) { - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) - [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs) - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) -- `Locale` +- [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#locale) - [`dataType`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#dataType) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-conditional-cell-styling.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-conditional-cell-styling.md index b8cdf5ceb..9299cdd6e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-conditional-cell-styling.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-conditional-cell-styling.md @@ -19,14 +19,14 @@ The Ignite UI for Web Components Conditional Styling feature in Web Components T The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component in Ignite UI for Web Components provides two ways to **conditional styling of rows** based on custom rules. -- By setting `RowClasses` input on the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component; -- By setting `RowStyles` input on the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component; +- By setting [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowClasses) input on the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component; +- By setting [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowStyles) input on the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component; Further in this topic we will cover both of them in more details. ### Using Row Classes -You can conditionally style the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) rows by setting the `RowClasses` input and define custom rules. +You can conditionally style the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) rows by setting the [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowClasses) input and define custom rules. ```html @@ -40,17 +40,17 @@ constructor() { } ``` -The `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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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. ```ts public rowClasses = { - activeRow: (row: IgcRowType) => row.index === 0 + activeRow: (row: IgcRowType) => row.index % 2 === 0 } ``` ```css .activeRow { - border: 2px solid #fc81b8; + border-top: 2px solid #fc81b8; border-left: 3px solid #e41c77; } ``` @@ -99,12 +99,11 @@ export class EmployeesFlatData extends Array { } ``` - ### Using Row Styles -The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) control exposes the `RowStyles` property which allows conditional styling of the data rows. Similar to `RowClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). +The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) control exposes the [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowStyles) property which allows conditional styling of the data rows. Similar to [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowClasses) it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions). -> The callback signature for both `RowStyles` and `RowClasses` is: +> The callback signature for both [`rowStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowStyles) and [`rowClasses`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowClasses) is: ```ts (row: IgcRowType) => boolean @@ -189,7 +188,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Tree Grid Conditional Cell Styling ## Overview @@ -300,7 +298,6 @@ export class OrdersTreeData extends Array { } ``` - - By using the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) input [`cellStyles`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#cellStyles) which accepts an object literal where the keys are style properties and the values are expressions for evaluation. > The callback signature for both `cellStyles` and `cellClasses` is now changed to: @@ -384,7 +381,6 @@ export class OrdersTreeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## 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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-editing.md index 7881f4cdc..14c30bb4f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-editing.md @@ -20,7 +20,7 @@ The Ignite UI for Web Components Cell Editing feature in Web Components Tree Gri ## Setup -In order to specify which edit mode should be enabled, the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) and `RowEditable`. +In order to specify which edit mode should be enabled, the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) exposes the following boolean properties - [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowEditable). The [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) property enables you to specify the following options: @@ -29,12 +29,12 @@ The [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/ > Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). -The `RowEditable` property enables you to specify the following options: +The [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowEditable) property enables you to specify the following options: - **false** - the row editing in the corresponding grid will be disabled. This is the default value. - **true** - the row editing in the corresponding grid will be enabled. -In the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), if you set `RowEditable` property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. +In the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), if you set [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowEditable) property to true, and the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**. All available column data types could be found in the official [Column types topic](column-types.md#default-template). @@ -86,7 +84,7 @@ The grid exposes a wide array of events that provide greater control over the ed ### Event Cancellation - `RowEditEnter` - Neither `Row` nor `Cell` will enter edit mode. -- `CellEditEnter` - Prevents entering cell edit. If `RowEditable` is enabled, row edit will be triggered, although cell edit will remain forbidden. +- `CellEditEnter` - Prevents entering cell edit. If [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowEditable) is enabled, row edit will be triggered, although cell edit will remain forbidden. - `CellEdit` - Allowed `Cell` and/or `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. @@ -129,7 +127,6 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Features integration While a cell/row is in edit mode, a user may interact with the grid in many ways. The following table specifies how a certain interaction affects the current editing: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-excel-style-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-excel-style-filtering.md index beca9bf54..0c0db6e48 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-excel-style-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-excel-style-filtering.md @@ -51,10 +51,9 @@ export class FoodsData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage -To turn on the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component's Excel-style filtering, two inputs should be set. The `AllowFiltering` should be set to **true** and the `FilterMode` should be set to `ExcelStyleFilter` value. +To turn on the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component's Excel-style filtering, two inputs should be set. The [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#allowFiltering) should be set to **true** and the [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filterMode) should be set to `ExcelStyleFilter` value. ```html @@ -132,12 +131,11 @@ export class FoodsData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Templates -If you want to further customize the Excel style filter menu, you can use the `ExcelStyleHeaderIconTemplate` property to define a custom template for the header icon of the menu. +If you want to further customize the Excel style filter menu, you can use the [`excelStyleHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#excelStyleHeaderIconTemplate) property to define a custom template for the header icon of the menu. -The following code demonstrates how to customize the Excel style filter menu using the `ExcelStyleHeaderIconTemplate`: +The following code demonstrates how to customize the Excel style filter menu using the [`excelStyleHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#excelStyleHeaderIconTemplate): ```ts constructor() { @@ -214,7 +212,6 @@ export class FoodsData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling @@ -295,7 +292,6 @@ export class FoodsData extends Array { } ``` - ## API References - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-export-excel.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-export-excel.md index 7d94ec0e0..88d113dab 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-export-excel.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-export-excel.md @@ -13,7 +13,7 @@ _premium: true # Web Components Tree Grid Exporting -The Ignite UI for Web Components Tree Grid provides data export functionality through the Grid Toolbar Exporter component. You can export the displayed data to Excel, CSV, or PDF formats. Excel exports use the MS Excel table format, which supports features like filtering and sorting. To enable exporting, place the [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) inside the grid's toolbar. By default, all export formats are enabled. +The Ignite UI for Web Components Tree Grid provides data export functionality through the Grid Toolbar Exporter component. You can export the displayed data to Excel, CSV, or PDF formats. Excel exports use the MS Excel table format, which supports features like filtering and sorting. To enable exporting, place the [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) inside the grid's toolbar. By default, all export formats are enabled. ## Web Components Exporting Example @@ -74,7 +74,6 @@ export class EmployeesNestedData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Export Multi Column Headers Grid You can export [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` `IgnoreMultiColumnHeaders` to `true`. @@ -83,7 +82,7 @@ You can export [`IgcTreeGridComponent`](https://www.infragistics.com/products/ig > The exported [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) will not be formatted as a table, since Excel tables do not support multiple column headers. > [!Note] -> [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons: +> [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons: > > - `export-excel`, `export-csv`, `export-pdf` @@ -130,7 +129,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Export Grid with Frozen Column Headers By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` `FreezeHeaders` to `true`. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-filtering.md index e2f1f20a0..cc51d3b6d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-filtering.md @@ -60,22 +60,21 @@ export class OrdersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Setup -In order to specify if filtering is enabled and which filtering mode should be used, the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) exposes the following properties - `AllowFiltering`, `AllowAdvancedFiltering`, `FilterMode` and [`filterable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable). +In order to specify if filtering is enabled and which filtering mode should be used, the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) exposes the following properties - [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#allowFiltering), [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#allowAdvancedFiltering), [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filterMode) and [`filterable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable). -Property `AllowFiltering` enables you to specify the following options: +Property [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#allowFiltering) enables you to specify the following options: - **false** - the filtering for the corresponding grid will be disabled. This is the default value. - **true** - the filtering for the corresponding grid will be enabled. -Property `AllowAdvancedFiltering` enables you to specify the following options: +Property [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#allowAdvancedFiltering) enables you to specify the following options: - **false** - the advanced filtering for the corresponding grid will be disabled. This is the default value. - **true** - the advanced filtering for the corresponding grid will be enabled. -Property `FilterMode` enables you to specify the following options: +Property [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filterMode) enables you to specify the following options: - **QuickFilter** - a simplistic filtering UI. This is the default value. - **ExcelStyleFilter** - an Excel-like filtering UI. @@ -94,7 +93,7 @@ Property [`filterable`](https://www.infragistics.com/products/ignite-ui-web-comp -To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the `AllowAdvancedFiltering` input property to **true** +To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the [`allowAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#allowAdvancedFiltering) input property to **true** ```html @@ -114,7 +113,7 @@ While some filtering conditions have been applied to a column, and the filter ro 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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#dataType) of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the `IgnoreCase` and the initial `Condition` properties. -The filtering feature is enabled for the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component by setting the `AllowFiltering` input to **true**. The default `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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable) input to **false**. +The filtering feature is enabled for the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component by setting the [`allowFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#allowFiltering) input to **true**. The default [`filterMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filterable) input to **false**. @@ -129,9 +128,9 @@ The filtering feature is enabled for the [`IgcTreeGridComponent`](https://www.in > [!Note] > If values of type **string** are used by a column of data type **date**, the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) 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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) API. The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) exposes several methods for this task - [`Filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_excel.filter.html), `FilterGlobal` and `ClearFilter`. +You can filter any column or a combination of columns through the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) API. The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) exposes several methods for this task - [`filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filter), [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filterGlobal) and [`clearFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#clearFilter). -- [`Filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_excel.filter.html) - filter a single column or a combination of columns. +- [`filter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filter) - filter a single column or a combination of columns. There are five filtering operand classes exposed: @@ -180,7 +179,7 @@ gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTre this.grid.filteringExpressionsTree = gridFilteringExpressionsTree; ``` -- `FilterGlobal` - clears all existing filters and applies the new filtering condition to all Tree Grid's columns. +- [`filterGlobal`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filterGlobal) - clears all existing filters and applies the new filtering condition to all Tree Grid's columns. ```typescript // Filter all cells for a value which contains `myproduct` @@ -188,7 +187,7 @@ this.grid.filteringLogic = FilteringLogic.Or; this.grid.filterGlobal('myproduct', IgcStringFilteringOperand.instance().condition('contains'), false); ``` -- `ClearFilter` - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns. +- [`clearFilter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#clearFilter) - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns. ```typescript // Remove the filtering state from the ProductName column @@ -200,7 +199,7 @@ this.grid.clearFilter(); ## Initial filtered state -To set the initial filtering state of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), set the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#filteringExpressionsTree) for each column to be filtered. +To set the initial filtering state of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), set the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filteringExpressionsTree) property to an array of [`filteringExpressionsTree`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filteringExpressionsTree) for each column to be filtered. ```typescript constructor() { @@ -227,7 +226,7 @@ constructor() { ### Filtering logic -The `FilteringLogic` property of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) controls how filtering multiple columns will resolve in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). You can change it at any time through the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) API, or through the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) input property. +The [`filteringLogic`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#filteringLogic) property of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) controls how filtering multiple columns will resolve in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). You can change it at any time through the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) API, or through the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) input property. ```typescript import { FilteringLogic } from "igniteui-webcomponents-grids/grids"; @@ -395,7 +394,6 @@ export class OrdersData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -463,7 +461,6 @@ export class OrdersData extends Array { } ``` - ## Known Limitations > [!Note] diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-keyboard-navigation.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-keyboard-navigation.md index 45a130a5e..4e6b93326 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-keyboard-navigation.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-keyboard-navigation.md @@ -52,9 +52,6 @@ When the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-u - CTRL + ↑ sorts the active column header in ASC order. If the column is already sorted in ASC, sorting state is cleared. - CTRL + ↓ sorts the active column header in DSC order. If the column is already sorted in DSC, sorting state is cleared. - SPACE selects the column. If the column is already selected, selection is cleared. - - - - SHIFT + ALT + → ungroups the column, if the column is marked as groupable. - ALT + ← or ALT + ↑ collapses the column group header, if the header is not already collapsed. - ALT + → or ALT + ↓ expands the column group header, if the header is not already expanded. @@ -92,10 +89,6 @@ When the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-u - SPACE - selects the row, if [Row Selection](row-selection.md) is enabled. - ALT + ← or ALT + ↑ - - - - - collapses the current node. @@ -107,16 +100,12 @@ collapses the current node. - - expands the current node. - - Practice all of the above mentioned actions in the demo sample below. Focus any navigable grid element and a list with some of the available actions for the element will be shown to guide you through. ## Demo @@ -253,7 +242,6 @@ export class Item { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Custom Keyboard Navigation Overriding the default behavior for a certain key or keys combination is one of the benefits that the **Keyboard Navigation** feature provides. For example: press the ENTER or TAB key to navigate to the next cell or the cell below. This or any other navigation scenario is easily achieved by the **Keyboard Navigation** API: @@ -384,7 +372,6 @@ export class EmployeesNestedData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Known Limitations |Limitation|Description| diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-live-data.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-live-data.md index 28e50bc6c..1e92d8330 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-live-data.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-live-data.md @@ -1286,7 +1286,6 @@ export class FinancialData { } ``` - ## Data binding and updates A service provides data to the component when the page loads, and when the slider controller is used to fetch a certain number of records. While in a real scenario updated data would be consumed from the service, here data is updated in code. This is done to keep the demo simple and focus on its main goal - demonstrate the grid performance. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-load-on-demand.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-load-on-demand.md index d24545047..6782eca37 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-load-on-demand.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-load-on-demand.md @@ -77,7 +77,6 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage The Load on Demand feature is compatible with both types of Tree Grid data sources - primary and foreign keys or child collection. You only need to load the root level data in the Tree Grid and specify the necessary keys for one of the data source types. In order to load the child rows when the user expands a row, the Tree Grid provides the callback input property [`loadChildrenOnDemand`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#loadChildrenOnDemand). diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-multi-column-headers.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-multi-column-headers.md index 66ad996e3..d628e018f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-multi-column-headers.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-multi-column-headers.md @@ -60,7 +60,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - The declaration of multi-column headers is achieved by wrapping a set of columns into an [`columnGroup`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#columnGroup) component with [`header`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#header) title information passed. ```html @@ -214,7 +213,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -289,7 +287,6 @@ export class EmployeesFlatDetails extends Array { } ``` - ## API References - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-overview.md index 6ad6f469d..5a1c3efc7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-overview.md @@ -77,7 +77,6 @@ export class EmployeesNestedData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Getting Started with Ignite UI for Web Components Tree Grid ### Dependencies @@ -185,7 +184,7 @@ Now let's start by importing our [`data`](https://www.infragistics.com/products/ In order for the tree grid to build the hierarchy, we will have to set its [`childDataKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#childDataKey) property to the name of the child collection that is used in each of our data objects. In our case that will be the **Employees** collection. In addition, we can disable the automatic column generation and define them manually by matching them to the actual properties of our data objects. (The **Employees** collection will be automatically used for the hierarchy, so there is no need to include it in the columns' definitions.) -We can now enable the row selection and paging features of the tree grid by using the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection) and add the [`IgcPaginatorComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginatorcomponent.html) element. +We can now enable the row selection and paging features of the tree grid by using the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection) and add the [`IgcPaginator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginator.html) element. We can also enable the summaries, the filtering, sorting, editing, moving and resizing features for each of our columns. ```html @@ -197,7 +196,7 @@ We can also enable the summaries, the filtering, sorting, editing, moving and re ``` -Finally, we can enable the toolbar of our tree grid, along with the column hiding, column pinning and exporting features by using the [`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html), [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html), [`IgcGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinningcomponent.html) and [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) respectively. +Finally, we can enable the toolbar of our tree grid, along with the column hiding, column pinning and exporting features by using the [`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html), [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html), [`IgcGridToolbarPinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinning.html) and [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) respectively. ```html @@ -300,7 +299,6 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Persistence and Integration The indentation of the tree grid cell persists across other tree grid features like filtering, sorting and paging. @@ -397,12 +395,11 @@ export class EmployeesNestedData extends Array { } ``` - ## API References - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) - [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) -- [`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) +- [`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) - [`IgcTreeGridRecord`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridrecord.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-paging.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-paging.md index 7678ab72d..9892c339c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-paging.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-paging.md @@ -12,7 +12,7 @@ _premium: true # Web Components Tree Grid Pagination Overview -The Ignite UI for Web Components Pagination feature in Web Components Tree Grid is used to split a large set of data into a sequence of pages that have similar content. React grid pagination improves user experience and data interaction. [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) pagination is configurable via a separate component projected in the grid tree by defining a [`IgcPaginatorComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginatorcomponent.html) tag, similar to adding of a column. As in any Web Components table, the pagination in the Web Components Tree Grid supports template for custom pages. +The Ignite UI for Web Components Pagination feature in Web Components Tree Grid is used to split a large set of data into a sequence of pages that have similar content. React grid pagination improves user experience and data interaction. [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) pagination is configurable via a separate component projected in the grid tree by defining a [`IgcPaginator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginator.html) tag, similar to adding of a column. As in any Web Components table, the pagination in the Web Components Tree Grid supports template for custom pages. ## Web Components Tree Grid Pagination Example @@ -56,7 +56,6 @@ export class OrdersTreeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ```css .gridSize { --ig-size: var(--ig-size-small); @@ -72,7 +71,7 @@ export class OrdersTreeData extends Array { ## Usage -The [`IgcPaginatorComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginatorcomponent.html) component is used along with the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component in the example below, but you can use it with any other component in case paging functionality is needed. +The [`IgcPaginator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginator.html) component is used along with the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component in the example below, but you can use it with any other component in case paging functionality is needed. ```html @@ -139,13 +138,12 @@ export class OrdersTreeData extends Array { } ``` -
## API References - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) -- [`IgcPaginatorComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginatorcomponent.html) +- [`IgcPaginator`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpaginator.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-actions.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-actions.md index 39f1db6fe..0166ee046 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-actions.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-actions.md @@ -19,7 +19,7 @@ The Ignite UI for Web Components Row Actions feature in Web Components Tree Grid The predefined actions UI components are: -- [`IgcGridEditingActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the `RowEditable` option and row deletion of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). +- [`IgcGridEditingActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgrideditingactions.html) - includes functionality and UI specifically designed for the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) editing. It allows you to quickly toggle edit mode for cells or rows, depending on the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowEditable) option and row deletion of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). - [`IgcGridPinningActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridpinningactions.html) - includes functionality and UI specifically designed for the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. @@ -58,7 +58,7 @@ They are added inside the [`IgcTreeGridComponent`](https://www.infragistics.com/ These components expose templates giving flexibility for customization. For instance, if we would like to use the [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) for a Gmail scenario with row actions such as **delete**, **edit** and etc. You can simply create button component with icon, add click event to it and insert it into the [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html). - + @@ -116,7 +116,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcGridPinningActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridpinningactions.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-adding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-adding.md index 00fafb10b..d1013ca50 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-adding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-adding.md @@ -58,10 +58,9 @@ export class EmployeesNestedTreeData extends Array /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Row Adding Usage -Then define a [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) with bound data source, `RowEditable` set to true and an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#addRow) input controls the visibility of the button that spawns the row adding UI. +Then define a [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) with bound data source, [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowEditable) set to true and an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) component with editing actions enabled. The [`addRow`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#addRow) input controls the visibility of the button that spawns the row adding UI. @@ -109,7 +108,7 @@ The internal `BaseTransactionService` is automatically provided for [`IgcTreeGri -Using `BeginAddRowById` requires you to specify the row to use as context for the operation by its `RowID` (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. The second parameter controls if the row is added as a child to the context row or as a sibling. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. +Using [`beginAddRowById`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#beginAddRowById) requires you to specify the row to use as context for the operation by its `RowID` (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. The second parameter controls if the row is added as a child to the context row or as a sibling. You can also make the UI spawn as the very first row in the grid by passing `null` for the first parameter. ```typescript this.treeGrid.beginAddRowById('ALFKI', true); // Spawns the add row UI to add a child for the row with PK 'ALFKI' @@ -163,7 +162,7 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the `RowAddTextTemplate`. +Customizing the text of the row adding overlay is possible using the [`rowAddTextTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowAddTextTemplate). @@ -186,13 +185,13 @@ The row adding UI comprises the buttons in the [`IgcActionStrip`](https://www.in ## API References -- `RowEditable` +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` - `RowEditCancel` -- `EndEdit` -- `PrimaryKey` +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#endEdit) +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#primaryKey) - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-drag.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-drag.md index 5a49b1dc1..2f06ea191 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-drag.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-drag.md @@ -13,7 +13,7 @@ _premium: true # Row Dragging in Web Components Tree Grid -The Ignite UI for Web Components Row Dragging feature in Web Components Tree Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component and is configurable via the `RowDraggable` input. +The Ignite UI for Web Components Row Dragging feature in Web Components Tree Grid is easily configurable and is used for rearranging rows within the grid by dragging and dropping them to a new position using the mouse. It is initialized on the root [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component and is configurable via the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowDraggable) input. ## Web Components Tree Grid Row Drag Example @@ -110,10 +110,9 @@ export class EmployeesNestedData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Configuration -In order to enable row-dragging for your [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), all you need to do is set the grid's `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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. +In order to enable row-dragging for your [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), all you need to do is set the grid's [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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. Clicking on the drag-handle and **moving the cursor** while holding down the button will cause the grid's `RowDragStart` event to fire. Releasing the click at any time will cause `RowDragEnd` event to fire. ```html @@ -122,7 +121,7 @@ In order to enable row-dragging for your [`IgcTreeGridComponent`](https://www.in ### Templating the Drag Icon -The drag handle icon can be templated using the grid's `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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#dragIndicatorIconTemplate). In the example we're building, let's change the icon from the default one (**drag_indicator**) to **drag_handle**. ```html @@ -170,9 +169,9 @@ constructor() { > [!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. +> Make sure that there is a [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#primaryKey) specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. -Once `RowDraggable` is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: +Once [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowDraggable) is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: @@ -290,14 +289,13 @@ export class EmployeesNestedTreeData extends Array /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Limitations -Currently, there are no known limitations for the `RowDraggable`. +Currently, there are no known limitations for the [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowDraggable). ## API References -- `RowDraggable` +- [`rowDraggable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowDraggable) - `RowDragStart` - `RowDragEnd` - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-editing.md index 26bfdbc25..0cbfef08c 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-editing.md @@ -56,13 +56,12 @@ export class EmployeesNestedTreeData extends Array /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - > [!Note] > When a row is in edit mode, clicking on a cell in another row will act like the "Done" button is pressed, submitting all changes made in the previous row. If the newly focused cell is editable, the new row enters edit mode as well. However, if the cell is not editable, only the previous row exits edit mode. ## Row Editing Usage -Define a [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) with bound data source and `RowEditable` set to true: +Define a [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) with bound data source and [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowEditable) set to true: @@ -88,7 +87,7 @@ constructor() { > Setting primary key is mandatory for row editing operations. > [!Note] -> Enabling editing for individual columns is not necessary. Using the `RowEditable` property in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) input of that column to `false`. +> Enabling editing for individual columns is not necessary. Using the [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowEditable) property in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), all rows, with defined [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#field) property (excluding the primary row) will be editable. If you want to disable editing for a specific column, simply set the [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) input of that column to `false`. > [!Note] > The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. @@ -228,10 +227,9 @@ export class EmployeesNestedTreeData extends Array } ``` - ## Known Issues and Limitations -- When the grid has no `PrimaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection @@ -243,14 +241,14 @@ export class EmployeesNestedTreeData extends Array ## API References -- `RowEditable` +- [`rowEditable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowEditable) - `RowEditEnter` - `RowEdit` - `RowEditDone` -- `EndEdit` +- [`endEdit`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#endEdit) - [`field`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#field) - [`editable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#editable) -- `PrimaryKey` +- [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#primaryKey) - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) ## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-pinning.md index 114bd4624..f947db842 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-pinning.md @@ -54,7 +54,6 @@ export class EmployeesNestedTreeData extends Array /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Row Pinning UI The built-in row pinning UI is enabled by adding an [`IgcActionStrip`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcactionstrip.html) component with the [`IgcGridPinningActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridpinningactions.html) component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well. @@ -92,7 +91,7 @@ this.grid.pinRow('ALFKI'); this.grid.unpinRow('ALFKI'); ``` -Note that the row ID is the primary key value, defined by the `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. +Note that the row ID is the primary key value, defined by the [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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` event and changing the `InsertAtIndex` property of the event arguments to the desired position index. @@ -115,7 +114,7 @@ public rowPinning(event) { ## Pinning Position -You can change the row pinning position via the `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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#pinning) configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom. ```html @@ -207,7 +206,6 @@ export class EmployeesNestedTreeData extends Array /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Row Pinning Limitations - Only records that exist in the data source can be pinned. @@ -281,7 +279,6 @@ export class EmployeesNestedTreeData extends Array } ``` - ## API References - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-selection.md index ec798e570..22ea82295 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-row-selection.md @@ -64,7 +64,6 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Setup In order to setup row selection in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), you just need to set the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#rowSelection) property. This property accepts `GridSelectionMode` enumeration. @@ -382,7 +381,6 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Excel Style Row Selectors Demo @@ -432,7 +430,6 @@ export class EmployeesFlatData extends Array { } ``` - ### Conditional Selection Demo @@ -476,7 +473,6 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## API References - [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-search.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-search.md index 839a3e997..2ea33ccd2 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-search.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-search.md @@ -85,7 +85,6 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Search Usage ### Tree Grid Setup @@ -136,9 +135,9 @@ private exactMatchChip: IgcChipComponent; ### Web Components Search Box Input -Now let's create our search input! By getting the input element we can get its current value. This will allow us to use the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s `FindNext` and `FindPrev` methods to highlight all the occurrences of the `SearchText` and scroll to the next/previous one (depending on which method we have invoked). +Now let's create our search input! By getting the input element we can get its current value. This will allow us to use the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s [`findNext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findNext) and [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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` and the `FindPrev` methods have three arguments: +Both the [`findNext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findPrev) methods have three arguments: - `Text`: **string** (the text we are searching for) - (optional) `CaseSensitive`: **boolean** (should the search be case sensitive or not, default value is false) @@ -171,7 +170,7 @@ public nextSearch() { ### 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` and the `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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findNext) and the [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findPrev) methods inside the buttons' respective click event handlers. @@ -199,7 +198,7 @@ public nextSearch() { ### 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`/`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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findPrev) methods depending on which key the user has pressed. @@ -274,7 +273,7 @@ Finally, let's update our template with the new components! -We will wrap all of our components inside an [`IgcInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html). 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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s `ClearSearch` method to clear the highlights. +We will wrap all of our components inside an [`IgcInputComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igcinputcomponent.html). 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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s [`clearSearch`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#clearSearch) method to clear the highlights. ```html @@ -345,7 +344,7 @@ constructor() { } ``` -- For the search navigation buttons, we have added two ripple styled buttons with material icons. The handlers for the click events remain the same - invoking the `FindNext`/`FindPrev` methods. +- For the search navigation buttons, we have added two 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findNext)/[`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findPrev) methods. ```html
@@ -389,10 +388,10 @@ In this article we implemented our own search bar for the [`IgcTreeGridComponent [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) methods: -- `FindNext` -- `FindPrev` -- `ClearSearch` -- `RefreshSearch` +- [`findNext`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findNext) +- [`findPrev`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#findPrev) +- [`clearSearch`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#clearSearch) +- [`refreshSearch`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#refreshSearch) [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) properties: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-selection.md index 2ea7a089d..816514ef3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-selection.md @@ -18,7 +18,7 @@ With the Ignite UI for Web Components Select feature in Web Components Tree Grid - Cell selection - Column selection -With the `RowSelection` property, you can specify: +With the [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowSelection) property, you can specify: - None - Single @@ -65,12 +65,11 @@ export class EmployeesFlatData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Tree Grid Selection Options ### Web Components Tree Grid Row Selection -Property `RowSelection` enables you to specify the following options: +Property [`rowSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowSelection) enables you to specify the following options: - `None` - Row selection would be disabled for the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). - `Single` - Selection of only one row within the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) would be available. @@ -86,7 +85,7 @@ Property `RowSelection` enables you to specify the following options: ### Web Components Tree Grid Cell Selection -Property `CellSelection` enables you to specify the following options: +Property [`cellSelection`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#cellSelection) enables you to specify the following options: - `None` - Cell selection would be disabled for the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). - `Single` - Selection of only one cell within the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) would be available. @@ -116,7 +115,7 @@ This leads to the following three variations: ## Known Issues and Limitations -When the grid has no `PrimaryKey` set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +When the grid has no [`primaryKey`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#primaryKey) set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: - Row Selection - Row Expand/collapse diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-size.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-size.md index 85442d40f..97ec35826 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-size.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-size.md @@ -64,7 +64,6 @@ export class EmployeesFlatDetails extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Usage As you can see in the demo above, the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) provides three size options: **small**, **medium** and **large**. The code snippet below shows how to set `--ig-size` either inline or part of a CSS class: @@ -80,11 +79,11 @@ As you can see in the demo above, the [`IgcTreeGridComponent`](https://www.infra ``` -And now let's see in details how each option reflects on the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component. When you switch between different size options the height of each [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width), please consider the fact that it must be bigger than the sum of left and right padding: +And now let's see in details how each option reflects on the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) component. When you switch between different size options the height of each [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) element and the corresponding paddings will be changed. Also if you want to apply custom column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width), please consider the fact that it must be bigger than the sum of left and right padding: -- **large** - this is the default [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) is `80px`; -- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) is `64px`; -- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) is `56px`; +- **large** - this is the default [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) is `80px`; +- **medium** - this is the middle intense size with `40px` row height. Left and Right paddings are `16px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) is `64px`; +- **small** - this is the size with highest intense and `32px` row height. Left and Right paddings are `12px`; Minimal column [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) is `56px`; > [!Note] > Please keep in mind that currently you **can not** override any of the sizes. @@ -193,16 +192,14 @@ public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptio } ``` -Another option that [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) provides for you, in order to be able to change the height of the rows in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), is the property `RowHeight`. So let's see in action how this property affects the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) layout along with the `--ig-size`. +Another option that [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) provides for you, in order to be able to change the height of the rows in the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), is the property [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowHeight). So let's see in action how this property affects the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) layout along with the `--ig-size`. Please keep in mind the following: -- `--ig-size` CSS variable will have no impact on row height **if there is `RowHeight` specified**. +- `--ig-size` CSS variable will have no impact on row height **if there is [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowHeight) specified**. - `--ig-size` will **affect all of the rest elements in the Tree Grid**, as it has been described above. -We can now extend our sample and add `RowHeight` property to the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html): - - +We can now extend our sample and add [`rowHeight`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#rowHeight) property to the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html): ```html diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-sizing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-sizing.md index d5da04986..14f1d7829 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-sizing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-sizing.md @@ -12,23 +12,23 @@ _premium: true # Web Components Tree Grid Sizing -The Ignite UI for Web Components Sizing feature in Web Components Tree Grid is an important aspect of creating responsive and user-friendly grid interfaces. The Web Components Tree Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) and `Height` of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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. +The Ignite UI for Web Components Sizing feature in Web Components Tree Grid is an important aspect of creating responsive and user-friendly grid interfaces. The Web Components Tree Grid Sizing feature enables users to adjust the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height) of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), they are taken into its width/height size calculations or also known as [Border box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) sizing. It is applied in all scenarios. > [!Note] > If the Border box sizing is overridden by the user we cannot guarantee that the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) will size correctly. ## Web Components Tree Grid Width -If the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) input does not have value assigned, its default value is `100%` and the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. +If the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) input does not have value assigned, its default value is `100%` and the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) tries to fill the available space. You can check how the grid reacts to it in the `Percentages` section. > [!Note] -> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) style of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) itself will result in an unexpected behavior. +> Setting manually the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) style of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) itself will result in an unexpected behavior. ### Null -The grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#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. +The grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. +- If there are 6 columns and none of them has width defined, the grid will have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) of `816px`, because each column by default have assigned [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) of `136px` in this scenario. Same will happen if the columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) in percentages. If vertical scrollbar is rendered or there are features that render additional columns their width will be added also. columns-default-gridWidth-null-v2 @@ -49,9 +49,9 @@ The grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-compone ### Pixels -When the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) has its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) input is set to pixels it will set the whole grid size to that value and it will be static. It will not react to any browser resizing or changes in the DOM, although this is not the case for the grid content: -- When width is set in pixels in order for the grid to render horizontal scrollbar, its content width needs to exceed the specified grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width). Let's, for example, have the combined width of the columns exceed `1200px`. In this case a horizontal scrollbar will be rendered. +- 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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#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-v2 @@ -62,9 +62,9 @@ When the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-u ### Percentages -When the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) will size relative to the browser window. +When the [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) will size relative to the browser window. -- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#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. +- For example, if we set the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#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-100p-v2 @@ -72,7 +72,7 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-web-component width-percent-parent-100p-v2 -- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. +- If we have a parent element with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) of `1000px` and have the grid's [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) set to `150%`, the calculated grid width will be `1500px`. In this case the grid will still render fully visible but if we set `overflow: auto` of the parent, that parent will render scrollbar on its own. width-percent-150p-parent-noscroll-v2 width-percent-150p-parent-scroll-v2 @@ -82,11 +82,11 @@ When the [`width`](https://www.infragistics.com/products/ignite-ui-web-component By default if no height is defined for the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), it will be set to `100%`. You can check how the grid reacts depending on the DOM structure in the `Percentages` section. > [!Note] -> Setting manually the `Height` style of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) itself will result in an unexpected behavior. +> Setting manually the [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height) style of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) itself will result in an unexpected behavior. ### Null -The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height) input can accept `null` value, which when set, displays all rows with no scrollbar no matter how many they are. In this case, there is no vertical virtualization since the grid renders all rows anyway. - If we have data with 14 rows in this case the grid will render all 14 of them and size the grid so all are visible without any empty space inside the grid. @@ -96,7 +96,7 @@ The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web height-null-24rows-v2 -- If there is a parent element with defined `Height`, the grid will still render all rows and not be affected. Let's say the parent has `Height` of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: +- If there is a parent element with defined [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height), the grid will still render all rows and not be affected. Let's say the parent has [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height) of `650px`. If it has `overflow` set to `auto` or `scroll`, it will render a vertical scrollbar but the grid will still be unaffected: height-null-24rows-parent-noscroll-v2 height-null-24rows-parent-scroll-v2 @@ -106,28 +106,28 @@ The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web ### Pixels -Setting the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) `Height` in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) is set in pixels. +Setting the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height) in pixels is more straightforward since the grid will size to that specific size in all occasions similarly to how [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#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-4rows-v2 -- If the number of rows exceeds the visible area of the grid when `Height` is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: +- If the number of rows exceeds the visible area of the grid when [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height) is set to pixels a vertical scrollbar will be rendered. For example, a grid with `500px` height set and 14 rows will be rendered the following way: height-500px-14rows-v2 -- If there is a parent element with `Height` defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. +- If there is a parent element with [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height) defined, unless it has `overflow` set to `auto` or `scroll`, the grid will still be fully visible. Otherwise it will render a scrollbar. height-700px-14rows-parent-noscroll-v2 height-700px-14rows-parent-scroll-v2 ### Percentages -When the `Height` input is set to percentages, the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height) input is set to percentages, the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) will size based on the parent element height. If the parent element has its [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) set to `1200px` and the parent element not having any size applied to it: +Let's have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#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. @@ -141,7 +141,7 @@ Let's have [`width`](https://www.infragistics.com/products/ignite-ui-web-compone height-percent-100-parent-800px-v2 -- If the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height) is set to a number bigger than `100%` and the parent element has height, for the parent to render scrollbar it again needs to have `overflow` set to `auto` or `scroll`. Otherwise the grid will be fully visibly and size relative to the parent size. height-percent-130p-parent-noscroll-v2 height-percent-130p-parent-scroll-v2 @@ -160,7 +160,7 @@ By default when a column doesn't have a specified width it will try to autosize, 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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) and the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) and the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) set to `null`, it will be sized to the minimum of `136px`. This means that for a grid with [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) `null` and 6 columns that don't have width, each column will be sized to `136px`. columns-default-gridWidth-null-v2 @@ -168,15 +168,15 @@ When the grid is resized in these scenarios, the column width is also updated to columns-default-all-row-selectors-v2 -- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) set to `1000px`. +- If there is available empty space, so that each autosized column will be less than `136px`, all autosized columns will default to `136px` and the grid will render horizontal scrollbar. In the next example let's have 12 autosized columns and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) set to `1000px`. columns-default-all-min-136px-v2 -- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) of `100px`, the first will fill the rest. +- If a column does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) specified, but all other columns have either [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) in pixels or percentages, that column will try to also fill the available space. For example, if we don't have width set to the first column and all other 5 have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) of `100px`, the first will fill the rest. columns-default-first-rest-100px-v2 -- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) set to `100px`. +- Same applies if multiple columns does not have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) specified, all will divide the available space between each other equally. In the next illustration the first column has [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) set to `100px`. columns-default-all-first-100px-v2 @@ -185,19 +185,19 @@ When the grid is resized in these scenarios, the column width is also updated to ### Pixels -When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) of the columns is static, it can be less than the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) or exceed it. +When columns have set specific [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) in pixels, they stick to that size, unless they are resized manually. Since the combined [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) of the columns is static, it can be less than the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) or exceed it. -- If the combined `width` of all columns is less than the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). In the next example the columns have `150px` width. +- If the combined `width` of all columns is less than the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). In the next example the columns have `150px` width. columns-150px-empty-area-v2 -- If the combined [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) of all columns is bigger than the actual [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) of all columns is bigger than the actual [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width), a horizontal scrollbar will be rendered. In the next example each of the 6 columns have width of `300px` and grid has width of `1200px`, which means that the columns combined have excess of `600px` that goes out of bounds. columns-150px-extra-area-v2 ### Percentages -When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. +When columns have set [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) in percentages, their size is calculated relatively to the grid size. It is similar to how width in pixels works, but provides also responsiveness to the columns which means that when the grid is resized, the columns also will resize accordingly. - If the combined width of all columns is less than `100%`, similarly to when in pixels, there could be an empty area of the grid that the columns do not cover. @@ -211,7 +211,7 @@ When columns have set [`width`](https://www.infragistics.com/products/ignite-ui- columns-percent-bigger-100p-v2 -- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) set to `50%`: +- If columns are set in percentages and the grid [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) is set to `null`, it would apply [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) of `136px` to each column. That is because the columns cannot be sized relatively to the grid, since it doesn't have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) itself and relies on its content to be sized when its [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) is `null`. In the following example all 6 columns have [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) set to `50%`: columns-percent-gridWidth-null-v2 diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-sorting.md index 0b7ad2184..722346654 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-sorting.md @@ -55,7 +55,6 @@ export class OrdersTreeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - This is done via the [`sortable`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortable) input. With the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) sorting, you can also set the [`sortingIgnoreCase`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortingIgnoreCase) property to perform case sensitive sorting: ```html @@ -106,10 +105,9 @@ export class OrdersTreeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Sorting through the API -You can sort any column or a combination of columns through the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) API using the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) `Sort` method: +You can sort any column or a combination of columns through the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) API using the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) [`sort`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#sort) method: ```typescript import { SortingDirection } from 'igniteui-webcomponents-grids'; @@ -134,7 +132,7 @@ this.treeGrid.sort([ > [!Note] > Sorting is performed using our `DefaultSortingStrategy` algorithm. Any [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html) or `ISortingExpression` can use a custom implementation of the `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` method: +As with the filtering behavior, you can clear the sorting state by using the [`clearSort`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#clearSort) method: @@ -149,14 +147,14 @@ this.treeGrid.clearSort(); > [!Note] -> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortStrategy) of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortStrategy) of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html), since they work in different scopes and expose different parameters. +> The [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#sortStrategy) of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) is of different type compared to the [`sortStrategy`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#sortStrategy) of the [`IgcColumnComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html), since they work in different scopes and expose different parameters. > [!Note] > The sorting operation **DOES NOT** change the underlying data source of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). ## Initial Sorting State -It is possible to set the initial sorting state of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) by passing an array of sorting expressions to the `SortingExpressions` property of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). +It is possible to set the initial sorting state of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) by passing an array of sorting expressions to the [`sortingExpressions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#sortingExpressions) property of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html). ```typescript public connectedCallback() { @@ -176,7 +174,7 @@ public connectedCallback() { The sorting indicator icon in the column header can be customized using a template. The following properties are available for templating the sorting indicator for any sorting state (ascending, descending, none): -- `SortHeaderIconTemplate` – re-templates the sorting icon when no sorting is applied. +- [`sortHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#sortHeaderIconTemplate) – re-templates the sorting icon when no sorting is applied. ```ts constructor() { @@ -190,7 +188,7 @@ public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => { } ``` -- `SortAscendingHeaderIconTemplate` – re-templates the sorting icon when the column is sorted in ascending order. +- [`sortAscendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#sortAscendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in ascending order. ```ts constructor() { @@ -204,7 +202,7 @@ public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => } ``` -- `SortDescendingHeaderIconTemplate` – re-templates the sorting icon when the column is sorted in descending order. +- [`sortDescendingHeaderIconTemplate`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#sortDescendingHeaderIconTemplate) – re-templates the sorting icon when the column is sorted in descending order. ```ts constructor() { @@ -282,7 +280,6 @@ export class OrdersTreeData extends Array { } ``` - ## API References - [`IgcSortingExpression`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcsortingexpression.html) diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-state-persistence.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-state-persistence.md index b785da000..587f3ed36 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-state-persistence.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-state-persistence.md @@ -13,11 +13,11 @@ _premium: true # Web Components Tree Grid State Persistence -The Ignite UI for Web Components State Persistence in Web Components Tree Grid allows developers to easily save and restore the grid state. When the [`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) is applied on the Web Components [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState), [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString), [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState) and [`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) methods that developers can use to achieve state persistence in any scenario. +The Ignite UI for Web Components State Persistence in Web Components Tree Grid allows developers to easily save and restore the grid state. When the [`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) is applied on the Web Components [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html), it exposes the [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState), [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString), [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState) and [`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) methods that developers can use to achieve state persistence in any scenario. ## Supported Features -[`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) supports saving and restoring the state of the following features: +[`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) supports saving and restoring the state of the following features: @@ -42,9 +42,9 @@ The Ignite UI for Web Components State Persistence in Web Components Tree Grid a ## Usage -The [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState) method returns the grid state in a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object, containing all the state info. Additional steps may be required in order to save it. +The [`getState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState) method returns the grid state in a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object, containing all the state info. Additional steps may be required in order to save it. -The [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) returns a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). +The [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) returns a serialized JSON string, so developers can just take it and save it on any data storage (database, cloud, browser localStorage, etc). The developer may choose to get only the state for a certain feature/features, by passing in an array with feature names as an argument. Empty array will result to using the default state options. @@ -73,9 +73,9 @@ const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', -[`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState) - The method accepts a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object as argument and will restore the state of each feature found in the object or specified features as second argument. +[`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState) - The method accepts a [`IgcGridStateInfo`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateinfo.html) object as argument and will restore the state of each feature found in the object or specified features as second argument. -[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) - The method accepts a serialized JSON string as argument and will restore the state of each feature found in the JSON string or specified features as second argument. +[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) - The method accepts a serialized JSON string as argument and will restore the state of each feature found in the JSON string or specified features as second argument. ```typescript gridState.applyState(gridState); @@ -83,7 +83,7 @@ gridState.applyStateFromString(gridStateString); gridState.applyState(sortingFilteringStates) ``` -The [`options`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatebasedirective.html#options) object implements the [`IgcGridStateOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateoptions.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getState)/[`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) methods will not put the state of these features in the returned value and [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyState)/[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#applyStateFromString) methods will not restore state for them. +The [`options`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatebasedirective.html#options) object implements the [`IgcGridStateOptions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstateoptions.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getState)/[`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) methods will not put the state of these features in the returned value and [`applyState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyState)/[`applyStateFromString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#applyStateFromString) methods will not restore state for them. ```typescript gridState.options = { cellSelection: false, sorting: false }; @@ -203,12 +203,11 @@ export class EmployeesNestedTreeData extends Array } ``` - ## Limitations -- [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html#getStateAsString) method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the [`IgcGridStateComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstatecomponent.html) component will ignore the columns [`formatter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#formatter), [`filters`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotconfiguration.html#filters), `Summaries`, `SortStrategy`, `CellClasses`, `CellStyles`, `HeaderTemplate` and `BodyTemplate` properties. +- [`getStateAsString`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html#getStateAsString) method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the [`IgcGridState`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridstate.html) component will ignore the columns [`formatter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotvalue.html#formatter), [`filters`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcpivotconfiguration.html#filters), `Summaries`, `SortStrategy`, `CellClasses`, `CellStyles`, `HeaderTemplate` and `BodyTemplate` properties. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-summaries.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-summaries.md index f43f0885c..04f7ca590 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-summaries.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-summaries.md @@ -55,7 +55,6 @@ export class OrdersTreeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - > [!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** @@ -309,7 +308,6 @@ export class EmployeesFlatData extends Array { } ``` - @@ -419,7 +417,6 @@ export class EmployeesNestedTreeData extends Array } ``` - ## Disabled Summaries The `disabled-summaries` property provides precise per-column control over the Web Components Tree Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgcTreeGrid, 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. @@ -573,7 +570,6 @@ igc-dialog::part(title) { } ``` - ## 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) and column [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#pipeArgs). When using custom operands, the [`locale`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridbasedirective.html#locale) and [`pipeArgs`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#summaryFormatter) property. @@ -638,7 +634,6 @@ export class OrdersTreeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Child Summaries @@ -699,7 +694,6 @@ export class OrdersTreeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Keyboard Navigation @@ -786,7 +780,6 @@ export class OrdersTreeData extends Array { } ``` - ## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-toolbar.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-toolbar.md index f7695c8f4..421d3ea1b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-toolbar.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-toolbar.md @@ -70,10 +70,9 @@ export class EmployeesFlatAvatars extends Array { } ``` - -The predefined [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) and [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html) UI components are added inside the [`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: +The predefined [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) and [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html) UI components are added inside the [`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) and this is all needed to have a toolbar providing default interactions with the corresponding Grid features: @@ -94,7 +93,7 @@ The predefined [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/p > [!Note] -> As seen in the code snippet above, the predefined `Actions` UI components are wrapped in the [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar. +> As seen in the code snippet above, the predefined `Actions` UI components are wrapped in the [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) container. 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: @@ -168,12 +167,11 @@ export class EmployeesFlatAvatars extends Array { } ``` - ### Title -Setting a title for the toolbar in your grid is achieved by using the [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html). +Setting a title for the toolbar in your grid is achieved by using the [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html). Users can provide anything from simple text to more involved templates. @@ -189,7 +187,7 @@ Users can provide anything from simple text to more involved templates. ### Actions -The [`IgcGridToolbarActionsComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractionscomponent.html) is where users can place actions/interactions in relation to the parent grid. +The [`IgcGridToolbarActions`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaractions.html) is 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. @@ -207,7 +205,7 @@ toolbar interaction components. ### Column Pinning -The [`IgcGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinningcomponent.html) component provides the default UI for interacting with column pinning in the grid. +The [`IgcGridToolbarPinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinning.html) component 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. @@ -229,7 +227,7 @@ The component is setup to work out of the box with the parent grid containing th ### Column Hiding -The [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component +The [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself. @@ -266,7 +264,7 @@ Toolbar Advanced Filtering component provides the default UI for the Advanced Fi ### Data Exporting -As with the rest of the toolbar actions, exporting is provided through a [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) out of the box. +As with the rest of the toolbar actions, exporting is provided through a [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) out of the box. The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience. @@ -368,12 +366,11 @@ export class EmployeesFlatAvatars extends Array { } ``` - ## 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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html#showProgress) property and use for their own long running operations or just as another way to signify an action taking place in the grid. +Moreover, users can set the toolbar [`showProgress`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html#showProgress) property and use for their own long running operations or just as another way to signify an action taking place in the grid. The sample belows uses has significant amount of data, in order to increase the time needed for data export so the progressbar can be seen. Additionally it has another button that simulates a long running operation in the grid: @@ -450,7 +447,6 @@ export class OrdersTreeData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Custom Content If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable. @@ -521,7 +517,6 @@ export class EmployeesFlatAvatars extends Array { } ``` - ## Styling In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). @@ -593,17 +588,16 @@ export class EmployeesFlatAvatars extends Array { } ``` - ## API References The Grid Toolbar service has a few more APIs to explore, which are listed below. - [`IgcGridToolbarAdvancedFiltering`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbaradvancedfiltering.html) -- [`IgcGridToolbarComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarcomponent.html) -- [`IgcGridToolbarExporterComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexportercomponent.html) -- [`IgcGridToolbarHidingComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhidingcomponent.html) -- [`IgcGridToolbarPinningComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinningcomponent.html) -- [`IgcGridToolbarTitleComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitlecomponent.html) +- [`IgcGridToolbar`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbar.html) +- [`IgcGridToolbarExporter`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarexporter.html) +- [`IgcGridToolbarHiding`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarhiding.html) +- [`IgcGridToolbarPinning`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbarpinning.html) +- [`IgcGridToolbarTitle`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igcgridtoolbartitle.html) [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) Events: diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-virtualization.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-virtualization.md index bad75d927..32e80cd90 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-virtualization.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree-grid-virtualization.md @@ -17,14 +17,14 @@ In Ignite UI for Web Components, the [`IgcTreeGridComponent`](https://www.infrag ## Enabling Virtualization -The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) 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. The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) and `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. +The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html) 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. The [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) and [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) and/or `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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igccolumncomponent.html#width) is `null` and rows if `Height` is `null`). +However, it is also possible to explicitly set the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s [`width`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) and/or [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#width) is `null` and rows if [`height`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#height) is `null`). The size of the data chunks is determined by: -- The row height for the vertical (row) virtualization. This is determined by the `RowHeight` 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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s [`IgcColumnWidth`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids.igccolumnwidth.html) 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`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.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 [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'s [`columnWidth`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html#columnWidth) option, which will be applied to all columns that don't have explicit width set. In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the [`IgcTreeGridComponent`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_grids_grids.igctreegridcomponent.html)'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. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree.md index 6da7ca726..51e14bede 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/tree.md @@ -31,7 +31,6 @@ igc-tree { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## How to Use Ignite UI for Web Components Tree With Ignite UI @@ -629,7 +628,6 @@ igc-tree { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - After the user clicks the expand icon, it is replaced by a loading indicator. When the loading property resolves to false, the loading indicator disappears and the children are loaded. You can provide a custom slot content for the loading area using the `loadingIndicator` slot. If such slot is not defined, the [`IgcCircularProgressComponent`](https://www.infragistics.com/products/ignite-ui-web-components/docs/typescript/latest/classes/igccircularprogresscomponent.html) is used. @@ -1079,7 +1077,6 @@ igc-tree { } ``` -
## API References diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/treemap-chart.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/treemap-chart.md index ef91acd48..6b9a8fba4 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/treemap-chart.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/treemap-chart.md @@ -50,7 +50,6 @@ export class CountyHierarchicalData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Treemap Recommendations @@ -127,7 +126,6 @@ export class CountyHierarchicalData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
### Layout Types @@ -189,7 +187,6 @@ export class CountyHierarchicalData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ### Web Components Treemap Highlighting In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set [`highlightingMode`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctreemapcomponent.html#highlightingMode)to Brighten or FadeOthers. @@ -227,7 +224,6 @@ export class CountyHierarchicalData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` - ## Web Components Treemap Percent based highlighting - [`highlightedDataSource`](https://www.infragistics.com/products/ignite-ui-web-components/api/docs/typescript/latest/classes/igniteui_webcomponents_charts.igctreemapcomponent.html#highlightedDataSource): Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property. @@ -273,7 +269,6 @@ export class CountryTopUrbanPopData extends Array { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Additional Resources diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/xdate-picker.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/xdate-picker.md deleted file mode 100644 index 8fe86a71d..000000000 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/xdate-picker.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Web Components XDate Picker | Data Visualization Tools | Infragistics -_description: Infragistics' Web Components xdate picker component helps your users select dates. Improve your graphs and visualization with Ignite UI for Web Components! -_keywords: Web Components xdate picker, drop down, Ignite UI for Web Components, Infragistics -mentionedTypes: ["XDatePicker"] -_tocName: XDate Picker -_premium: true ---- - -# Web Components XDate Picker Overview - -The XDate Picker component allows users to use a drop-down calendar UI allowing the intuitive selection of a day, month and year. This can be helpful when an application user needs to select specific dates, and multiple editors can be combined to create a date-range UI. - -> [!WARNING] -> The `XDatePicker` component is deprecated from version 5.0.0 of Ignite UI for Web Components. For the latest supported Ignite UI for Web Components Date Picker component refer to its respective page under "Scheduling". - -## Web Components XDate Picker Example - -This sample demonstrates how to create `XDatePicker` with option to select a single date. - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -## Dependencies - -When installing the XDate Picker component, the core and inputs packages must also be installed. - -```cmd -npm install --save igniteui-webcomponents-core -npm install --save igniteui-webcomponents-inputs -npm install --save igniteui-webcomponents-layouts -``` - -## Component Modules - -The XDate Picker component requires the following modules to be registered: - -```ts -import { IgcXDatePickerModule } from 'igniteui-webcomponents-inputs'; -import { ModuleManager } from 'igniteui-webcomponents-core'; - -ModuleManager.register(IgcXDatePickerModule); -``` - -
- -## Usage - -The Web Components XDate Picker editor component consists of three default parts - the text area, a calendar drop-down button, and a clear button. These areas are described below: - -- Text Area: This displays the selected date, stored in the `Value` property of the editor. - -- Calendar: Clicking the calendar button will open the calendar drop-down of the XDate Picker. The calendar will open to show the month of the currently selected `Value`, if there is one. If a `Value` is not specified, the calendar will show the month corresponding to the current date. The month at the top can be clicked to show a list of months, and the same applies for the year. There are also arrow buttons to the left and right of the month and year visualization that will increment and decrement the shown month chronologically. - -- Clear Button: The 'x' icon will clear the current value. - -| Property | Type | Description | -| ---------|------|------------ | -| `IconColor` | string | Changes the color of the calendar button. | -| `AllowTextInput` | bool | The **xdate** picker's value can be typed-in and modified by toggling this property to true. | -| `DateFormat` | enum | Defaults to DateShort e.g. 'mm/dd/yyyy'. When set to DateLong, the date displayed in the editor will appear as e.g. Wednesday, April 14, 2021. | -| `FirstDayOfWeek` | enum | Defaults to Sunday. A given day of the week will be used as the first day in each weekly row of the calendar, e.g. Monday through Sunday. | -| `FormatString` | string | When DateShort is used, the date's format can be configured e.g. 'dd/mm/yyyy'. Note, if the `DateFormat`'s DateLong and `FormatString` are set then the `DateFormat` is ignored. | -| `Label` | string | Displays custom text above the date in the top-left corner of the XDate Picker. | -| `MinDate` | DateTime | Restricts earlier dates from being selected or viewed. | -| `MaxDate` | DateTime | Restricts later dates from being selected or viewed. | -| `Placeholder` | string | A custom string to be displayed when the value within the edit portion of the calendar is cleared. | -| `ShowClearButton` | bool | Defaults to true, the clear button is directly to the left of the calendar button, visualized by an X. When clicked, it will clear the `Value` of the XDate Picker. The clear button's visibility can be toggled on and off. | -| `ShowTodayButton`| bool | The today is directly below the dates when the calendar is opened. When clicked, it will select the current date. The today button's visibility can be toggled on and off. | -| `ShowWeekNumbers` | bool | Week numbers can be displayed as a number, at the left of every row of dates, in the drop down portion of the XDate Picker. The week number's visibility can be toggled on and off. | -| `FirstWeekOfYear` | enum | Configures the start of the week numbers for the entire year. Can be set to FirstDay, FirstFourDayWeek, FirstFullWeek. | -| `OpenOnFocus` | bool | By default, the dropdown portion of the XDate Picker is opened on single click, forcing the user to click the calendar button to drop down the calendar. | -| `Value` | date | Sets the value of the XDate Picker and selects it in the dropdown calendar. | - -Users can also customize the XDate Picker's font by using the various text properties of the control. They are: `TextColor`, `TextFontFamily`, `TextFontSize`, `TextFontStyle`, and `TextFontWeight`. - -### Editing - -The following example demonstrates how to enable editing in the `XDatePicker`. - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -### Date Limits - -The following example demonstrates how to restrict selected dates in the `XDatePicker`. - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -### Date Formats - -The following example demonstrates how apply a long date in the `XDatePicker`. - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -### Date Ranges - -The following example demonstrates how combine multiple `XDatePicker` controls. - -```css -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -``` - - -
- -## API References - -The following is a list of API members mentioned in the above sections: - -- `XDatePicker` -- `IconColor` -- `AllowTextInput` -- `DateFormat` -- `FirstDayOfWeek` -- `FormatString` -- `Label` -- `MinDate` -- `MaxDate` -- `Placeholder` -- `ShowClearButton` -- `ShowTodayButton` -- `ShowWeekNumbers` -- `FirstWeekOfYear` -- `OpenOnFocus` -- `Value` -- `TextColor` -- `TextFontFamily` -- `TextFontSize` -- `TextFontStyle` -- `TextFontWeight` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/zoomslider-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/zoomslider-overview.md index 7c501f88d..cb727ada7 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/zoomslider-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/zoomslider-overview.md @@ -408,7 +408,6 @@ class Country { /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ ``` -
## Usage diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-angular-docs.ts b/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-angular-docs.ts index 20cf08eb1..43113d5cb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-angular-docs.ts +++ b/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-angular-docs.ts @@ -275,9 +275,9 @@ function main() { let content: string; if (gridDoc) { - content = gridDoc.content; + content = gridDoc.content.replace(/\r\n/g, "\n"); // Remove leading comments - content = content.replace(/^(?:\r?\n)*/, ""); + content = content.replace(/^\n*/, ""); // Remove blank lines before non-empty lines (same as gulp pipeline) content = content.replace(/^\s*\n(?=\S)/gm, ""); } else { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-blazor-docs.ts b/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-blazor-docs.ts index d3623ad87..e361e54e9 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-blazor-docs.ts +++ b/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-blazor-docs.ts @@ -93,6 +93,10 @@ function flattenPath(href: string): string { return `${componentDir}-${fileName}`; } + if (parts.length >= 2 && parts[0] === "grid-lite") { + return `grid-lite-${fileName}`; + } + return fileName; } diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-react-docs.ts b/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-react-docs.ts index 2291d77f4..e8aa273e3 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-react-docs.ts +++ b/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-react-docs.ts @@ -100,6 +100,10 @@ function flattenPath(href: string): string { return `${componentDir}-${fileName}`; } + if (parts.length >= 2 && parts[0] === "grid-lite") { + return `grid-lite-${fileName}`; + } + // For other nested paths (charts/types/area-chart.md, etc.) just use the filename // since it's already descriptive return fileName; diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-wc-docs.ts b/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-wc-docs.ts index 9d3f7644d..89ca3ccfb 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-wc-docs.ts +++ b/packages/igniteui-mcp/igniteui-doc-mcp/scripts/export-wc-docs.ts @@ -93,6 +93,10 @@ function flattenPath(href: string): string { return `${componentDir}-${fileName}`; } + if (parts.length >= 2 && parts[0] === "grid-lite") { + return `grid-lite-${fileName}`; + } + return fileName; }