igniteui-angular 22.1.0-beta.0 → 22.1.0-beta.1

package/skills/igniteui-angular-grids/SKILL.md

@@ -6,29 +6,17 @@ user-invocable: true
 
 # Ignite UI for Angular — Data Grids
 
-## MANDATORY AGENT PROTOCOL — YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT
+## Required Workflow
 
-**This file is a routing hub only. It contains NO code examples and NO API details.**
+**This file is a routing hub only. It contains no code examples and no API details.** Grid APIs change between releases, so never write component selectors, import paths, method names, or property names from memory — read the relevant reference files first.
 
-> **DO NOT write any code, component selectors, import paths, method names, or property names from memory.**
-> Grid APIs change between versions. Anything generated without reading the reference files will be wrong.
-
-You are **required** to complete ALL of the following steps before producing any grid-related code or answer:
-
-**STEP 1 — Identify the grid type.**
-Use the Grid Selection Decision Guide below. If the grid type is not explicitly stated, infer it from context or ask.
-
-**STEP 2 — Identify every task category 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., remote paging AND editing requires reading both `paging-remote.md` AND `editing.md`).
-
-**STEP 3 — Read every identified reference file in full (PARALLEL).**
-Call `read_file` (or equivalent) on **all** reference files identified in Step 2 **in a single parallel batch** — do NOT read them one at a time sequentially. You must do this even if you believe you already know the answer. Do not skip, skim, or partially read a reference file.
-
-**STEP 4 — Only then produce output.**
-Base your code and explanation exclusively on what you read in Step 3. If the reference files do not cover something, say so explicitly rather than guessing.
+1. **Identify the grid type.** Use the Grid Selection Decision Guide below. If the grid type is not explicitly stated, infer it from context or ask.
+2. **Identify every task category 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., remote paging plus editing requires both `paging-remote.md` and `editing.md`).
+3. **Read every identified reference file in full**, in a single parallel batch of file reads — even if you believe you already know the answer.
+4. **Then produce output**, based only on what you read. If something is not covered by the reference files, look it up with `get_doc`/`search_docs`/`search_api` from the `igniteui-cli` MCP server when available; otherwise state explicitly that the detail is unverified instead of guessing.
 
 ### Task → Reference File
- 
+
 | Task | Reference file to read |
 |---|---|
 | Grid type selection, column config, column templates, column groups, MRL, pinning, sorting UI, filtering UI, selection | [`references/structure.md`](./references/structure.md) |
@@ -39,19 +27,20 @@ Base your code and explanation exclusively on what you read in Step 3. If the re
 | Paging, remote data, server-side ops, noop strategies, virtual scroll, multi-grid coordination | [`references/paging-remote.md`](./references/paging-remote.md) |
 | State persistence, Tree Grid / Hierarchical Grid / Pivot Grid data operations | [`references/state.md`](./references/state.md) |
 | Grid sizing (width, height, column sizing, null/px/% modes, cell spacing CSS variables) | [`references/sizing.md`](./references/sizing.md) |
+| Migrating from Grid Lite (`igx-grid-lite`) to the full `igx-grid` when features outgrow Grid Lite | [`references/grid-migration.md`](./references/grid-migration.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.
+> When in doubt, read more rather than fewer reference files — an unnecessary file read is cheap; a hallucinated API is a broken application.
 
 ---
 
 ## Overview
-This reference gives high-level guidance on grids and their features. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component and feature you're interested in.
+This skill gives high-level guidance on grids and their features. The `igniteui-cli` MCP server (when available) has **full docs for grid toolbars and export** (`grid-toolbar`, `grid-export-excel`, `exporter-pdf`, and the tree/hierarchical/pivot variants — call `list_components` to see the current catalog) and an API-member index via `search_api`/`get_api_reference` for member-level lookups. For everything else, the reference files below are the primary guidance.
 
 ---
 
 ## Prerequisites
 
-- Angular 20+ project
+- An Angular project on the major version matching the installed `igniteui-angular` package (igniteui-angular majors track Angular majors)
 - `igniteui-angular` installed, **or** `@infragistics/igniteui-angular` for licensed users — both packages share the same entry-point structure
 - A theme applied (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md))
 
