From 48b1b45206b116b59503bdf7abcfe458446961df Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Tue, 28 Apr 2026 13:46:15 +0300 Subject: [PATCH 01/19] feat(skills): add skills for Ignite UI for Blazor --- skills/igniteui-blazor-components/SKILL.md | 116 ++++++ .../references/charts.md | 284 ++++++++++++++ .../references/data-display.md | 351 +++++++++++++++++ .../references/feedback.md | 179 +++++++++ .../references/form-controls.md | 362 +++++++++++++++++ .../references/layout-manager.md | 181 +++++++++ .../references/layout.md | 309 +++++++++++++++ .../references/mcp-setup.md | 78 ++++ .../references/setup.md | 196 +++++++++ skills/igniteui-blazor-grids/SKILL.md | 154 ++++++++ .../references/data-operations.md | 162 ++++++++ .../references/editing.md | 170 ++++++++ .../references/features.md | 371 ++++++++++++++++++ .../references/mcp-setup.md | 78 ++++ .../references/paging-remote.md | 179 +++++++++ .../references/sizing.md | 145 +++++++ .../igniteui-blazor-grids/references/state.md | 143 +++++++ .../references/structure.md | 183 +++++++++ .../igniteui-blazor-grids/references/types.md | 227 +++++++++++ skills/igniteui-blazor-theming/SKILL.md | 129 ++++++ .../references/common-patterns.md | 226 +++++++++++ .../references/mcp-setup.md | 78 ++++ .../references/mcp-usage.md | 228 +++++++++++ 23 files changed, 4529 insertions(+) create mode 100644 skills/igniteui-blazor-components/SKILL.md create mode 100644 skills/igniteui-blazor-components/references/charts.md create mode 100644 skills/igniteui-blazor-components/references/data-display.md create mode 100644 skills/igniteui-blazor-components/references/feedback.md create mode 100644 skills/igniteui-blazor-components/references/form-controls.md create mode 100644 skills/igniteui-blazor-components/references/layout-manager.md create mode 100644 skills/igniteui-blazor-components/references/layout.md create mode 100644 skills/igniteui-blazor-components/references/mcp-setup.md create mode 100644 skills/igniteui-blazor-components/references/setup.md create mode 100644 skills/igniteui-blazor-grids/SKILL.md create mode 100644 skills/igniteui-blazor-grids/references/data-operations.md create mode 100644 skills/igniteui-blazor-grids/references/editing.md create mode 100644 skills/igniteui-blazor-grids/references/features.md create mode 100644 skills/igniteui-blazor-grids/references/mcp-setup.md create mode 100644 skills/igniteui-blazor-grids/references/paging-remote.md create mode 100644 skills/igniteui-blazor-grids/references/sizing.md create mode 100644 skills/igniteui-blazor-grids/references/state.md create mode 100644 skills/igniteui-blazor-grids/references/structure.md create mode 100644 skills/igniteui-blazor-grids/references/types.md create mode 100644 skills/igniteui-blazor-theming/SKILL.md create mode 100644 skills/igniteui-blazor-theming/references/common-patterns.md create mode 100644 skills/igniteui-blazor-theming/references/mcp-setup.md create mode 100644 skills/igniteui-blazor-theming/references/mcp-usage.md diff --git a/skills/igniteui-blazor-components/SKILL.md b/skills/igniteui-blazor-components/SKILL.md new file mode 100644 index 0000000..c33eef2 --- /dev/null +++ b/skills/igniteui-blazor-components/SKILL.md @@ -0,0 +1,116 @@ +--- +name: igniteui-blazor-components +description: "Covers non-grid Ignite UI for Blazor UI components: application setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider, rating), layout containers (tabs, stepper, accordion, expansion panel, navigation drawer, navbar, tree), data-display components (list, card, carousel, avatar, badge, chip, icon, progress indicators, dropdown, tooltip), feedback overlays (dialog, snackbar, toast, banner), layout managers (Dock Manager, Tile Manager), and visualizations (Category Chart, Data Chart, Financial/Stock Chart, Pie/Donut Chart, Sparkline, Treemap, Geographic Map, Gauges, Dashboard Tile). Use when users ask about any Ignite UI Blazor component that is NOT a data grid. Do NOT use for data grids, tables, or tabular data - use igniteui-blazor-grids instead. Do NOT use for theming or styling - use igniteui-blazor-theming instead." +user-invocable: true +--- + +# Ignite UI for Blazor - UI Components + +## Prerequisites + +- .NET 6+ Blazor project (Server, WebAssembly, Web App, or MAUI Blazor Hybrid) +- `IgniteUI.Blazor` NuGet package installed (trial) **or** the licensed package from the Infragistics private NuGet feed; for OSS-only components use `IgniteUI.Blazor.Lite` instead +- `builder.Services.AddIgniteUIBlazor(...)` called in `Program.cs` +- `@using IgniteUI.Blazor.Controls` added to `_Imports.razor` +- A theme CSS file linked in the host page (see [`references/setup.md`](./references/setup.md)) +- The **Ignite UI CLI MCP server** (`igniteui-cli`) is available as a tool provider + +> **AGENT INSTRUCTION - MCP Server Setup (REQUIRED)** +> +> Before using any Ignite UI CLI MCP tools, you MUST verify the MCP server is available +> by calling `list_components(framework: "blazor")`. If the tool is not available or the call fails, +> you MUST automatically configure it by following the setup process steps described below. +> +> After writing the file, inform the user that the MCP server has been +> configured and they may need to reload the editor for the tools to activate. +> Start the MCP server and wait for that MCP server to start before continuing the component-related work. +> Do NOT skip this step or ask the user to do it manually. + +## Setting Up the Ignite UI CLI MCP Server + +> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/mcp-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification. + +## MANDATORY AGENT PROTOCOL - YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT + +**This file is a routing hub only. It contains no component examples and no component API details.** + +> **DO NOT write any component names, property names, event names, module registration calls, or Razor attributes from memory.** +> Component APIs change between versions. Anything generated without reading the reference files and Blazor MCP docs will be incorrect. + +You are **required** to complete ALL of the following steps before producing any component-related code or answer: + +**STEP 1 - Identify every component or feature involved.** +Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., a form inside a Dialog requires reading both `form-controls.md` AND `feedback.md`). + +**STEP 2 - Read every identified reference file in full (PARALLEL).** +Call `read_file` (or equivalent) on **all** reference files identified in Step 1 **in a single parallel batch**. Reference files map components to their MCP doc slugs and explain which MCP calls to make. + +**STEP 3 - Extract doc slugs, then call `get_doc` for each component involved.** +Use the Ignite UI MCP `get_doc` tool with `framework: "blazor"` and the exact doc slug listed in the reference files you just read. This is the primary source of truth for Blazor - it returns the actual registration pattern, Razor markup, property names, events, and CSS parts. Do NOT skip this step. + +If a reference file does not list a slug for the requested component, call `search_docs(framework: "blazor", query: "")` to find the correct doc. If no Blazor doc exists, say that the component or feature is not covered instead of guessing. + +**STEP 4 - Only then produce output.** +Base your code and explanation exclusively on what you read. If the reference files or MCP docs do not cover something, say so explicitly rather than guessing. + +### Task → Reference File + +| Task | Reference file to read | +|---|---| +| NuGet install, `Program.cs` registration, `_Imports.razor`, CSS/script references, project types (Server, WASM, Web App, MAUI) | [`references/setup.md`](./references/setup.md) | +| Input, Combo Box, Select, Date Picker, Date Range Picker, Calendar, Date Time Input, Mask Input, Checkbox, Radio / Radio Group, Switch, Slider / Range Slider, Rating, form/value binding | [`references/form-controls.md`](./references/form-controls.md) | +| Tabs, Stepper, Accordion, Expansion Panel, Navigation Drawer, Navbar, Tree | [`references/layout.md`](./references/layout.md) | +| List, Card, Carousel, Avatar, Badge, Chip, Icon, Icon Button, Button, Button Group, Circular Progress, Linear Progress, Dropdown, Tooltip, Ripple | [`references/data-display.md`](./references/data-display.md) | +| Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) | +| Dock Manager (panes, tabs, floating, serialization), Tile Manager | [`references/layout-manager.md`](./references/layout-manager.md) | +| Category Chart, Data Chart, Financial / Stock Chart, Pie Chart, Donut Chart, Sparkline, Treemap, Geographic Map, Gauges, Dashboard Tile, visualization features (animations, tooltips, markers, highlighting, zooming, legends, maps, ranges) | [`references/charts.md`](./references/charts.md) | + +> **When in doubt, read more rather than fewer reference files.** The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application. + +## Package Variants + +| Package | Source | Who uses it | +|---|---|---| +| `IgniteUI.Blazor` | NuGet.org | Trial users | +| `IgniteUI.Blazor` (licensed build) | Infragistics private NuGet feed (`https://packages.infragistics.com/nuget/licensed/`) | Licensed / enterprise users | +| `IgniteUI.Blazor.Lite` | NuGet.org | Open-source component users | +| `IgniteUI.Blazor.GridLite` | NuGet.org | Open-source Grid Lite users | + +`IgniteUI.Blazor` and the licensed `IgniteUI.Blazor` build expose the same API and module registration pattern. Do **not** mix `IgniteUI.Blazor` with `IgniteUI.Blazor.Lite` in the same project; the OSS Lite packages use the same namespaces and duplicate some components. + +## Key Blazor-Specific Notes + +> **AGENT INSTRUCTION - Module Registration** +> +> Every Ignite UI for Blazor component has a corresponding module. Always register the module(s) in `Program.cs`: +> +> ```csharp +> builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule), typeof(IgbDatePickerModule)); +> ``` +> +> Calling `builder.Services.AddIgniteUIBlazor()` with no arguments registers ALL modules (useful for prototypes but increases bundle size). Prefer explicit module registration in production. + +> **AGENT INSTRUCTION - `@ref` and `EnsureReady`** +> +> When accessing a component from C# code (e.g., to call `ShowAsync()` on a dialog), use `@ref`: +> +> ```razor +> +> +> @code { +> public IgbDialog DialogRef { get; set; } +> } +> ``` +> +> Some components (e.g., `IgbIcon`) require `await component.EnsureReady()` before calling async registration methods in `OnAfterRenderAsync(bool firstRender)`. + +> **AGENT INSTRUCTION - Forms** +> +> Several Ignite UI Blazor components such as `IgbCombo` and `IgbRadio` do **not** work with the standard HTML `
` element. Do not assume a universal form pattern. Check the component's MCP doc first, bind component values explicitly (`@bind-Value`, `@bind-Checked`, or documented change events), and only use form integration patterns shown by the current docs. + +--- + +## Related Skills + +- [`igniteui-blazor-grids`](../igniteui-blazor-grids/SKILL.md) - Data Grids (Grid, Tree Grid, Hierarchical Grid, Pivot Grid, Grid Lite) +- [`igniteui-blazor-theming`](../igniteui-blazor-theming/SKILL.md) - Theming & Styling diff --git a/skills/igniteui-blazor-components/references/charts.md b/skills/igniteui-blazor-components/references/charts.md new file mode 100644 index 0000000..08738a6 --- /dev/null +++ b/skills/igniteui-blazor-components/references/charts.md @@ -0,0 +1,284 @@ +# Charts & Data Visualization + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration, see [`setup.md`](./setup.md). + +## Contents + +- [Chart Type Decision Guide](#chart-type-decision-guide) +- [Category Chart](#category-chart) +- [Data Chart](#data-chart) +- [Financial / Stock Chart](#financial--stock-chart) +- [Pie Chart](#pie-chart) +- [Donut Chart](#donut-chart) +- [Sparkline](#sparkline) +- [Treemap](#treemap) +- [Geographic Map](#geographic-map) +- [Gauges](#gauges) +- [Dashboard Tile](#dashboard-tile) +- [Common Chart Features](#common-chart-features) +- [Key Rules](#key-rules) + +--- + +## Chart Type Decision Guide + +| Use case | Recommended component | +|---|---| +| Simple line/area/column/bar charts with minimal config | `IgbCategoryChart` | +| Multiple series types on the same chart, custom axes, annotations | `IgbDataChart` | +| Candlestick / OHLC financial data with range selector | `IgbFinancialChart` / stock chart docs | +| Part-to-whole proportions (slices) | `IgbPieChart` | +| Donut with center label | `IgbDoughnutChart` | +| Inline sparkline for tables or cards | `IgbSparkline` | +| Hierarchical part-to-whole data | Treemap docs | +| Geographic points, shapes, map markers | Geographic Map docs | +| KPI values, ranges, scales, bullet comparisons | Gauge docs | +| Auto-generated dashboard visualization from data | Dashboard Tile docs | + +--- + +## Category Chart + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCategoryChartModule)); +``` + +```razor + + +@code { + public List SalesData { get; set; } = SampleData.GetSales(); +} +``` + +Key attributes: `DataSource`, `ChartType` (`CategoryChartType.Line` / `Area` / `Column` / `Bar` / `Spline` / `SplineArea` / `StepLine` / `Auto`), `Height`, `Width`, `YAxisTitle`, `XAxisTitle`, `Brushes`, `Outlines`, `MarkerBrushes`, `IsTransitionInEnabled`, `IsHorizontalZoomEnabled`, `IsVerticalZoomEnabled`. + +> **AGENT INSTRUCTION:** `IgbCategoryChart` auto-detects numeric properties in `DataSource` objects and creates series for them. To control which properties are charted, use `IncludedProperties` or `ExcludedProperties` attributes. + +--- + +## Data Chart + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDataChartCoreModule), typeof(IgbDataChartCategoryModule)); +// Add additional modules for other series types: +// IgbDataChartScatterModule, IgbDataChartFinancialModule, etc. +``` + +```razor + + + + + + + + +@code { + public List ChartData { get; set; } = SampleData.GetMonthly(); +} +``` + +Common axis types: `IgbCategoryXAxis`, `IgbNumericXAxis`, `IgbNumericYAxis`, `IgbCategoryYAxis`, `IgbTimeXAxis`, `IgbOrdinalTimeXAxis`. + +Common series types: `IgbLineSeries`, `IgbAreaSeries`, `IgbColumnSeries`, `IgbBarSeries`, `IgbSplineSeries`, `IgbBubbleSeries`, `IgbScatterSeries`. + +Every series must reference its axes by matching `Name` and `XAxisName` / `YAxisName`. + +> **AGENT INSTRUCTION:** `IgbDataChart` requires separate NuGet module registrations for each category of series. Always check `get_doc` to find the exact module names, for example category, scatter, polar, radial, stacked, or financial modules. + +--- + +## Financial / Stock Chart + +> **Docs:** [Financial Chart](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/stock-chart) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbFinancialChartModule)); +``` + +```razor + + +@code { + public List StockData { get; set; } = SampleData.GetStockPrices(); +} +``` + +The data source must contain `Open`, `High`, `Low`, `Close`, and `Volume` numeric fields plus a `Date`/`Time` field. Key attributes: `ChartType` (`FinancialChartType.Candle` / `Bar` / `Line`), `ZoomSliderType`, `IsTooltipVisible`, `VolumeType`. + +--- + +## Pie Chart + +> **Docs:** [Pie Chart](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/pie-chart) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbPieChartModule)); +``` + +```razor + + +@code { + public List SliceData { get; set; } = SampleData.GetBudget(); + + void OnSliceClick(IgbSliceClickEventArgs e) { /* handle click */ } +} +``` + +Key attributes: `DataSource`, `LabelMemberPath`, `ValueMemberPath`, `RadiusFactor` (0-1), `StartAngle`, `OthersCategoryThreshold`, `OthersCategoryType`, `LegendLabelMemberPath`, `LegendItemTemplate`. + +Events: `SliceClick`. + +--- + +## Donut Chart + +> **Docs:** [Doughnut Chart](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/donut-chart) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDoughnutChartModule), typeof(IgbRingSeriesModule)); +``` + +```razor + + + +``` + +Supports multiple `IgbRingSeries` for concentric rings. + +--- + +## Sparkline + +> **Docs:** [Sparkline](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/sparkline-chart) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbSparklineModule)); +``` + +```razor + +``` + +Key attributes: `DataSource`, `ValueMemberPath`, `DisplayType` (`SparklineDisplayType.Line` / `Area` / `Column` / `WinLoss`), `Width`, `Height`, `Brushes`, `LineThickness`, `MarkerVisibility`, `FirstMarkerVisibility`, `LastMarkerVisibility`, `HighMarkerVisibility`, `LowMarkerVisibility`. + +--- + +## Treemap + +> **Docs:** [Treemap](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/treemap-chart) + +Use Treemap for hierarchical, weighted, part-to-whole data. Always call `get_doc("treemap-chart")` before writing markup because hierarchy binding, member paths, and layout options are component-specific. + +--- + +## Geographic Map + +> **Docs:** [Geographic Map](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/geo-map-type-scatter-area-series) + +Use Geographic Map for map backgrounds, shape files, geographic points, bubbles, and marker layers. Do not adapt Data Chart axis or series examples to maps unless the Blazor Geographic Map docs explicitly show the same API. + +--- + +## Gauges + +> **Docs:** [Radial Gauge](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/radial-gauge), [Linear Gauge](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/linear-gauge), [Bullet Graph](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/bullet-graph) + +Use gauges for KPI values, ranges, thresholds, progress-style numeric summaries, and bullet comparisons. Select the exact gauge doc first, then use the MCP-documented property names for ranges, labels, scale, and value binding. + +--- + +## Dashboard Tile + +> **Docs:** [Dashboard Tile](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/dashboard-tile) + +Use Dashboard Tile when the requested component should infer or render compact dashboard visualizations from bound data. Verify supported chart modes and binding shape with MCP before producing code. + +--- + +## Common Chart Features + +### Legends + +```razor + + +``` + +### Tooltips + +```razor + + +``` + +### Animations + +```razor + +``` + +### Highlighting + +```razor + +``` + +### Zooming and Panning + +```razor + +``` + +--- + +## Key Rules + +1. **Always call `get_doc` for each chart, map, gauge, or dashboard component before writing code.** Visualization APIs are extensive and version-specific. +2. **`IgbCategoryChart` is the fastest path for standard charts.** It auto-generates series from data. Use `IgbDataChart` only when you need multiple series types, custom axes, or advanced features. +3. **`IgbDataChart` requires one module per series category.** Check `get_doc` for the exact module name. +4. **Financial chart data must have `Open`, `High`, `Low`, `Close` fields.** If the data model is different, the chart will not render correctly. +5. **Always set explicit `Width` and `Height` on charts.** Charts do not auto-size to their container without a height. +6. **`IgbDataChart` series must match axes by name.** The `XAxisName` / `YAxisName` on each series must match the `Name` attribute of the axis component. diff --git a/skills/igniteui-blazor-components/references/data-display.md b/skills/igniteui-blazor-components/references/data-display.md new file mode 100644 index 0000000..86a80d0 --- /dev/null +++ b/skills/igniteui-blazor-components/references/data-display.md @@ -0,0 +1,351 @@ +# Data Display Components + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration - see [`setup.md`](./setup.md). + +## Contents + +- [Button & Button Group](#button--button-group) +- [Icon & Icon Button](#icon--icon-button) +- [Card](#card) +- [Carousel](#carousel) +- [List](#list) +- [Avatar](#avatar) +- [Badge](#badge) +- [Chip](#chip) +- [Circular Progress](#circular-progress) +- [Linear Progress](#linear-progress) +- [Dropdown](#dropdown) +- [Tooltip](#tooltip) +- [Ripple](#ripple) +- [Key Rules](#key-rules) + +--- + +## Overview +This reference gives high-level guidance on data display and action components, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in for Blazor. + +## Button & Button Group + +> **Docs:** [Button](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/button), [Button Group](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/button-group) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule), typeof(IgbButtonGroupModule)); +``` + +```razor + +Save +Cancel +Flat + + + + Left + Center + Right + +``` + +Key attributes on `IgbButton`: `Variant` (`ButtonVariant.Contained` / `Outlined` / `Flat` / `FAB`), `Disabled`, `Type` (`ButtonType.Button` / `Submit` / `Reset`), `Href` (renders as ``). + +Key attributes on `IgbButtonGroup`: `Selection` (`ButtonGroupSelection.Single` / `SingleRequired` / `Multiple`), `Alignment` (`ContentOrientation.Horizontal` / `ContentOrientation.Vertical`). + +--- + +## Icon & Icon Button + +> **Docs:** [Icon](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/icon), [Icon Button](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/icon-button) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule), typeof(IgbIconButtonModule)); +``` + +```razor + + + +@code { + IgbIcon MyIcon { get; set; } + IgbIconButton MenuBtn { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender && MyIcon != null) + { + await MyIcon.EnsureReady(); + string svg = "..."; + await MyIcon.RegisterIconFromTextAsync("home", svg, "material"); + } + } +} +``` + +Key attributes: `IconName`, `Collection`, `Size` (`SizableComponentSize.Small` / `Medium` / `Large`), `Mirrored` (for RTL). + +> **AGENT INSTRUCTION - Icon Registration:** Icons are registered by name+collection. Registration must happen in `OnAfterRenderAsync(bool firstRender)` after calling `EnsureReady()`. Re-use the same collection name across the app for consistency. + +--- + +## Card + +> **Docs:** [Card](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/card) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule)); +``` + +```razor + + + Card image + + +