@@ -75,7 +64,7 @@ After choosing the grid type, **you must still complete Steps 2–4 from the man
 
 ### Grid Types & Imports
 
-> **AGENT INSTRUCTION:** Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular`. Always import from the specific entry point. Never import from the root barrel of either package.
+> **Important:** Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular`. Always import from the specific entry point. Never import from the root barrel of either package.
 
 | Grid | Selector | Component | Directives | Entry Point |
 |---|---|---|---|---|
@@ -87,7 +76,14 @@ After choosing the grid type, **you must still complete Steps 2–4 from the man
 
 Replace `igniteui-angular` with `@infragistics/igniteui-angular` for the licensed package — entry-point paths are identical.
 
-> **AGENT INSTRUCTION — Documentation URL Pattern**: For grid-specific topics (sorting, filtering, editing, paging, etc.), docs URLs follow this naming pattern per grid type:
+### Universal Rules (every grid type)
+
+- **Use the matching component type for `viewChild`** — `IgxGridLiteComponent`, `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent`
+- **Import the matching directives bundle** from the table above — or individual imports for Grid Lite
+- **Use signals for data** — `[data]="myData()"` with `signal<T[]>([])`
+- **Virtualization is automatic** (rows and columns) — never wrap a grid in a virtual-scroll container; set a fixed `height` instead
+
+> **Important — Documentation URL Pattern**: For grid-specific topics (sorting, filtering, editing, paging, etc.), docs URLs follow this naming pattern per grid type:
 > - Grid Lite: `.../components/grid-lite/{topic}`
 > - Flat Grid: `.../components/grid/{topic}`
 > - Tree Grid: `.../components/treegrid/{topic}`
@@ -100,7 +96,7 @@ Replace `igniteui-angular` with `@infragistics/igniteui-angular` for the license
 |---|---|---|---|---|---|
 | Column sorting | Yes | Yes | Yes (per-level) | Yes (per grid level) | Per-dimension only |
 | Column filtering | Yes | Yes | Yes (recursive — keeps matching parents) | Yes (per grid level) | Per-dimension only |
-| GroupBy | No | **Exclusive** | No (use tree hierarchy) | No | Inherent via dimensions |
+| GroupBy | No | Yes (built-in `groupBy()` API) | Yes (via `igx-tree-grid-group-by-area` + grouping pipe) | No | Inherent via dimensions |
 | Paging | No | Yes | Yes | Yes (each level independent) | No |
 | Batch editing | No | Yes | Yes (hierarchical transactions) | Yes (propagated from root) | No |
 | Cell / Row editing | No | Yes | Yes | Yes (per grid level) | No |

package/skills/igniteui-angular-grids/references/data-operations.md

@@ -18,7 +18,7 @@
 
 All programmatic data operations require a reference to the grid component. Use `viewChild` with the **correct component type** for your grid.
 
-> **AGENT INSTRUCTION:** Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular`. Replace the package prefix in every import accordingly. Always use specific entry points — never the root barrel of either package.
+> **Important:** Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular`. Replace the package prefix in every import accordingly. Always use specific entry points — never the root barrel of either package.
 
 ### Flat Grid Example
 
@@ -331,7 +331,7 @@ onFilteringDone(event: IFilteringExpressionsTree) {
 
 ## Grouping (Flat Grid Only)
 
-> **NOTE**: GroupBy is **exclusive to the Flat Grid** (`igx-grid`). Tree Grid uses its natural hierarchy. Hierarchical Grid uses row islands. Pivot Grid uses dimensions.
+> **NOTE**: The programmatic `groupBy()` API is **exclusive to the Flat Grid** (`igx-grid`). Tree Grid groups via `igx-tree-grid-group-by-area` + grouping pipe (see [`features.md`](./features.md#grouping-flat-and-tree-grid-only)). Hierarchical Grid uses row islands. Pivot Grid uses dimensions.
 
 ### Template-Driven Grouping
 
@@ -401,15 +401,14 @@ const monthGroupComparer = (a: Date, b: Date) => {
 
 ## Key Rules
 
-1. **Use the correct component type for `viewChild`** — `IgxGridLiteComponent`, `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent`
-2. **Import the correct directives/components** — `IGX_GRID_DIRECTIVES`, `IGX_TREE_GRID_DIRECTIVES`, `IGX_HIERARCHICAL_GRID_DIRECTIVES`, `IGX_PIVOT_GRID_DIRECTIVES`, or individual Grid Lite imports (with `CUSTOM_ELEMENTS_SCHEMA`)
-3. **Set `dataType` on every column** — enables correct filtering operands, sorting behavior, and editors
-4. **Cancelable events** — use `event.cancel = true` in `(sorting)`, `(filtering)` to prevent the action
-5. **Use signals for data** — `[data]="myData()"` with `signal<T[]>([])`
-6. **GroupBy is Flat Grid only** — Tree Grid uses hierarchy, Hierarchical Grid uses row islands, Pivot Grid uses dimensions
-7. **Tree Grid filtering is recursive** — parents of matching children are always shown and auto-expanded
-8. **Hierarchical Grid levels are independent** — sorting/filtering don't cascade; configure on `<igx-row-island>`
-9. **Use `filteringExpressionsTree` for programmatic filtering** — `advancedFilteringExpressionsTree` is only for the advanced filtering dialog
+Universal rules (viewChild types, directive bundles, signals) are in the [hub](../SKILL.md#universal-rules-every-grid-type).
+
+1. **Set `dataType` on every column** — enables correct filtering operands, sorting behavior, and editors
+2. **Cancelable events** — use `event.cancel = true` in `(sorting)`, `(filtering)` to prevent the action
+3. **The `groupBy()` API is Flat Grid only** — Tree Grid groups via `igx-tree-grid-group-by-area` + grouping pipe (see [`features.md`](./features.md#grouping-flat-and-tree-grid-only)); Hierarchical Grid uses row islands, Pivot Grid uses dimensions
+4. **Tree Grid filtering is recursive** — parents of matching children are always shown and auto-expanded
+5. **Hierarchical Grid levels are independent** — sorting/filtering don't cascade; configure on `<igx-row-island>`
+6. **Use `filteringExpressionsTree` for programmatic filtering** — `advancedFilteringExpressionsTree` is only for the advanced filtering dialog
 
 ## See Also
 

package/skills/igniteui-angular-grids/references/editing.md

@@ -17,7 +17,7 @@
 
 ## Editing Data Through the Grid
 
-> **AGENT INSTRUCTION:** When a user says they want to "edit data through the grid", "make the grid editable", or "allow CRUD in the grid", use this section to pick the right editing mode before writing any code.
+> **Important:** When a user says they want to "edit data through the grid", "make the grid editable", or "allow CRUD in the grid", use this section to pick the right editing mode before writing any code.
 
 ### Choosing an Editing Mode
 
@@ -469,9 +469,8 @@ When grouping is enabled, summaries appear for each group. Control this with:
 4. **Batch editing requires `[primaryKey]`** — call `endEdit(true)` before `transactions.undo()`/`redo()`, commit via `transactions.commit(data)`
 5. **Cancelable events** — use `event.cancel = true` in `(cellEdit)`, `(rowEdit)`, `(rowEditEnter)`, `(cellEditEnter)` to prevent the action
 6. **Validation** — use template-driven validators on columns (`required`, `min`, `max`, `email`, `pattern`) or reactive validators via `(formGroupCreated)`
-7. **Use the correct component type for `viewChild`** — `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent`
-8. **Import the correct directives/components** — `IGX_GRID_DIRECTIVES`, `IGX_TREE_GRID_DIRECTIVES`, `IGX_HIERARCHICAL_GRID_DIRECTIVES`, or `IGX_PIVOT_GRID_DIRECTIVES`
-9. **Use signals for data** — `[data]="myData()"` with `signal<T[]>([])`
+
+Universal rules (viewChild types, directive bundles, signals) are in the [hub](../SKILL.md#universal-rules-every-grid-type).
 
 ## See Also
 

package/skills/igniteui-angular-grids/references/features.md

@@ -8,7 +8,7 @@
 ## Contents
 
 - [Editing](#editing)
-- [Grouping (Grid only)](#grouping-grid-only)
+- [Grouping (Flat and Tree Grid only)](#grouping-flat-and-tree-grid-only)
 - [Summaries](#summaries)
 - [Cell Merging](#cell-merging)
 - [Toolbar](#toolbar)
@@ -32,7 +32,12 @@ Quick reference:
 | **Row editing** (recommended default) | `[rowEditable]="true"` + `[editable]="true"` on columns + `(rowEditDone)` |
 | **Batch editing** | `[batchEditing]="true"` + `[rowEditable]="true"` + `transactions.commit(data)` |
 
-## Grouping (Grid and Tree Grid only)
+## Grouping (Flat and Tree Grid only)
+
+The two grids group differently:
+
+- **Flat Grid** has built-in GroupBy — `[groupable]="true"` on columns (not on the grid component itself) plus the `groupBy()`/`clearGrouping()` API.
+- **Tree Grid** has no `groupBy()` API — it groups via `IgxTreeGridGroupByAreaComponent` (`<igx-tree-grid-group-by-area>`) paired with the tree-grid grouping pipe that reshapes flat data into a grouped hierarchy.
 
 ```html
 <igx-grid [data]="data()" [groupsExpanded]="true">
@@ -45,7 +50,7 @@ Quick reference:
 </igx-grid>
 ```
 
-Programmatic:
+Programmatic (Flat Grid):
 
 ```typescript
 this.gridRef().groupBy({ fieldName: 'category', dir: SortingDirection.Asc });
@@ -98,9 +103,9 @@ customMerge = new PriceRangeMergeStrategy();
 
 ## Toolbar
 
-```typescript
-import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';
-```
+> **Full docs in the MCP** — `get_doc` with `grid-toolbar`, `treegrid-toolbar`, or `hierarchicalgrid-toolbar` covers title, built-in actions (hiding, pinning, advanced filtering, exporter), custom content, progress indication, and theming. Prefer those over memory.
+
+Toolbar components (`IgxGridToolbarComponent` and the action components) import from `igniteui-angular/grids/core` and nest inside the grid element:
 
 ```html
 <igx-grid [data]="data()">
@@ -113,42 +118,15 @@ import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';
       <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
     </igx-grid-toolbar-actions>
   </igx-grid-toolbar>
-
   <igx-column field="name"></igx-column>
 </igx-grid>
 ```
 
 ## Export
 
-### Excel Export
+> **Full docs in the MCP** — `get_doc` with `grid-export-excel`, `treegrid-export-excel`, `hierarchicalgrid-export-excel`, `pivotGrid-export-excel`, or `exporter-pdf` covers setup, full-data vs. visible exports, multi-column headers, customization events, and known limitations. Prefer those over memory.
 
-```typescript
-import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular/grids/core';
-
-export class MyComponent {
-  private excelExporter = inject(IgxExcelExporterService);
-
-  exportToExcel() {
-    this.excelExporter.exportData(this.data(), new IgxExcelExporterOptions('export'));
-    // Or export the grid (respects filtering/sorting)
-    this.excelExporter.export(this.grid, new IgxExcelExporterOptions('export'));
-  }
-}
-```
-
-### CSV Export
-
-```typescript
-import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core';
-
-export class MyComponent {
-  private csvExporter = inject(IgxCsvExporterService);
-
-  exportToCsv() {
-    this.csvExporter.export(this.grid, new IgxCsvExporterOptions('export', CsvFileTypes.CSV));
-  }
-}
-```
+Quick reference — exporter services (`IgxExcelExporterService`, `IgxCsvExporterService`, and their `*ExporterOptions`) import from `igniteui-angular/grids/core`; `inject()` the service and call `export(grid, options)` (respects filtering/sorting) or `exportData(data, options)` (raw data).
 
 ## Virtualization & Performance
 
@@ -228,9 +206,9 @@ Grids support copy to clipboard by default. Configure via:
 ## Key Rules
 
 1. **Cancelable events** — use `event.cancel = true` in `(rowEdit)`, `(cellEdit)`, `(sorting)`, `(filtering)` to prevent the action
-2. **Use signals** for data binding — `[data]="myData()"` with `signal<T[]>([])`
-3. **Virtualization is automatic** — don't wrap grids in virtual scroll containers
-4. **GroupBy is Flat Grid only** — Tree Grid uses hierarchy, Hierarchical Grid uses row islands, Pivot Grid uses dimensions
+2. **The `groupBy()` API is Flat Grid only** — Tree Grid groups via `igx-tree-grid-group-by-area` + grouping pipe; Hierarchical Grid uses row islands, Pivot Grid uses dimensions
+
+Universal rules (viewChild types, directive bundles, signals, virtualization) are in the [hub](../SKILL.md#universal-rules-every-grid-type).
 
 ## See Also
 

package/skills/igniteui-angular-grids/references/grid-migration.md

@@ -6,15 +6,13 @@
 
 This skill automates the migration from the **open-source Grid Lite** (`igx-grid-lite`, MIT licensed) to the **Premium Data Grid** (`igx-grid`, commercially licensed). Use it when a project outgrows Grid Lite's read-only capabilities and needs enterprise features such as editing, selection, paging, grouping, summaries, export, or state persistence.
 
-## MANDATORY AGENT PROTOCOL
+## Required Workflow
 
-> **DO NOT write any code from memory.** Grid APIs change between versions.
-
-Before producing migration code:
+Grid APIs change between releases — do not write migration code from memory. Before producing migration code:
 
 1. **Identify the current Grid Lite usage** - read the user's existing component files to understand their column configuration, templates, data binding, and any `dataPipelineConfiguration` usage.
 2. **Consult the grids skill** - read the relevant reference files from [`igniteui-angular-grids`](../SKILL.md) for the target features the user needs after migration.
-3. **Use the MCP server** - call `mcp_igniteui-cli_get_doc` or `mcp_igniteui-cli_search_docs` for Angular to verify current API details when in doubt.
+3. **Use the MCP server when in doubt** - call `get_doc` or `search_docs` from the `igniteui-cli` MCP server (if available) for Angular to verify current API details.
 4. **Only then produce output** - base all code on verified references, not memory.
 
 ---
@@ -29,7 +27,7 @@ Migrate from Grid Lite to the Premium Grid when the user needs **any** of these
 | Row adding / deleting | No | Yes |
 | Row / Cell / Column selection | No | Yes |
 | Paging (client or remote) | No | Yes |
-| GroupBy | No | Yes (exclusive to flat grid) |
+| GroupBy | No | Yes |
 | Summaries (built-in & custom) | No | Yes |
 | Column pinning | No | Yes |
 | Column moving | No | Yes |
@@ -53,7 +51,7 @@ Migrate from Grid Lite to the Premium Grid when the user needs **any** of these
 
 Grid Lite uses the separate `igniteui-grid-lite` npm package. The Premium Grid is part of the main `igniteui-angular` (or `@infragistics/igniteui-angular`) package.
 
-> **AGENT INSTRUCTION:** Check `package.json` to determine which package variant is installed. If only `igniteui-grid-lite` is present, the user needs to install the full package.
+> **Important:** Check `package.json` to determine which package variant is installed. If only `igniteui-grid-lite` is present, the user needs to install the full package.
 
 ```bash
 # Open-source package
@@ -318,7 +316,7 @@ export class DataViewComponent {
 | `(sorting)` | `(sorting)` | Both cancelable |
 | `(sorted)` | `(sortingDone)` | Name changed |
 | `(filtering)` | `(filtering)` | Both cancelable |
-| `(filtered)` | `(filteringDone)` | Name changed |
+| `(filtered)` | `(filteringDone)` | Name changed. For **remote** filtering, bind `(filteringExpressionsTreeChange)` instead — see Step 6 and [`paging-remote.md`](./paging-remote.md) |
 
 ### Step 8 - Migrate Programmatic Sort/Filter API
 

package/skills/igniteui-angular-grids/references/paging-remote.md

@@ -378,10 +378,8 @@ export class MasterDetailComponent {
 2. **Remote data requires noop strategies** — apply `NoopSortingStrategy` and `NoopFilteringStrategy` to disable client-side operations when the server handles them
 3. **Track sort/filter state for remote operations** — store current expressions and include them in every server request
 4. **Debounce rapid virtual scroll** — use `debounceTime` on `(dataPreLoad)` to avoid flooding the server
-5. **Virtualization is automatic** — don't wrap grids in virtual scroll containers; just set a fixed `height`
-6. **Use the correct component type for `viewChild`** — `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent`
-7. **Import the correct directives/components** — `IGX_GRID_DIRECTIVES`, `IGX_TREE_GRID_DIRECTIVES`, `IGX_HIERARCHICAL_GRID_DIRECTIVES`, or `IGX_PIVOT_GRID_DIRECTIVES`
-8. **Use signals for data** — `[data]="myData()"` with `signal<T[]>([])`
+
+Universal rules (viewChild types, directive bundles, signals, virtualization) are in the [hub](../SKILL.md#universal-rules-every-grid-type).
 
 ## See Also
 

package/skills/igniteui-angular-grids/references/state.md

@@ -94,11 +94,11 @@ restoreState() {
 Column templates are also not serialized. Use the `columnInit` event to reassign them:
 
 ```typescript
-@ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef<any>;
+activeTemplate = viewChild.required<TemplateRef<any>>('activeTemplate');
 
 onColumnInit(column: IgxColumnComponent) {
   if (column.field === 'IsActive') {
-    column.bodyTemplate = this.activeTemplate;
+    column.bodyTemplate = this.activeTemplate();
   }
 }
 ```
@@ -290,9 +290,8 @@ this.pivotGridRef().sortDimension(this.pivotConfig.rows[0], SortingDirection.Des
 3. **Hierarchical Grid levels are independent** — sorting/filtering/paging don't cascade; configure on `<igx-row-island>`
 4. **Pivot Grid is read-only** — no editing, paging, or standard filtering/sorting; use `pivotConfiguration` for all data operations
 5. **Grid Lite has its own API** — uses `IgxGridLiteSortingExpression`/`IgxGridLiteFilteringExpression` (NOT `ISortingExpression`/`FilteringExpressionsTree`), `dataPipelineConfiguration` for remote ops (NOT noop strategies), and has no editing, grouping, paging, summaries, or selection
-6. **Use the correct component type for `viewChild`** — `IgxGridLiteComponent`, `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent`
-7. **Import the correct directives/components** — `IGX_GRID_DIRECTIVES`, `IGX_TREE_GRID_DIRECTIVES`, `IGX_HIERARCHICAL_GRID_DIRECTIVES`, `IGX_PIVOT_GRID_DIRECTIVES`, or individual Grid Lite imports (with `CUSTOM_ELEMENTS_SCHEMA`)
-8. **Use signals for data** — `[data]="myData()"` with `signal<T[]>([])`
+
+Universal rules (viewChild types, directive bundles, signals) are in the [hub](../SKILL.md#universal-rules-every-grid-type).
 
 ## See Also
 

package/skills/igniteui-angular-grids/references/structure.md

@@ -19,7 +19,7 @@
 
 ### Imports
 
-> **AGENT INSTRUCTION:** Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular`. Always import from the specific entry point of whichever package is installed. Never import from the root barrel of either package.
+> **Important:** Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular`. Always import from the specific entry point of whichever package is installed. Never import from the root barrel of either package.
 
 ```typescript
 // Open-source package — import from specific entry points
@@ -161,7 +161,16 @@ Create complex cell layouts spanning multiple rows/columns:
 
 Or programmatically: `this.gridRef().pinColumn('name')`.
 
-## Sorting
+### Column Moving
+
+Enable column moving (drag-to-reorder headers) with `[moving]="true"` on the grid.
+There is no [movable] input on <igx-column>.
+
+```html
+<igx-grid [moving]="true" ...>
+  <igx-column field="name" ...></igx-column>
+</igx-grid>
+
 
 ```html
 <igx-grid
@@ -255,15 +264,13 @@ Events: `(rowSelectionChanging)`, `(columnSelectionChanging)`, `(selected)` (cel
 
 ## Key Rules
 
+Universal rules (viewChild types, directive bundles, signals, virtualization) are in the [hub](../SKILL.md#universal-rules-every-grid-type).
+
 1. **Pick the right grid type first** — see the [hub](../SKILL.md) for the decision guide
 2. **Always set `[primaryKey]`** — required for editing, selection, row operations (Flat, Tree, Hierarchical, Pivot grids; NOT Grid Lite)
-3. **Import the correct directives/components** — `IGX_GRID_DIRECTIVES`, `IGX_TREE_GRID_DIRECTIVES`, `IGX_HIERARCHICAL_GRID_DIRECTIVES`, `IGX_PIVOT_GRID_DIRECTIVES`, or individual Grid Lite imports
-4. **Use the right component type for `viewChild`** — `IgxGridLiteComponent`, `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent`
-5. **Set `[autoGenerate]="false"`** and define columns explicitly for production grids (except Pivot Grid where columns are auto-generated)
-6. **Set `dataType` on every column** for correct filtering, sorting, editing, and summaries
-7. **Use signals** for data binding — `[data]="myData()"` with `signal<T[]>([])`
-8. **Virtualization is automatic** — don't wrap grids in virtual scroll containers
-9. **Omit `width` on generated `<igx-column>` elements.** Columns without `width` equally share available grid width. Only set `width` when the user explicitly asks for fixed or percentage column sizing. If column widths are used, at least one column must not have a specified width so that it fills the remaining space in the grid.
+3. **Set `[autoGenerate]="false"`** and define columns explicitly for production grids (except Pivot Grid where columns are auto-generated)
+4. **Set `dataType` on every column** for correct filtering, sorting, editing, and summaries
+5. **Omit `width` on generated `<igx-column>` elements.** Columns without `width` equally share available grid width. Only set `width` when the user explicitly asks for fixed or percentage column sizing. If column widths are used, at least one column must not have a specified width so that it fills the remaining space in the grid.
 
 ## See Also
 

package/skills/igniteui-angular-grids/references/types.md

@@ -167,7 +167,7 @@ The **lightest grid option** — an open-source (MIT licensed) Web Component wit
 
 > **When to recommend Grid Lite vs. Flat Grid**: If the user only needs to display data with basic sorting/filtering and doesn't need editing, batch operations, paging, grouping, summaries, or export, Grid Lite is the lighter, faster choice. If any of those enterprise features are needed, **upgrade strictly to `igx-grid` (`IgxGridComponent`)** from `igniteui-angular/grids/grid` — do NOT recommend other non-grid components as a substitute.
 
-> **AGENT INSTRUCTION — Grid Lite → Grid Upgrade**: When a user is working with `igx-grid-lite` and you identify that their requirements exceed Grid Lite's capabilities (e.g., they need editing, selection, paging, grouping, summaries, export, row operations, or any feature not available in Grid Lite), you MUST recommend upgrading to `igx-grid` (`IgxGridComponent`). Never suggest a different component type — the upgrade path from Grid Lite is always to `igx-grid`. Replace `IgxGridLiteComponent` with `IgxGridComponent`, update imports from `igniteui-angular/grids/lite` to `igniteui-angular/grids/grid`, use `IGX_GRID_DIRECTIVES` instead of individual Grid Lite imports, and remove `CUSTOM_ELEMENTS_SCHEMA`.
+> **Important — Grid Lite → Grid Upgrade**: When a user is working with `igx-grid-lite` and you identify that their requirements exceed Grid Lite's capabilities (e.g., they need editing, selection, paging, grouping, summaries, export, row operations, or any feature not available in Grid Lite), you MUST recommend upgrading to `igx-grid` (`IgxGridComponent`). Never suggest a different component type — the upgrade path from Grid Lite is always to `igx-grid`. Replace `IgxGridLiteComponent` with `IgxGridComponent`, update imports from `igniteui-angular/grids/lite` to `igniteui-angular/grids/grid`, use `IGX_GRID_DIRECTIVES` instead of individual Grid Lite imports, and remove `CUSTOM_ELEMENTS_SCHEMA` if it was added for direct web-component usage. See [`grid-migration.md`](./grid-migration.md) for the full migration checklist.
 
 ### Installation
 
@@ -180,7 +180,7 @@ npm install igniteui-grid-lite
 ### Setup
 
 ```typescript
-import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, viewChild } from '@angular/core';
 import {
   IgxGridLiteComponent,
   IgxGridLiteColumnComponent,
@@ -196,7 +196,6 @@ import {
     IgxGridLiteCellTemplateDirective,
     IgxGridLiteHeaderTemplateDirective
   ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],  // Required — Grid Lite is a Web Component
   templateUrl: './users-lite.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -359,7 +358,7 @@ These features are **NOT available** in Grid Lite:
 ### Grid Lite Key Differences from Flat Grid
 
 - **Separate package**: `npm install igniteui-grid-lite`
-- **Requires `CUSTOM_ELEMENTS_SCHEMA`** in the component's `schemas`
+- **`CUSTOM_ELEMENTS_SCHEMA` is not required** — the `IgxGridLiteComponent` Angular wrapper declares it internally; add it to your component's `schemas` only when using the underlying web component tag directly
 - **No directives bundle** — import `IgxGridLiteComponent`, `IgxGridLiteColumnComponent`, and template directives individually
 - **No `[primaryKey]`** — not needed (no editing, selection, or row operations)
 - **No editing** of any kind (cell, row, batch)
@@ -430,35 +429,17 @@ export class PivotGridBasicSampleComponent {
 </igx-pivot-grid>
 ```
 
-```json
+```typescript
+// Data shape — nested objects are flattened via memberFunction:
 export const DATA = [
-    {
-        Product: {
-            Name: 'Clothing',
-            UnitPrice: '12.814860936633712'
-        },
-        Seller: {
-            Name: 'Stanley Brooker',
-            City: 'Seattle'
-        },
-        Date: '2007-01-01T00:00:00',
-        Value: '94.2652032683907',
-        NumberOfUnits: '282'
-    },
-    {
-        Product: {
-            Name: 'Clothing',
-            UnitPrice: '49.579375120615296'
-        },
-        Seller: {
-            Name: 'Elisa Longbottom',
-            City: 'Sofia'
-        },
-        Date: '2007-01-05T00:00:00',
-        Value: '70.798922689072285',
-        NumberOfUnits: '296'
-    }
-    ...
+  {
+    Product: { Name: 'Clothing', UnitPrice: '12.81' },
+    Seller: { Name: 'Stanley Brooker', City: 'Seattle' },
+    Date: '2007-01-01T00:00:00',
+    Value: '94.27',
+    NumberOfUnits: '282'
+  },
+  // ...
 ];
 ```
 
@@ -466,6 +447,11 @@ export const DATA = [
 
 Provide a drag-and-drop UI for users to reshape the pivot interactively:
 
+```typescript
+// Component class — reference the pivot grid instance for the selector
+pivotGridRef = viewChild.required<IgxPivotGridComponent>('pivotGrid');
+```
+
 ```html
 <igx-pivot-data-selector [grid]="pivotGridRef()"></igx-pivot-data-selector>
 <igx-pivot-grid #pivotGrid [data]="salesData()" [pivotConfiguration]="pivotConfig"></igx-pivot-grid>
@@ -486,7 +472,7 @@ Provide a drag-and-drop UI for users to reshape the pivot interactively:
 1. **Tree Grid**: use `[primaryKey]` + `[foreignKey]` for flat data or `[childDataKey]` for nested objects; filtering is recursive (parents of matching children are always shown)
 2. **Hierarchical Grid**: sorting/filtering/paging are independent per level; configure features on the `<igx-row-island>` blueprint
 3. **Pivot Grid is read-only** — editing, paging, pinning, column moving, row dragging are all disabled; use `pivotConfiguration` for all data operations
-4. **Grid Lite requires `CUSTOM_ELEMENTS_SCHEMA`** and `igniteui-grid-lite` npm package — it has no editing, selection, paging, or export
+4. **Grid Lite requires the `igniteui-grid-lite` npm package** — it has no editing, selection, paging, or export; `CUSTOM_ELEMENTS_SCHEMA` is not needed when using the `IgxGridLiteComponent` wrapper
 5. **Omit `width` on generated `<igx-grid-lite-column>` elements.** Columns without `width` equally share available grid width. Only set `width` when the user explicitly asks for it. If column widths are used, at least one column must not have a specified width so that it fills the remaining space in the grid.
 
 ## See Also