Jane Doe

+ Photographer + + +

A short description of Jane Doe.

+ + + Like + Share + + +``` + +Sub-components: `IgbCardMedia`, `IgbCardHeader`, `IgbCardContent`, `IgbCardActions`. Slots on `IgbCardHeader`: `thumbnail`, `title`, `subtitle`. + +--- + +## Carousel + +> **Docs:** [Carousel](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/carousel) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule)); +``` + +```razor + + + Slide 1 + + + Slide 2 + + +``` + +Use Carousel for image/content slides, banners, onboarding panels, or media galleries. Check the `carousel` MCP doc for current slide APIs, navigation controls, indicators, autoplay, animation, and CSS parts. + +--- + +## List + +> **Docs:** [List](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/list) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbListModule)); +``` + +```razor + + Contacts + @foreach (var contact in Contacts) + { + + @contact.Initials + @contact.Name + @contact.Phone + + + } + +``` + +Slots on `IgbListItem`: `start`, `end`, `title`, `subtitle`. + +--- + +## Avatar + +> **Docs:** [Avatar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/avatar) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule)); +``` + +```razor + + + + +AB + + + + + +``` + +Key attributes: `Src`, `Alt`, `Shape` (`AvatarShape.Circle` / `Square` / `Rounded`), `Size`. + +--- + +## Badge + +> **Docs:** [Badge](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/badge) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule)); +``` + +```razor +5 + +``` + +Key attributes: `Variant` (`BadgeVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`), `Shape` (`BadgeShape.Rounded` / `Square` / `Dot`), `Outlined`. + +--- + +## Chip + +> **Docs:** [Chip](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/chip) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule)); +``` + +```razor + + + Blazor + + +@code { + void OnChipRemoved(IgbVoidEventArgs e) { /* handle removal */ } +} +``` + +Key attributes: `Selectable`, `Selected`, `Removable`, `Disabled`, `Variant` (`ChipVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`). + +Slots: `start`, `end` (prefix/suffix icons). + +Events: `Select`, `Remove`. + +--- + +## Circular Progress + +> **Docs:** [Circular Progress](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/circular-progress) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule)); +``` + +```razor + + + 65% + + + + +``` + +Key attributes: `Value`, `Max`, `Indeterminate`, `AnimationDuration`, `Variant` (`ProgressBaseVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`). + +--- + +## Linear Progress + +> **Docs:** [Linear Progress](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/linear-progress) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule)); +``` + +```razor + + +``` + +Key attributes: `Value`, `Max`, `Indeterminate`, `Striped`, `Variant`, `LabelAlign` (`ProgressLabelAlign.TopStart` / `TopEnd` / `BottomStart` / `BottomEnd`), `LabelVisibility`. + +--- + +## Dropdown + +> **Docs:** [Dropdown](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/dropdown) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule)); +``` + +```razor +
+ + Options + Actions + Edit + Delete + Archive + +
+ +``` + +Key attributes on `IgbDropdown`: `Placement` (`PopoverPlacement.*`), `Flip`, `Distance`, `SameWidth`, `KeepOpenOnOutsideClick`, `KeepOpenOnSelect`. Key attributes on `IgbDropdownItem`: `Value`, `Selected`, `Disabled`. Events on `IgbDropdown`: `Opening`, `Opened`, `Closing`, `Closed`, `Change`. + +--- + +## Tooltip + +> **Docs:** [Tooltip](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/tooltip) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule)); +``` + +```razor +Hover me + + This is a tooltip + +``` + +Key attributes: `Anchor` (target element ID string), `Placement` (`PopoverPlacement.Top` / `Bottom` / `Left` / `Right` and start/end variants), `ShowDelay`, `HideDelay`, `ShowTriggers`, `HideTriggers`, `Sticky`, `WithArrow`, `DisableArrow`, `Open`. + +--- + +## Ripple + +> **Docs:** [Ripple](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/ripple) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule)); +``` + +Attach to any element with the `igcRipple` attribute or nest `IgbRipple` inside a container: + +```razor +
+ Click me + +
+``` + +CSS part: `base`. Customize color via `--color` CSS custom property. + +--- + +## Key Rules + +1. **Always call `get_doc` before writing code.** Slot names differ between components. +2. **Register each module explicitly.** `IgbButtonModule` and `IgbIconButtonModule` are separate modules. +3. **Icons must be registered before they display.** Use `EnsureReady()` + `RegisterIconFromTextAsync()` in `OnAfterRenderAsync(bool firstRender)`. +4. **`IgbCard` does not set a default width.** Always set a width via inline style or CSS class. +5. **Prefer the Dropdown `target` slot for the trigger.** For an external trigger, follow the current `dropdown` MCP doc and call `Show()`, `Hide()`, or `Toggle()` on the dropdown reference. +6. **`IgbTooltip.Anchor` uses the target element ID string in the documented Blazor pattern.** Give the target an `id` and pass that same value to `Anchor`. diff --git a/skills/igniteui-blazor-components/references/feedback.md b/skills/igniteui-blazor-components/references/feedback.md new file mode 100644 index 0000000..2ba9145 --- /dev/null +++ b/skills/igniteui-blazor-components/references/feedback.md @@ -0,0 +1,179 @@ +# Feedback & Overlay Components + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration - see [`setup.md`](./setup.md). + +## Contents + +- [Dialog](#dialog) +- [Snackbar](#snackbar) +- [Toast](#toast) +- [Banner](#banner) +- [Key Rules](#key-rules) + +--- + +## Overview +This reference gives high-level guidance on feedback and overlay components, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in for Blazor. + +## Dialog + +> **Docs:** [Dialog](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/notifications/dialog) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDialogModule)); +``` + +```razor +Open Dialog + + +

Are you sure you want to delete this item? This action cannot be undone.

+ Cancel + Delete + + +@code { + public IgbDialog ConfirmDialog { get; set; } + + Task OpenDialog() => ConfirmDialog.ShowAsync(); + Task CloseDialog() => ConfirmDialog.HideAsync(); + + async Task ConfirmDelete() + { + await ConfirmDialog.HideAsync(); + // perform delete + } +} +``` + +Key attributes: `Title`, `KeepOpenOnEscape` (default: `false`; set `true` to prevent closing on ESC), `CloseOnOutsideClick` (default: `false`), `Open`, `HideDefaultAction`. + +Slots: `footer` (action buttons). The default slot is the dialog body. + +Methods: `ShowAsync()`, `HideAsync()`, `ToggleAsync()`. + +Events: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`. + +CSS parts: `base`, `title`, `footer`, `content`. + +--- + +## Snackbar + +> **Docs:** [Snackbar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/notifications/snackbar) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule)); +``` + +```razor +Save + + + Changes saved successfully. + + +@code { + IgbSnackbar Snack { get; set; } + + async Task ShowMessage() + { + await Snack.ShowAsync(); + // or use JS interop shortcut: id="snackbar" + onclick="snackbar.show()" + } + + void OnUndo(IgbVoidEventArgs e) { /* undo logic */ } +} +``` + +Key attributes: `DisplayTime` (ms, default 4000; 0 keeps it open), `KeepOpen` (overrides `DisplayTime`), `ActionText` (text for the action button). + +Methods: `ShowAsync()`, `HideAsync()`. + +Events: `Action` - fires when the action button is clicked. + +CSS parts: `base`, `message`, `action`, `action-container`. + +> **TIP - JS interop shortcut:** Add `id="snackbar"` to `IgbSnackbar` and `onclick="snackbar.show()"` to the trigger button as a lightweight alternative when you don't need C# event handling. + +--- + +## Toast + +> **Docs:** [Toast](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/notifications/toast) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbToastModule)); +``` + +```razor +Show Toast + + + Operation completed successfully. + + +@code { + IgbToast ToastRef { get; set; } + Task ShowToast() => ToastRef.ShowAsync(); +} +``` + +Key attributes: `DisplayTime` (ms), `KeepOpen`. + +Methods: `ShowAsync()`, `HideAsync()`. + +> **AGENT INSTRUCTION - Toast vs Snackbar:** `IgbToast` is a simple auto-dismissing notification with no action button. Use `IgbSnackbar` when you need an action button (e.g., "Undo"). Check the doc via `get_doc` for the current difference, as these components evolve. + +--- + +## Banner + +> **Docs:** [Banner](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/notifications/banner) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule)); +``` + +```razor + + + You are currently offline. + Retry + + +Show Banner + +@code { + IgbBanner BannerRef { get; set; } + Task ShowBanner() => BannerRef.ShowAsync(); + void RetryConnection() { /* retry logic */ } +} +``` + +Slots: `illustration` (icon or image), `actions` (buttons shown at the right or bottom). Default slot = message text. + +Methods: `ShowAsync()`, `HideAsync()`, `ToggleAsync()`. + +Events: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`. + +CSS parts: `spacer`, `message`, `illustration`, `actions`. + +--- + +## Key Rules + +1. **Always call `get_doc` before writing code.** Method signatures and event argument types are version-specific. +2. **Use `@ref` to obtain a component reference**, then call `ShowAsync()` / `HideAsync()` on it from C# code. +3. **`IgbDialog.KeepOpenOnEscape` is `false` by default.** Set it to `true` to force users to use your footer buttons instead of ESC. +4. **`IgbDialog.CloseOnOutsideClick` is `false` by default** - set it to `true` for light-dismiss dialogs. +5. **`IgbSnackbar.DisplayTime="0"` keeps it open until `HideAsync()` is called.** Use `KeepOpen` for the same effect. +6. **Footer buttons in `IgbDialog` must use `slot="footer"`.** Without the slot, they render in the body. +7. **`IgbBanner` is inline** (pushes content down) while `IgbDialog` is a modal overlay. Use banners for persistent, low-urgency messages and dialogs for confirmations or blocking actions. diff --git a/skills/igniteui-blazor-components/references/form-controls.md b/skills/igniteui-blazor-components/references/form-controls.md new file mode 100644 index 0000000..c2d6cca --- /dev/null +++ b/skills/igniteui-blazor-components/references/form-controls.md @@ -0,0 +1,362 @@ +# Form Controls & EditForm Integration + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration - see [`setup.md`](./setup.md). + +## Contents + +- [Input](#input) +- [Combo Box](#combo-box) +- [Select](#select) +- [Date Picker](#date-picker) +- [Date Range Picker](#date-range-picker) +- [Calendar](#calendar) +- [Date Time Input](#date-time-input) +- [Mask Input](#mask-input) +- [Checkbox](#checkbox) +- [Radio / Radio Group](#radio--radio-group) +- [Switch](#switch) +- [Slider / Range Slider](#slider--range-slider) +- [Rating](#rating) +- [Form & Binding Notes](#form--binding-notes) +- [Key Rules](#key-rules) + +--- + +## Overview +This reference gives high-level guidance on form controls, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in for Blazor. + +## Input + +> **Docs:** [Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/input) + +```csharp +// Program.cs +builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule)); +``` + +```razor + + User + + +@code { + string UserName { get; set; } = ""; +} +``` + +Key attributes: `Label`, `Placeholder`, `DisplayType` (`InputType.Text / Email / Password / Tel / Number`), `Required`, `Disabled`, `Readonly`, `MinLength`, `MaxLength`. + +Slots: `prefix`, `suffix`, `helper-text`. + +Events: `IgbInput` (fires while typing), `Change` (fires on commit/blur). + +--- + +## Combo Box + +> **Docs:** [Combo Box](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/combo/overview) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); +``` + +```razor + + +@code { + private List Cities = SampleData.Cities; + + record City(string Id, string Name, string Country); +} +``` + +Key attributes: `Data`, `ValueKey` (required for complex objects), `DisplayKey`, `T` (type parameter - must match `ValueKey` property type or `"object"` if no `ValueKey`), `Label`, `Placeholder`, `SingleSelect` (for single-selection mode), `Disabled`, `Required`. + +Events: `Opening`, `Opened`, `Closing`, `Closed`, `SelectionChanging`. + +> **AGENT INSTRUCTION:** `IgbCombo` does **not** work inside a standard HTML ``. Use `` with `@bind-Value` instead. + +--- + +## Select + +> **Docs:** [Select](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/select) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); +``` + +```razor + + Apple + Orange + Banana + +``` + +For grouped options use `IgbSelectHeader` and `IgbSelectGroup`. Key attributes on `IgbSelect`: `Label`, `Placeholder`, `Outlined`, `Disabled`, `Required`, `Name`. On `IgbSelectItem`: `Value`, `Selected`, `Disabled`. + +Slots on `IgbSelect`: `header`, `footer`, `helper-text`, `prefix`, `suffix`, `toggle-icon`. + +--- + +## Date Picker + +> **Docs:** [Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-picker) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule)); +``` + +```razor + + +@code { + public IgbDatePicker Picker { get; set; } + public DateTime SelectedDate { get; set; } = DateTime.Today; +} +``` + +Key attributes: `Value` (DateTime), `Min`, `Max`, `InputFormat`, `DisplayFormat`, `Locale`, `Mode` (`PickerMode.Dropdown` / `PickerMode.Dialog`), `ShowWeekNumbers`, `WeekStart`, `Disabled`, `Required`. + +Slots: `calendar`, `clear`, `prefix`, `suffix`, `actions` (custom footer buttons). + +Methods: `StepUp(DatePart)`, `StepDown(DatePart)`, `Clear()`, `Show()`, `Hide()`, `Toggle()`. + +--- + +## Date Range Picker + +> **Docs:** [Date Range Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-range-picker) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule)); +``` + +```razor + + +@code { + public IgbDateRangePicker RangePicker { get; set; } +} +``` + +Returns a start and end `DateTime`. Key attributes: `Min`, `Max`, `InputFormat`, `Locale`, `Mode`. + +--- + +## Calendar + +> **Docs:** [Calendar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule)); +``` + +```razor + +``` + +Use Calendar when the UI needs an always-visible date picker rather than an input/dropdown picker. For multiple selection, range selection, special dates, disabled dates, visible months, week numbers, and localization, use the exact property names from the `calendar` MCP doc before writing markup. + +--- + +## Date Time Input + +> **Docs:** [Date Time Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/date-time-input) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule)); +``` + +```razor + + +@code { + public DateTime? SelectedDateTime { get; set; } = DateTime.Now; +} +``` + +Key attributes: `Value` (DateTime?), `InputFormat`, `DisplayFormat`, `Min`, `Max`, `MinutesStep`, `SpinLoop`. + +Methods: `StepUp()`, `StepDown()`, `Clear()`. + +--- + +## Mask Input + +> **Docs:** [Mask Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/mask-input) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule)); +``` + +```razor + +``` + +Key attributes: `Mask` (pattern string: `0` = digit, `L` = letter, `A` = alphanumeric), `Placeholder`, `Prompt` (fill character, default `_`), `ValueMode` (`raw` or `withFormatting`). + +--- + +## Checkbox + +> **Docs:** [Checkbox](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/checkbox) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule)); +``` + +```razor +Subscribe to newsletter + +@code { + bool IsSubscribed { get; set; } +} +``` + +Key attributes: `Checked`, `Indeterminate`, `Disabled`, `Required`, `Invalid`, `LabelPosition` (`ToggleLabelPosition.After` / `Before`), `Name`, `Value`. + +CSS parts: `base`, `control`, `indicator`, `label`. + +--- + +## Radio / Radio Group + +> **Docs:** [Radio & Radio Group](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/radio) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbRadioModule), typeof(IgbRadioGroupModule)); +``` + +```razor + + Basic + Pro + Enterprise + +``` + +Key attributes on `IgbRadioGroup`: `Alignment` (`ContentOrientation.Horizontal` / `ContentOrientation.Vertical`), `Name`. On `IgbRadio`: `Value`, `Checked`, `Disabled`, `Invalid`, `LabelPosition`. + +--- + +## Switch + +> **Docs:** [Switch](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/switch) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); +``` + +```razor +Dark Mode + +@code { + bool IsDarkMode { get; set; } +} +``` + +Key attributes: `Checked`, `Disabled`, `Required`, `LabelPosition`. + +--- + +## Slider / Range Slider + +> **Docs:** [Slider & Range Slider](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/slider) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule), typeof(IgbRangeSliderModule)); +``` + +```razor + + + + + + +@code { + void OnSliderChange(IgbNumberEventArgs e) => Console.WriteLine(e.Detail); + void OnRangeChange(IgbRangeSliderValueEventArgs e) + { + var lower = e.Detail.Lower; + var upper = e.Detail.Upper; + } +} +``` + +Key attributes on `IgbSlider`: `Value`, `Min`, `Max`, `Step`, `Disabled`, `HideTooltip`. On `IgbRangeSlider`: `Lower`, `Upper`, `Min`, `Max`, `Step`. + +Events (both): `IgbInput` (fires while dragging), `Change` (fires on commit). + +--- + +## Rating + +> **Docs:** [Rating](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/rating) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule)); +``` + +```razor + + +@code { + double StarRating { get; set; } = 3; +} +``` + +Key attributes: `Value`, `Max`, `Step` (for half-star: `0.5`), `Disabled`, `Readonly`, `Label`, `ValueFormat`. + +Events: `Change`, `Hover`. + +--- + +## Form & Binding Notes + +> **AGENT INSTRUCTION:** Do not assume one universal form integration pattern. Several Ignite UI Blazor components such as `IgbCombo` and `IgbRadio` do **not** work with a standard HTML `` element. Use the MCP doc for the exact component, bind values explicitly, and only use a form pattern shown by the current docs. + +```razor + +I agree to the terms + + United States + United Kingdom + + +@code { + public class FormModel + { + [Required] public string Name { get; set; } = ""; + public bool Agreed { get; set; } + public string Country { get; set; } = ""; + } + + FormModel Model = new(); + + void Save() { /* validate and persist Model using the pattern required by your app */ } +} +``` + +--- + +## Key Rules + +1. **Always call `get_doc` for each component before writing any code.** Property names and event argument types are version-specific. +2. **Do not wrap Ignite UI inputs in a standard HTML `` unless the component doc shows that pattern.** Form behavior differs by component. +3. **Register every module you use in `Program.cs`** using the `typeof(Igb{Name}Module)` pattern. +4. **`IgbCombo` requires the `T` type parameter** - set it to the type of your `ValueKey` property, or `"object"` if there is no `ValueKey`. +5. **Use `@bind-Value` / `@bind-Checked` for two-way data binding** in Blazor. +6. **`IgbSlider` and `IgbRangeSlider` have separate modules** - register both if you use range sliders. diff --git a/skills/igniteui-blazor-components/references/layout-manager.md b/skills/igniteui-blazor-components/references/layout-manager.md new file mode 100644 index 0000000..118ab57 --- /dev/null +++ b/skills/igniteui-blazor-components/references/layout-manager.md @@ -0,0 +1,181 @@ +# Layout Manager Components - Dock Manager & Tile Manager + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration - see [`setup.md`](./setup.md). + +## Contents + +- [Dock Manager](#dock-manager) + - [Basic Setup](#basic-setup) + - [Pane Types](#pane-types) + - [Layout Serialization](#layout-serialization) + - [Events](#events) +- [Tile Manager](#tile-manager) +- [Key Rules](#key-rules) + +--- + +## Overview +This reference gives high-level guidance on when to use each layout manager component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in for Blazor. + +## Dock Manager + +> **Docs:** [Dock Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager) + +Dock Manager provides an IDE-like dockable pane layout. Users can drag panes to dock, float, pin/unpin, and close them at runtime. + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDockManagerModule)); +``` + +### Basic Setup + +Dock Manager uses a C# layout object graph to define pane structure. Pane content is projected via named slots. + +```razor + + +
Panel 1 Content
+
Panel 2 Content
+
Panel 3 Content
+ + +@code { + IgbDockManager DockRef { get; set; } + + IgbDockManagerLayout DockLayout { get; set; } = new IgbDockManagerLayout + { + RootPane = new IgbSplitPane + { + PaneType = DockManagerPaneType.SplitPane, + Orientation = SplitPaneOrientation.Horizontal, + Panes = new() + { + new IgbTabGroupPane + { + PaneType = DockManagerPaneType.TabGroupPane, + Panes = new List + { + new IgbContentPane + { + PaneType = DockManagerPaneType.ContentPane, + ContentId = "panel1", + Header = "Panel 1" + }, + new IgbContentPane + { + PaneType = DockManagerPaneType.ContentPane, + ContentId = "panel2", + Header = "Panel 2" + } + } + }, + new IgbContentPane + { + PaneType = DockManagerPaneType.ContentPane, + ContentId = "panel3", + Header = "Panel 3", + Size = 250 + } + } + } + }; +} +``` + +### Pane Types + +| Class | Description | +|---|---| +| `IgbSplitPane` | Container that splits horizontally or vertically into child panes | +| `IgbTabGroupPane` | Container that groups content panes into tabs | +| `IgbContentPane` | Leaf pane with actual content (maps to a named slot) | + +Key properties on `IgbContentPane`: + +| Property | Type | Description | +|---|---|---| +| `ContentId` | `string` | Must match the `slot` name on the projected content element | +| `Header` | `string` | Pane tab header title | +| `Size` | `double` | Initial size (pixels or percentage depending on parent) | +| `AllowClose` | `bool` | Shows/hides the close button (default: `true`) | +| `AllowPinning` | `bool` | Allows pin/unpin (default: `true`) | +| `AllowMaximize` | `bool` | Allows maximize (default: `true`) | +| `AllowFloating` | `bool` | Allows tearing off into a floating window (default: `true`) | +| `IsPinned` | `bool` | Set to `false` to start as an unpinned (collapsed to edge) pane | +| `Floating` | `bool` | Starts as a floating window | +| `FloatingLocation` | `IgbDockManagerPoint` | Initial position of a floating pane | +| `FloatingWidth` | `double` | Initial width of a floating pane | +| `FloatingHeight` | `double` | Initial height of a floating pane | + +Key properties on `IgbSplitPane`: + +| Property | Type | Description | +|---|---|---| +| `Orientation` | `SplitPaneOrientation` | `Horizontal` or `Vertical` | +| `Panes` | pane collection | Child panes. Use the exact collection type and initialization style shown in the current MCP docs. | +| `Size` | `double` | Size in parent context | + +### Layout Serialization + +Persisting a Dock Manager layout is version-sensitive. The current `dock-manager` MCP overview documents the layout object graph, pane content slots, styling, and keyboard behavior; it does not show a verified Blazor serialization sample in this reference. Before generating persistence code, inspect the current installed API and use only the documented event signatures and methods for that version. + +> **AGENT INSTRUCTION - Layout serialization:** The serialized JSON contains only pane structure and positions. It does **not** serialize the slot content. The slot content markup must remain static in the Razor template; only pane arrangement changes at runtime. + +### Events + +| Event | Description | +|---|---| +| `LayoutChange` | Fires when the layout is modified by user interaction (drag, close, resize) | +| `PaneClose` | Fires when a pane is closed; `e.Detail.Panes` contains the closed pane(s) | +| `ActivePaneChange` | Fires when the active (focused) pane changes | +| `Splitter Resize` | Fires while a splitter is being dragged | + +--- + +## Tile Manager + +> **Docs:** [Tile Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager) + +Tile Manager provides a resizable, draggable tile/widget dashboard layout. + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule)); +``` + +```razor + + + Revenue Chart + + + + KPIs + + + + Recent Orders + + + +``` + +Key attributes on `IgbTileManager`: `ColumnCount`, `Gap` (CSS length string such as `"8px"`), `MinColumnWidth`, `MinRowHeight`, `ResizeMode` (`TileManagerResizeMode.*`), `DragMode` (`TileManagerDragMode.*`). + +Key attributes on `IgbTile`: `ColSpan`, `RowSpan`, `ColStart`, `RowStart`, `DisableFullscreen`, `DisableMaximize`, `DisableResize`. + +Slots on `IgbTile`: `title` (header), `actions` (header action buttons), `fullscreen-action`, `maximize-action`, `side-adorner`, `corner-adorner`, `bottom-adorner`. Default slot = tile body content. + +Methods on `IgbTileManager`: `SaveLayout()` and `LoadLayout(string)` persist tile order, size, and position. Tile content is not serialized. + +--- + +## Key Rules + +1. **Always call `get_doc` before writing code.** The `IgbDockManagerLayout` object graph and all property names must be confirmed from the docs. +2. **`IgbContentPane.ContentId` must exactly match the `slot` attribute of the projected HTML element.** A mismatch causes the pane to render empty. +3. **Dock Manager must have an explicit height** (via CSS or inline style). Without a height it renders as 0px. +4. **Layout serialization only persists structure, not content.** Slot content is always defined in Razor markup. +5. **`IgbTileManager` uses CSS Grid internally.** Set `ColumnCount` to control the number of columns. +6. **Do not invent Dock Manager serialization APIs.** Use `dock-manager` and the installed API before writing persistence code. +7. **Tile Manager serialization uses `SaveLayout()` / `LoadLayout(string)`.** The saved payload stores tile layout properties, not tile content. diff --git a/skills/igniteui-blazor-components/references/layout.md b/skills/igniteui-blazor-components/references/layout.md new file mode 100644 index 0000000..fb0f163 --- /dev/null +++ b/skills/igniteui-blazor-components/references/layout.md @@ -0,0 +1,309 @@ +# Layout & Navigation Components + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration - see [`setup.md`](./setup.md). + +## Contents + +- [Tabs](#tabs) +- [Stepper](#stepper) +- [Accordion & Expansion Panel](#accordion--expansion-panel) +- [Navbar](#navbar) +- [Navigation Drawer](#navigation-drawer) +- [Tree](#tree) +- [Key Rules](#key-rules) + +--- + +## Overview +This reference gives high-level guidance on layout and navigation components, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in for Blazor. + +## Tabs + +> **Docs:** [Tabs](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tabs) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule)); +``` + +```razor + + Home + Search + Favorites + Home panel content + Search panel content + Favorites panel content + +``` + +For icon tabs, use the `label` slot inside `IgbTab`: + +```razor + + + Home + +``` + +Key attributes on `IgbTabs`: `Alignment` (`TabsAlignment.Start` / `End` / `Center` / `Justify`), `Activation` (`TabsActivation.Auto` / `Manual`). On `IgbTab`: `Panel` (must match `IgbTabPanel.Id`), `Disabled`, `Selected`. + +Events on `IgbTabs`: `Change` - fires when the selected tab changes. + +CSS parts: `headers`, `headers-content`, `headers-wrapper`, `header`, `selected-indicator`, `content`. + +--- + +## Stepper + +> **Docs:** [Stepper](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/stepper) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule)); +``` + +```razor + + + Personal Info + + + + + Address + + + + Confirm + + + + +@code { + IgbStepper StepperRef { get; set; } + + void GoNext() => StepperRef.Next(); + void GoPrev() => StepperRef.Prev(); +} +``` + +Key attributes on `IgbStepper`: `Linear` (prevents skipping steps), `Orientation` (`StepperOrientation.Horizontal` / `Vertical`), `StepType` (`StepperStepType.Indicator` / `Title` / `Full`), `TitlePosition` (`StepperTitlePosition.Bottom` / `Top` / `End` / `Start`), `HorizontalAnimation`, `VerticalAnimation`, `AnimationDuration`. + +Key attributes on `IgbStep`: `Complete`, `Optional`, `Disabled`, `Invalid`, `Active`. + +Slots on `IgbStep`: `indicator` (custom icon/number), `title`, `subtitle`. + +Methods on `IgbStepper`: `Next()`, `Prev()`, `NavigateTo(index)`, `Reset()`. + +Events: `ActiveStepChanging` (cancellable), `ActiveStepChanged`. + +--- + +## Accordion & Expansion Panel + +> **Docs:** [Accordion](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/accordion), [Expansion Panel](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/expansion-panel) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule)); +// IgbExpansionPanel is included in IgbAccordionModule +``` + +```razor + + + + Section 1 + Optional subtitle +

Content for section 1.

+ + + Section 2 +

Content for section 2.

+ + + + + + Details +

Expanded content here.

+ + +@code { + IgbExpansionPanel PanelRef { get; set; } + void Toggle() => PanelRef.Toggle(); +} +``` + +Key attributes on `IgbAccordion`: `SingleExpand` (only one panel open at a time). On `IgbExpansionPanel`: `Open`, `Disabled`. + +Slots on `IgbExpansionPanel`: `title`, `subtitle`, `indicator` (custom expand icon). + +Events on `IgbExpansionPanel`: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`. + +Methods: `Show()`, `Hide()`, `Toggle()`. + +--- + +## Navbar + +> **Docs:** [Navbar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/menus/navbar) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule)); +``` + +```razor + + +

My Application

+ + + +``` + +Slots: `start` (left content, e.g., menu button), `end` (right content, e.g., action icons). The default slot is used for the title. + +CSS parts: `base`, `start`, `middle`, `end`. + +Required theme CSS: + +```html + +``` + +> **AGENT INSTRUCTION:** Register icons used by `IgbNavbar` and `IgbIconButton` before relying on them in samples. Call `await iconRef.EnsureReady()` before `RegisterIconAsync()` or `RegisterIconFromTextAsync()`. + +--- + +## Navigation Drawer + +> **Docs:** [Navigation Drawer](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/menus/navigation-drawer) + +```csharp +builder.Services.AddIgniteUIBlazor( + typeof(IgbNavDrawerModule), + typeof(IgbNavDrawerHeaderItemModule) +); +``` + +```razor + + My App + + + + Home + + + + + Search + + + + + +@code { + IgbNavDrawer DrawerRef { get; set; } + IgbNavDrawerItem HomeItem { get; set; } + IgbNavDrawerItem SearchItem { get; set; } + + List AllItems => new() { HomeItem, SearchItem }; + + void Activate(IgbNavDrawerItem item) + { + item.Active = true; + foreach (var i in AllItems.Where(x => x != item)) + i.Active = false; + } +} +``` + +Navbar integration: + +```razor + + + Home + + + + Navigation + + + + Home + + + + + Search + + +``` + +Mini variant: + +```razor + + Navigation + + + + Home + + +
+ + + +
+ +``` + +Key attributes on `IgbNavDrawer`: `Open`, `Position` (`NavDrawerPosition.Start` / `End` / `Top` / `Bottom`). Use the `mini` slot to provide collapsed icon-only content. + +Methods: `Show()`, `Hide()`, `Toggle()`. + +CSS parts: `base`, `main`, `mini`. + +> **AGENT INSTRUCTION:** Icons used inside `IgbNavDrawerItem` must be registered via `IgbIcon.RegisterIconFromTextAsync()` or `RegisterIconAsync()` in `OnAfterRenderAsync(bool firstRender)` before they display. Call `await iconRef.EnsureReady()` first. + +--- + +## Tree + +> **Docs:** [Tree](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbTreeModule)); +``` + +```razor + + + + + + + + + +``` + +Key attributes on `IgbTree`: `Selection` (`TreeSelectionType.None` / `Multiple` / `Cascade`). On `IgbTreeItem`: `Label`, `Expanded`, `Selected`, `Disabled`, `Active`. + +Slots on `IgbTreeItem`: `label` (custom label content), `indicator` (expand/collapse icon override). Nest `IgbTreeItem` children directly inside a parent `IgbTreeItem`. + +Events on `IgbTree`: `NodeSelectionChanging` (cancellable), `NodeSelectionChanged`, `NodeExpanded`, `NodeCollapsed`. + +--- + +## Key Rules + +1. **Always call `get_doc` before writing code.** Slot names and attribute names are version-specific. +2. **`IgbTab.Panel` must match `IgbTabPanel.Id`** - mismatched IDs cause the panel to never display. +3. **Stepper with `Linear="true"` prevents users from skipping steps.** Do not set `Linear` if free navigation is intended. +4. **Activate/deactivate `IgbNavDrawerItem` programmatically** by setting `item.Active` - there is no automatic selection tracking. +5. **Register icons via `RegisterIconFromTextAsync` in `OnAfterRenderAsync(bool firstRender)`**, and always call `await component.EnsureReady()` first. +6. **`IgbAccordion` with `SingleExpand="true"` closes other panels when one is opened.** This is the most common use case for accordions. diff --git a/skills/igniteui-blazor-components/references/mcp-setup.md b/skills/igniteui-blazor-components/references/mcp-setup.md new file mode 100644 index 0000000..d1aa241 --- /dev/null +++ b/skills/igniteui-blazor-components/references/mcp-setup.md @@ -0,0 +1,78 @@ +# Setting Up the Ignite UI CLI MCP Server + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** + +## Contents + +- [VS Code](#vs-code) +- [Cursor](#cursor) +- [Claude Desktop](#claude-desktop) +- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides) +- [Verifying the Setup](#verifying-the-setup) + +The Ignite UI CLI MCP server enables AI assistants to discover Ignite UI components, access Blazor documentation, and support related Ignite UI workflows. It must be configured in your editor before these tools become available. + +## VS Code + +Create or edit `.vscode/mcp.json` in your project: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +This works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry; `npx -y` handles both cases. + +## Cursor + +Create or edit `.cursor/mcp.json`: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +## Claude Desktop + +Edit the Claude Desktop config file: + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +## WebStorm / JetBrains IDEs + +1. Go to **Settings -> Tools -> AI Assistant -> MCP Servers** +2. Click **+ Add MCP Server** +3. Set Command to `npx` and Arguments to `igniteui-cli mcp` +4. Click OK and restart the AI Assistant + +## Verifying the Setup + +After configuring the MCP server, ask your AI assistant: + +> "List all available Ignite UI for Blazor components" + +If the MCP server is running, the `list_components(framework: "blazor")` tool will return available Blazor component documentation entries. diff --git a/skills/igniteui-blazor-components/references/setup.md b/skills/igniteui-blazor-components/references/setup.md new file mode 100644 index 0000000..2a2c4eb --- /dev/null +++ b/skills/igniteui-blazor-components/references/setup.md @@ -0,0 +1,196 @@ +# Application Setup & Registration + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** + +## Contents + +- [NuGet Installation](#nuget-installation) +- [Program.cs Registration](#programcs-registration) +- [\_Imports.razor](#_importsrazor) +- [CSS Theme Link](#css-theme-link) +- [Script Reference](#script-reference) +- [Project Type Differences](#project-type-differences) +- [Selective Module Registration](#selective-module-registration) +- [Key Rules](#key-rules) + +--- + +## NuGet Installation + +```bash +# Trial package from NuGet.org +dotnet add package IgniteUI.Blazor + +# OSS component package from NuGet.org +dotnet add package IgniteUI.Blazor.Lite + +# OSS Grid Lite package from NuGet.org +dotnet add package IgniteUI.Blazor.GridLite + +# Or via Package Manager Console +Install-Package IgniteUI.Blazor +``` + +Licensed users install from the Infragistics private feed: + +```bash +# Add the Infragistics feed first (one-time) +nuget sources add -name "Infragistics" \ + -source "https://packages.infragistics.com/nuget/licensed/v3/index.json" \ + -username "your@email.com" \ + -password "your-password" + +dotnet add package IgniteUI.Blazor +``` + +Do **not** mix `IgniteUI.Blazor` and `IgniteUI.Blazor.Lite` in the same project. They use the same namespaces and duplicate some components; pick the trial/licensed package path or the OSS Lite package path. + +--- + +## Program.cs Registration + +### Blazor Server (.NET 6+) + +```csharp +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddRazorPages(); +builder.Services.AddServerSideBlazor(); +builder.Services.AddIgniteUIBlazor(); // registers ALL modules + +var app = builder.Build(); +``` + +### Blazor WebAssembly (.NET 6+) + +```csharp +var builder = WebAssemblyHostBuilder.CreateDefault(args); +// ... +builder.Services.AddIgniteUIBlazor(); + +await builder.Build().RunAsync(); +``` + +### Blazor Web App (.NET 8+ - both server and client Program.cs) + +```csharp +// Server Project - Program.cs +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddIgniteUIBlazor(); + +// Client Project - Program.cs +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddIgniteUIBlazor(); +await builder.Build().RunAsync(); +``` + +> **AGENT INSTRUCTION - Blazor Web App render modes** +> +> Ignite UI components require an interactive render mode. For per-page or per-component interactivity, add the render mode directive to pages that use Ignite UI components: +> +> ```razor +> @rendermode InteractiveServer +> @* or: @rendermode InteractiveWebAssembly *@ +> @* or: @rendermode InteractiveAuto *@ +> ``` +> +> For global interactivity, configure it in `App.razor`: ``. + +--- + +## \_Imports.razor + +Add the namespace to both client and server `_Imports.razor` files so Razor pages can use Ignite UI component tags without fully qualifying them: + +```razor +@using IgniteUI.Blazor.Controls +``` + +--- + +## CSS Theme Link + +Add in the `` of: +- **Blazor Server / Web App**: `Pages/_Host.cshtml` or `Components/App.razor` +- **Blazor WASM**: `wwwroot/index.html` + +```html + +``` + +Available theme files (under `_content/IgniteUI.Blazor/themes/`): + +| Path | Theme | +|---|---| +| `light/bootstrap.css` | Bootstrap Light | +| `dark/bootstrap.css` | Bootstrap Dark | +| `light/material.css` | Material Light | +| `dark/material.css` | Material Dark | +| `light/fluent.css` | Fluent Light | +| `dark/fluent.css` | Fluent Dark | +| `light/indigo.css` | Indigo Light | +| `dark/indigo.css` | Indigo Dark | + +For .NET 9+ Web App projects, use the `Assets` property: + +```razor + +``` + +--- + +## Script Reference + +Add alongside the Blazor framework script in the host page: + +```html + + + + + + + +``` + +--- + +## Project Type Differences + +| Project type | `Program.cs` host | Host page for CSS/script | Script tag | +|---|---|---|---| +| **Blazor Server** | `WebApplication.CreateBuilder` | `Pages/_Host.cshtml` | `blazor.server.js` | +| **Blazor WASM** | `WebAssemblyHostBuilder` | `wwwroot/index.html` | `blazor.webassembly.js` | +| **Blazor Web App** | Both server + client `Program.cs` | `Components/App.razor` | `blazor.web.js` | +| **MAUI Blazor Hybrid** | `MauiApp.CreateBuilder` (in `MauiProgram.cs`) | `wwwroot/index.html` | `blazor.webview.js` | + +--- + +## Selective Module Registration + +Register only the modules you use to keep bundle size small: + +```csharp +builder.Services.AddIgniteUIBlazor( + typeof(IgbInputModule), + typeof(IgbComboModule), + typeof(IgbDatePickerModule), + typeof(IgbDialogModule), + typeof(IgbButtonModule) +); +``` + +Module names follow the pattern `Igb{ComponentName}Module`. If unsure of the module name, call `get_doc` for that component - every doc shows the exact `typeof(...)` registration call. + +--- + +## Key Rules + +1. **Always call `get_doc` before writing code.** Module names, property names, and event signatures are version-specific and must come from the MCP docs, not from memory. +2. **Both server and client `Program.cs` must register the service** in Blazor Web App projects. +3. **The CSS theme link and the script tag are both required.** Missing either causes components to render unstyled or non-functional. +4. **Add `@using IgniteUI.Blazor.Controls` to `_Imports.razor`**, not to individual Razor pages, to avoid repetition. +5. **`AddIgniteUIBlazor()` with no arguments registers all modules.** Use explicit `typeof(...)` registrations in production for smaller bundles. +6. **Blazor Web App components need an interactive render mode.** Static SSR pages will not render Ignite UI components correctly. diff --git a/skills/igniteui-blazor-grids/SKILL.md b/skills/igniteui-blazor-grids/SKILL.md new file mode 100644 index 0000000..8023693 --- /dev/null +++ b/skills/igniteui-blazor-grids/SKILL.md @@ -0,0 +1,154 @@ +--- +name: igniteui-blazor-grids +description: "Covers all Ignite UI for Blazor data grid components and their features: IgbGrid, IgbTreeGrid, IgbHierarchicalGrid, IgbPivotGrid, and IgbGridLite. Also covers grid structure, columns, sorting, filtering, advanced filtering, grouping, selection, editing, row adding, row actions, summaries, paging, virtualization, remote operations, state persistence, toolbar, export, search, keyboard navigation, column pinning/hiding/moving/resizing, sizing, and density. Use when users ask about any tabular data display or data grid. Do NOT use for non-grid UI components - use igniteui-blazor-components instead. Do NOT use for theming or styling - use igniteui-blazor-theming instead." +user-invocable: true +--- + +# Ignite UI for Blazor - Data Grids + +## MANDATORY AGENT PROTOCOL - YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT + +**This file is a routing hub only. It contains NO code examples and NO API details.** + +> **DO NOT write any grid property names, event names, column types, or module registration calls from memory.** +> Grid APIs change significantly between versions. Anything generated without reading the reference files will be incorrect. + +You are **required** to complete ALL of the following steps before producing any grid-related code or answer: + +**STEP 1 - Identify the grid type and all features needed.** +If the user has not specified a grid type, use the decision guide below to select the most appropriate one. Then map each feature to one or more rows in the Task → Reference File table. + +**STEP 2 - Read every identified reference file in full (PARALLEL).** +Call `read_file` on **all** reference files identified in Step 1 **in a single parallel batch**. Reference files map grid types and features to exact Blazor MCP doc slugs. + +**STEP 3 - Extract doc slugs, then call `get_doc` for the relevant grid and each feature.** +Use the Ignite UI MCP `get_doc` tool with `framework: "blazor"` and the exact doc slug listed in the reference files you just read. This is the primary source of truth for Blazor grid APIs. Do NOT skip this step. + +If a reference file does not list a slug for the requested grid feature, call `search_docs(framework: "blazor", query: "")` to find the correct doc. If no Blazor doc exists, say that the feature is not covered. + +**STEP 4 - Only then produce output.** +Base your code exclusively on what you read. If the reference files or MCP docs do not cover something, say so rather than guessing. + +--- + +### Grid Type Decision Guide + +| Data shape | Recommended grid | +|---|---| +| Flat array of objects | `IgbGrid` | +| Nested objects (parent has a `Children` array) OR flat records with foreign key parent-child | `IgbTreeGrid` | +| Master-detail where rows expand to reveal a full child grid | `IgbHierarchicalGrid` | +| Cross-tab / pivot analysis with rows, columns, and aggregated values | `IgbPivotGrid` | +| Read-only, non-interactive, simple list in a grid format | `IgbGridLite` | + +--- + +### Grid Types & Modules + +| Grid type | Component | Module | Best for | +|---|---|---|---| +| Grid Lite | `IgbGridLite` | `IgbGridLiteModule` | OSS read-only grid scenarios | +| Flat Grid | `IgbGrid` | `IgbGridModule` | Standard tabular data and most grid features | +| Tree Grid | `IgbTreeGrid` | `IgbTreeGridModule` | Hierarchical rows in one grid surface | +| Hierarchical Grid | `IgbHierarchicalGrid` | `IgbHierarchicalGridModule` | Master-detail with child grids / row islands | +| Pivot Grid | `IgbPivotGrid` | `IgbPivotGridModule` | Pivot/cross-tab analysis | + +> **AGENT INSTRUCTION:** This table is only a routing aid. Always verify exact module and component names in the matching Blazor MCP doc before writing code. + +--- + +### Feature Availability per Grid Type + +| Feature | Grid Lite | IgbGrid | IgbTreeGrid | IgbHierarchicalGrid | IgbPivotGrid | +|---|---|---|---|---|---| +| Sorting / filtering | Limited; verify `overview` | Yes | Yes | Yes | Pivot-specific | +| Advanced filtering | Not covered here | Yes | Check docs | Check docs | Not typical | +| Group by | Not covered here | Yes | Not typical | Not typical | Pivot-specific grouping | +| Editing / row adding | No | Yes | Yes | Yes | Not typical | +| Row actions | No | Yes | Yes | Yes | Not typical | +| Selection | Limited; verify `overview` | Row/cell/column | Row/cell | Row/cell | Check docs | +| Column pinning/hiding/moving/resizing | Limited; verify `overview` | Yes | Yes | Yes | Check docs | +| Master-detail / row islands | No | No | No | Yes | No | +| Virtualization | Verify `overview` | Yes | Yes | Yes | Check docs | +| Remote data operations | Not covered here | Yes | Check docs | Check docs | Not typical | + +> **AGENT INSTRUCTION:** Treat this matrix as a first-pass guardrail, not final API truth. If a feature is marked "check docs" or "limited", call `search_docs(framework: "blazor", query: " ")` before answering. + +--- + +### Task → Reference File + +| Task | Reference file to read | +|---|---| +| Grid type decision, structure, basic setup, column definition, registering modules | [`references/structure.md`](./references/structure.md) | +| Sorting/filtering/grouping state, programmatic data operations, initial expressions, `@ref` grid access | [`references/data-operations.md`](./references/data-operations.md) | +| Sorting/filtering/grouping UI, advanced filtering, column pinning, column hiding, column moving, column resizing, summaries, selection (cell/row/column), row adding, row actions, search, keyboard navigation, toolbar | [`references/features.md`](./references/features.md) | +| IgbTreeGrid (nested data, foreign key), IgbHierarchicalGrid (row islands), IgbPivotGrid (config object) | [`references/types.md`](./references/types.md) | +| Cell editing, row editing, edit events, validation, edit templates | [`references/editing.md`](./references/editing.md) | +| Paginator, remote paging, remote sorting, remote filtering, virtualization | [`references/paging-remote.md`](./references/paging-remote.md) | +| State persistence (save/restore grid state as JSON) | [`references/state.md`](./references/state.md) | +| Column width, row height, grid sizing, density | [`references/sizing.md`](./references/sizing.md) | + +> **When in doubt, read more rather than fewer reference files.** The cost of an unnecessary file read is negligible; the cost of hallucinated property names breaks the application. + +--- + +## Prerequisites + +- .NET 6+ Blazor project (Server, WebAssembly, Web App, or MAUI Blazor Hybrid) +- `IgniteUI.Blazor` NuGet package installed for full grid components, or `IgniteUI.Blazor.GridLite` for OSS-only `IgbGridLite` +- `builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule))` in `Program.cs` +- `@using IgniteUI.Blazor.Controls` in `_Imports.razor` +- A theme CSS file linked in the host page - see [`igniteui-blazor-components/references/setup.md`](../igniteui-blazor-components/references/setup.md) +- The **Ignite UI CLI MCP server** (`igniteui-cli`) is available as a tool provider + +> **AGENT INSTRUCTION - MCP Server Setup (REQUIRED)** +> +> Before using any Ignite UI CLI MCP tools, you MUST verify the MCP server is available +> by calling `list_components(framework: "blazor", filter: "grid")` or `search_docs(framework: "blazor", query: "grid")`. +> If the tool is not available or the call fails, you MUST automatically configure it by following the setup process steps described below. +> +> After writing the file, inform the user that the MCP server has been +> configured and they may need to reload the editor for the tools to activate. +> Start the MCP server and wait for that MCP server to start before continuing the grid-related work. +> Do NOT skip this step or ask the user to do it manually. + +## Setting Up the Ignite UI CLI MCP Server + +> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/mcp-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification. + +## Key Blazor-Specific Notes + +> **AGENT INSTRUCTION - No `get_api_reference` for Blazor** +> +> `get_api_reference` and `search_api` MCP tools do **not** support Blazor. All property names, event names, and method signatures must be obtained from `get_doc` results. + +> **AGENT INSTRUCTION - `@ref` for programmatic access** +> +> Use `@ref` to obtain a C# reference to the grid, then call methods on it: +> +> ```razor +> +> @code { public IgbGrid Grid { get; set; } } +> ``` + +> **AGENT INSTRUCTION - Batch Editing is NOT available for Blazor** +> +> The Ignite UI for Blazor grid does **not** support batch editing. Supported editing modes are Cell editing and Row editing only. Do not suggest or generate batch editing code. + +## Doc-Slug Validation Checklist + +Before publishing or substantially updating this skill: + +1. Read every `references/*.md` file and collect each documented `get_doc(framework: "blazor", name: "...")` slug. +2. Validate each slug with the Ignite UI CLI MCP `get_doc` tool. +3. For any missing slug, use `search_docs(framework: "blazor", query: "...")` to find the current Blazor doc name. +4. Remove or mark unsupported any grid feature whose slug cannot be found in Blazor docs. +5. Keep `get_api_reference` and `search_api` out of this checklist because they do not support Blazor. + +--- + +## Related Skills + +- [`igniteui-blazor-components`](../igniteui-blazor-components/SKILL.md) - All non-grid UI components +- [`igniteui-blazor-theming`](../igniteui-blazor-theming/SKILL.md) - Theming & Styling diff --git a/skills/igniteui-blazor-grids/references/data-operations.md b/skills/igniteui-blazor-grids/references/data-operations.md new file mode 100644 index 0000000..6975cfc --- /dev/null +++ b/skills/igniteui-blazor-grids/references/data-operations.md @@ -0,0 +1,162 @@ +# Grid Data Operations - Sorting, Filtering & Grouping + +> **Part of the [`igniteui-blazor-grids`](../SKILL.md) skill hub.** + +## Contents + +- [Accessing the Grid Instance](#accessing-the-grid-instance) +- [Sorting](#sorting) +- [Filtering](#filtering) +- [Grouping](#grouping) +- [Remote Data Operations](#remote-data-operations) +- [Key Rules](#key-rules) + +--- + +## Accessing the Grid Instance + +Use `@ref` to access the grid from C#: + +```razor + + + + +@code { + private IgbGrid Grid { get; set; } +} +``` + +For code that depends on rendered elements or child components, initialize after first render. + +--- + +## Sorting + +Enable sorting per column: + +```razor + +``` + +Initial sorting is controlled with `SortingExpressions`: + +```razor + + + + +@code { + private IgbSortingExpression[] InitialSort = + { + new IgbSortingExpression + { + FieldName = "Category", + Dir = SortingDirection.Asc, + IgnoreCase = true + } + }; +} +``` + +Programmatic sorting uses the grid instance: + +```csharp +await Grid.SortAsync(new[] +{ + new IgbSortingExpression + { + FieldName = "Country", + Dir = SortingDirection.Asc + } +}); + +await Grid.ClearSortAsync("Country"); +await Grid.ClearSortAsync(""); +``` + +> **AGENT INSTRUCTION:** Sorting changes the displayed order, not the underlying data source. Confirm method signatures from `get_doc` before writing final code. + +--- + +## Filtering + +Enable filtering on the grid and, when needed, on individual columns: + +```razor + + + + +``` + +Initial filtering is controlled with `FilteringExpressionsTree`: + +```razor + + +``` + +Create the filter tree in C# using the operand and condition names confirmed by `get_doc`. + +> **AGENT INSTRUCTION:** Do not invent filtering condition names. Blazor filtering uses condition names such as `"contains"` in MCP examples, but the exact condition set depends on data type and version. + +--- + +## Grouping + +Enable grouping on each column that can be grouped: + +```razor + + + + +``` + +Initial grouping uses `GroupingExpressions`: + +```csharp +private IgbGroupingExpression[] InitialGroups = +{ + new IgbGroupingExpression + { + FieldName = "ShipCountry", + Dir = SortingDirection.Asc + } +}; +``` + +Programmatic grouping uses the grid instance: + +```csharp +Grid.GroupBy(InitialGroups); +``` + +Grouping supports expand/collapse state, group-row selection, group row templates, summaries, and paging interactions. Read `grid-groupby` before combining these features. + +--- + +## Remote Data Operations + +Use [`paging-remote.md`](./paging-remote.md) when sorting, filtering, paging, or virtualization is handled by a server. Remote scenarios usually require: + +- Loading only the visible page or chunk from the server +- Setting `TotalRecords` or `TotalItemCount` so the grid or paginator can calculate the full data size +- Replacing the bound data collection when server data changes +- Resetting paging when sort or filter state changes + +--- + +## Key Rules + +1. **Always call `get_doc` for the specific operation before writing code.** Method names, event args, and expression object shapes are version-specific. +2. **Use `@ref` for programmatic access.** +3. **Keep UI feature setup and programmatic state separate.** Use `features.md` for toolbar/UI behaviors and this file for C# sorting, filtering, grouping, and expression state. +4. **Use `paging-remote.md` for server-side operations.** Local data operations and remote data operations have different responsibilities. +5. **Do not use `get_api_reference` or `search_api` for Blazor.** They do not support Blazor; use `get_doc` and `search_docs`. diff --git a/skills/igniteui-blazor-grids/references/editing.md b/skills/igniteui-blazor-grids/references/editing.md new file mode 100644 index 0000000..05b8264 --- /dev/null +++ b/skills/igniteui-blazor-grids/references/editing.md @@ -0,0 +1,170 @@ +# Grid Editing + +> **Part of the [`igniteui-blazor-grids`](../SKILL.md) skill hub.** + +## Contents + +- [Cell Editing](#cell-editing) +- [Row Editing](#row-editing) +- [Edit Templates](#edit-templates) +- [Edit Events](#edit-events) +- [Adding and Deleting Rows](#adding-and-deleting-rows) +- [Key Rules](#key-rules) + +--- + +## Cell Editing + +Cell editing allows users to double-click (or press Enter) on a cell to edit it in place. + +```razor + + + + + + +``` + +Only columns with `Editable="true"` allow editing. The grid renders the appropriate input control for the column's `DataType` automatically. + +--- + +## Row Editing + +Row editing shows an overlay row with **Done** and **Cancel** buttons. Changes are committed only when the user clicks **Done** (or discarded with **Cancel**). + +```razor + + + + + + +@code { + void OnRowEditEnter(IgbGridEditEventArgs e) { /* row edit started */ } + + void OnRowEditDone(IgbGridEditDoneEventArgs e) + { + var updated = e.NewValue; // the updated row object + // persist to database + } +} +``` + +> **AGENT INSTRUCTION - Batch Editing NOT available** +> +> Ignite UI for Blazor does **not** support batch editing. All edits are committed immediately (cell editing) or per-row (row editing). Do not suggest or generate batch editing code. + +--- + +## Edit Templates + +Use custom edit templates to replace the default editor for a column: + +```razor + + + @{ + var cell = context as IgbCellTemplateContext; + } + + Electronics + Clothing + Food + + + +``` + +> **AGENT INSTRUCTION:** Always call `get_doc` for the exact directive name and context type for cell editor templates. The directive type name (`IgbCellEditorTemplateDirective`) and context property names may differ between versions. + +--- + +## Edit Events + +| Event | Fires on | Args type | Cancellable | +|---|---|---|---| +| `CellEditEnter` | Cell enters edit mode | `IgbGridEditEventArgs` | Yes - set `e.Cancel = true` | +| `CellEdit` | Cell edit about to commit | `IgbGridEditEventArgs` | Yes - set `e.Cancel = true` | +| `CellEditDone` | Cell edit committed | `IgbGridEditDoneEventArgs` | No | +| `CellEditExit` | Cell exits edit mode | `IgbGridEditEventArgs` | Yes | +| `RowEditEnter` | Row enters edit mode | `IgbGridEditEventArgs` | Yes | +| `RowEdit` | Row edit about to commit | `IgbGridEditEventArgs` | Yes | +| `RowEditDone` | Row edit committed | `IgbGridEditDoneEventArgs` | No | +| `RowEditExit` | Row exits edit mode | `IgbGridEditEventArgs` | Yes | + +Key properties on `IgbGridEditEventArgs`: `RowData`, `OldValue`, `NewValue`, `Column`, `Cancel`. + +Key properties on `IgbGridEditDoneEventArgs`: `RowData`, `OldValue`, `NewValue`, `Column`. + +```razor + +``` + +```csharp +void OnCellEdit(IgbGridEditEventArgs e) +{ + if (e.Column.Field == "UnitPrice" && (double)e.NewValue < 0) + { + e.Cancel = true; // reject negative prices + } +} + +async Task OnRowSaved(IgbGridEditDoneEventArgs e) +{ + await MyApi.UpdateProductAsync(e.RowData); +} +``` + +--- + +## Adding and Deleting Rows + +Programmatic row addition and deletion use grid API methods. + +```razor + + ... + +Add Row +Delete Selected + +@code { + IgbGrid Grid { get; set; } + List Products { get; set; } = SampleData.GetProducts(); + + async Task AddRow() + { + var newRow = new Product { ProductID = GetNextId(), ProductName = "New Product" }; + await Grid.AddRowAsync(newRow); + } + + async Task DeleteSelected() + { + var selected = await Grid.GetSelectedRowsAsync(); + foreach (var row in selected) + { + await Grid.DeleteRowAsync(row.Key); + } + } +} +``` + +> **AGENT INSTRUCTION:** Confirm method names `AddRowAsync` / `DeleteRowAsync` from `get_doc` - method signatures may change between versions. + +--- + +## Key Rules + +1. **Always call `get_doc` before writing edit code.** Event argument types and method names are version-specific. +2. **`PrimaryKey` is required for editing.** Without it, the grid cannot identify rows for updates. +3. **Each editable column must have `Editable="true"`** - setting `RowEditable` on the grid does not automatically make all columns editable. +4. **Batch editing is NOT available in Blazor.** Only Cell editing and Row editing are supported. +5. **Cancel edits in `CellEdit` or `RowEdit` events (before commit).** The `CellEditDone` / `RowEditDone` events fire after the edit is already applied and are not cancellable. +6. **For custom edit templates, confirm directive names from `get_doc`** - do not guess template directive names. diff --git a/skills/igniteui-blazor-grids/references/features.md b/skills/igniteui-blazor-grids/references/features.md new file mode 100644 index 0000000..ca7d13e --- /dev/null +++ b/skills/igniteui-blazor-grids/references/features.md @@ -0,0 +1,371 @@ +# Grid Features + +> **Part of the [`igniteui-blazor-grids`](../SKILL.md) skill hub.** + +## Contents + +- [Sorting](#sorting) +- [Filtering](#filtering) +- [Advanced Filtering](#advanced-filtering) +- [Column Pinning](#column-pinning) +- [Column Hiding](#column-hiding) +- [Column Moving](#column-moving) +- [Column Resizing](#column-resizing) +- [Summaries](#summaries) +- [Group By](#group-by) +- [Selection](#selection) +- [Row Adding](#row-adding) +- [Row Actions](#row-actions) +- [Search](#search) +- [Keyboard Navigation](#keyboard-navigation) +- [Toolbar](#toolbar) +- [Excel & CSV Export](#excel--csv-export) +- [Key Rules](#key-rules) + +--- + +## Sorting + +```razor + + + +``` + +Programmatic sort: + +```razor +@code { + public IgbGrid Grid { get; set; } + + void SortByPrice() + { + Grid.SortAsync(new IgbSortingExpression[] + { + new IgbSortingExpression { FieldName = "Price", Dir = SortingDirection.Desc } + }); + } + + void ClearSort() => Grid.ClearSortAsync(); +} +``` + +Multi-column sort: hold Shift while clicking headers, or pass multiple `IgbSortingExpression` objects to `SortAsync`. + +--- + +## Filtering + +```razor + + + + + + + + + +``` + +Programmatic filter: + +```csharp +Grid.FilterAsync("Price", 100, IgbFilteringOperand.LessThan); +Grid.ClearFilterAsync("Price"); +Grid.ClearFilterAsync(); // clear all +``` + +--- + +## Advanced Filtering + +Use Advanced Filtering when users need a condition builder across multiple columns. + +```razor + + + + + + + +``` + +Always confirm toolbar child component names and filtering expression APIs from `grid-advanced-filtering`. + +--- + +## Column Pinning + +```razor + + + + +@code { + void PinName() => Grid.PinColumnAsync("ProductName", 0); + void UnpinName() => Grid.UnpinColumnAsync("ProductName"); +} +``` + +Pin from toolbar: `` child inside `IgbGridToolbar`. + +--- + +## Column Hiding + +```razor + +