igniteui-cli 15.2.2 → 15.3.1-beta.1

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/grid-migration.md

@@ -0,0 +1,322 @@
+# Grid Migration - Grid Lite → Premium IgbGrid
+
+> **Part of the [`igniteui-blazor-grids`](../SKILL.md) skill hub.**
+> For `IgbGrid` setup and column configuration — see [`structure.md`](./structure.md).
+> For specialized grid types including `IgbGridLite` — see [`types.md`](./types.md).
+> For cell and row editing after migration — see [`editing.md`](./editing.md).
+
+## Contents
+
+- [When to Migrate from Grid Lite to IgbGrid](#when-to-migrate-from-grid-lite-to-igbgrid)
+- [Setup](#setup)
+- [Minimal Migration Example](#minimal-migration-example)
+- [Component and API Changes](#component-and-api-changes)
+- [Cell Templates](#cell-templates)
+- [Header Templates](#header-templates)
+- [Remote Data](#remote-data)
+- [Programmatic Sort / Filter](#programmatic-sort--filter)
+- [Common Enterprise Features](#common-enterprise-features)
+- [Cleanup After Migration](#cleanup-after-migration)
+- [Key Rules](#key-rules)
+
+---
+
+## When to Migrate from Grid Lite to IgbGrid
+
+Migrate when you need any of the following features (not available in `IgbGridLite`):
+
+| Feature | Grid Lite | Premium Grid (`IgbGrid`) |
+|---|---|---|
+| Cell editing | ✗ | ✓ `Editable` on column, `RowEditable` on grid |
+| Batch editing (with undo) | ✗ | ✗ (not supported in Blazor) |
+| Row adding / deleting | ✗ | ✓ `RowEditable` + `IgbActionStrip` |
+| Row selection | ✗ | ✓ `RowSelection="GridSelectionMode.Single|Multiple"` |
+| Cell selection | ✗ | ✓ `CellSelection` |
+| Column selection | ✗ | ✓ `ColumnSelection` |
+| Paging | ✗ | ✓ `IgbPaginator` child |
+| GroupBy | ✗ | ✓ `GroupingExpressions` (IgbGrid only) |
+| Column summaries | ✗ | ✓ `HasSummary` on `IgbColumn` |
+| Column pinning | ✗ | ✓ `Pinned` on `IgbColumn` |
+| Column moving | ✗ | ✓ `Moving="true"` on grid |
+| Master-detail rows | ✗ | ✓ `IgbGrid` row expansion |
+| Excel / CSV export (toolbar) | ✗ | ✓ `IgbGridToolbarExporter` |
+| Column hiding toolbar | ✗ | ✓ `IgbGridToolbarHiding` |
+| Column pinning toolbar | ✗ | ✓ `IgbGridToolbarPinning` |
+| Advanced filtering UI | ✗ | ✓ `IgbGridToolbarAdvancedFiltering` |
+| State persistence | ✗ | ✓ `IgbGridState` |
+| Clipboard operations | ✗ | ✓ `ClipboardOptions` |
+| Action strip | ✗ | ✓ `IgbActionStrip` |
+| Row drag and drop | ✗ | ✓ `RowDraggable="true"` |
+
+---
+
+## Setup
+
+### 1. Replace the NuGet package registration
+
+```csharp
+// Remove:
+builder.Services.AddIgniteUIBlazor(typeof(IgbGridLiteModule));
+
+// Add:
+builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule));
+```
+
+### 2. Replace the CSS link in `index.html`
+
+```html
+<!-- Remove: -->
+<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
+
+<!-- Add: -->
+<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+<link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
+```
+
+### 3. Update `_Imports.razor`
+
+`IgniteUI.Blazor.Controls` covers both `IgbGridLite` and `IgbGrid` — no change needed if already present.
+
+```razor
+@using IgniteUI.Blazor.Controls
+```
+
+---
+
+## Minimal Migration Example
+
+```razor
+<!-- Before: -->
+<IgbGridLite TItem="Product" Data="@products">
+    <IgbGridLiteColumn Field="Name" Header="Name" DataType="GridLiteColumnDataType.String" Sortable Filterable Resizable />
+    <IgbGridLiteColumn Field="Price" Header="Price" DataType="GridLiteColumnDataType.Number" />
+</IgbGridLite>
+
+<!-- After: -->
+<IgbGrid @ref="grid" Data="@products" PrimaryKey="Id" AutoGenerate="false"
+         Width="100%" Height="600px" AllowFiltering="true">
+    <IgbColumn Field="Name" Header="Name" DataType="GridColumnDataType.String" Sortable="true" Filterable="true" Resizable="true" />
+    <IgbColumn Field="Price" Header="Price" DataType="GridColumnDataType.Number" Sortable="true" />
+</IgbGrid>
+
+@code {
+    private IgbGrid grid = default!;
+    private List<Product> products = new();
+}
+```
+
+**Key additions vs Grid Lite:**
+- `PrimaryKey` — required for editing, selection, and row-targeted APIs
+- `Height` — required for row virtualization
+- `AllowFiltering="true"` on the grid — enables the filter row UI; `Filterable="true"` on a column opts that column in
+- `@ref` — required for programmatic API access
+
+---
+
+## Component and API Changes
+
+| Grid Lite | Premium Grid |
+|---|---|
+| `IgbGridLite` | `IgbGrid` |
+| `IgbGridLiteColumn` | `IgbColumn` |
+| `GridLiteColumnDataType` | `GridColumnDataType` |
+| `IgbGridLiteModule` | `IgbGridModule` |
+| `IgbGridLiteSortingExpression` | `IgbSortingExpression` |
+| `IgbGridLiteFilterExpression` | `IgbFilteringExpression` |
+| Column `Key` (in sort/filter objects) | Column `FieldName` (in sort/filter objects) |
+| `TItem` generic parameter | `TItem` (unchanged) |
+| No `PrimaryKey` | `PrimaryKey` required for most features |
+
+---
+
+## Cell Templates
+
+Grid Lite has no cell templates. In `IgbGrid`, use the `BodyTemplate` render fragment on `IgbColumn`:
+
+```razor
+<IgbColumn Field="Status" Header="Status">
+    <BodyTemplate>
+        @{
+            var cell = (IgbCellTemplateContext)context;
+            var status = cell.Cell.Value?.ToString();
+        }
+        <span style="color: @(status == "Active" ? "green" : "red")">@status</span>
+    </BodyTemplate>
+</IgbColumn>
+```
+
+| | Grid Lite | Premium Grid |
+|---|---|---|
+| Cell template | Not supported | `BodyTemplate` render fragment |
+| Cell value | — | `((IgbCellTemplateContext)context).Cell.Value` |
+| Row data | — | `((IgbCellTemplateContext)context).Cell.Row.Data` |
+| Edit template | — | `InlineEditorTemplate` render fragment |
+
+---
+
+## Header Templates
+
+Grid Lite has no header templates. In `IgbGrid`, use the `HeaderTemplate` render fragment:
+
+```razor
+<IgbColumn Field="Price" Header="Price">
+    <HeaderTemplate>
+        <strong>@((context as IgbColumnTemplateContext)?.Column.Header)</strong>
+    </HeaderTemplate>
+</IgbColumn>
+```
+
+---
+
+## Remote Data
+
+For server-side sort/filter, handle the `SortingDone` / `FilteringDone` events to reload data:
+```razor
+<IgbGrid @ref="grid" Data="@data" PrimaryKey="Id" Height="600px"
+         SortingDone="OnSortingDone" FilteringDone="OnFilteringDone">
+</IgbGrid>
+
+@code {
+    private IgbGrid grid = default!;
+    private List<MyItem> data = new();
+
+
+    private async Task OnSortingDone(IgbSortingExpressionEventArgs args)
+    {
+        data = await DataService.SortAsync(args.Detail);
+        StateHasChanged();
+    }
+
+    private async Task OnFilteringDone(IgbFilteringExpressionsTreeEventArgs args)
+    {
+        data = await DataService.FilterAsync(args.Detail);
+        StateHasChanged();
+    }
+}
+```
+
+---
+
+## Programmatic Sort / Filter
+
+```razor
+@code {
+    private IgbGrid grid = default!;
+
+    // Sort
+    private async Task SortByName()
+    {
+        await grid.SortAsync(new IgbSortingExpression[]
+        {
+            new IgbSortingExpression { FieldName = "Name", Dir = SortingDirection.Asc }
+        });
+    }
+
+    private async Task ClearSorting() => await grid.ClearSortAsync();
+
+    // Filter
+    private void FilterActive()
+    {
+        var tree = new IgbFilteringExpressionsTree() { Operator = FilteringLogic.And };
+        tree.FilteringOperands = new IgbFilteringExpression[]
+        {
+            new IgbFilteringExpression { FieldName = "IsActive", ConditionName = "true", SearchVal = true }
+        };
+        grid.FilteringExpressionsTree = tree;
+    }
+
+    private async Task ClearFilters() => await grid.ClearFilterAsync();
+}
+```
+
+> In Grid Lite, sort/filter expressions used a `Key` property. In `IgbGrid`, use `FieldName`.
+
+---
+
+## Common Enterprise Features
+
+### Editing
+
+```razor
+<IgbGrid Data="@data" PrimaryKey="Id" RowEditable="true" Height="600px">
+    <IgbColumn Field="Name" Editable="true" />
+    <IgbColumn Field="Price" Editable="true" DataType="GridColumnDataType.Number" />
+</IgbGrid>
+```
+
+See [`editing.md`](./editing.md) for cell editing, row editing, validation, and custom editors.
+
+### Row Selection
+
+```razor
+<IgbGrid Data="@data" PrimaryKey="Id" RowSelection="GridSelectionMode.Multiple" Height="600px">
+    <IgbColumn Field="Name" />
+</IgbGrid>
+
+@code {
+    // Read selected rows via grid.SelectedRows
+}
+```
+
+### Paging
+
+```razor
+<IgbGrid Data="@data" PrimaryKey="Id" Height="600px">
+    <IgbPaginator PerPage="15" />
+    <IgbColumn Field="Name" />
+</IgbGrid>
+```
+
+See [`paging-remote.md`](./paging-remote.md) for remote paging and paginator configuration.
+
+### Summaries
+
+```razor
+<IgbColumn Field="Price" DataType="GridColumnDataType.Number" HasSummary="true" />
+```
+
+### Toolbar + Export
+
+```razor
+<IgbGrid Data="@data" PrimaryKey="Id" Height="600px">
+    <IgbGridToolbar>
+        <IgbGridToolbarTitle>Products</IgbGridToolbarTitle>
+        <IgbGridToolbarActions>
+            <IgbGridToolbarHiding />
+            <IgbGridToolbarPinning />
+            <IgbGridToolbarAdvancedFiltering />
+            <IgbGridToolbarExporter ExportExcel="true" ExportCSV="true" />
+        </IgbGridToolbarActions>
+    </IgbGridToolbar>
+    <IgbColumn Field="Name" />
+    <IgbColumn Field="Price" />
+</IgbGrid>
+```
+
+See [`features.md`](./features.md) for toolbar customization, export events, grouping, summaries, and action strip.
+
+---
+
+## Cleanup After Migration
+
+1. Remove `IgbGridLiteModule` registration from `Program.cs`.
+2. Remove the `IgniteUI.Blazor.GridLite` CSS `<link>` from `index.html`.
+3. Rename all `IgbGridLite` → `IgbGrid`, `IgbGridLiteColumn` → `IgbColumn` in `.razor` files.
+4. Replace `GridLiteColumnDataType` → `GridColumnDataType` enum values.
+5. In sort/filter expression objects, rename the `Key` property → `FieldName`.
+6. Remove the `IgniteUI.Blazor.GridLite` NuGet package if no `IgbGridLite` instances remain:
+   ```bash
+   dotnet remove package IgniteUI.Blazor.GridLite
+   ```
+
+---
+
+## Key Rules
+
+- `PrimaryKey` is required for editing, selection, row APIs, and `IgbActionStrip` — Grid Lite had no equivalent.
+- `Height` (or a CSS-constrained container) is required for row virtualization in `IgbGrid`.
+- `AllowFiltering="true"` must be set on the grid to show the filter row; `Filterable="true"` on a column opts that column in.
+- Cell and header templates use Blazor render fragments (`BodyTemplate`, `HeaderTemplate`, `InlineEditorTemplate`) — not callbacks or delegates.
+- For remote data, handle `SortingDone` / `FilteringDone` and reload `Data` from your server.
+- `IgbColumn.FieldName` (in expression objects) replaces `IgbGridLiteColumn.Key` used in Grid Lite sort/filter expressions.
+

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-theming/SKILL.md

@@ -252,7 +252,7 @@ Base CSS and instructions on what the MCP tools return and what the reference fi
 7. **Use `igc-*` selectors in CSS**, not Razor component names such as `IgbButton`
 8. **Use `::part()` only after confirming part names with Blazor docs**, and prefer design tokens when a token exists
 9. **Surface color must match the variant**; use a light surface for `light` and a dark surface for `dark`
-10. **Only one built-in theme CSS file should be active at a time** to avoid conflicting variables and component styles
+10. **Only one built-in theme CSS file should be active at a time**; link only one theme stylesheet in the host page (e.g., `_content/IgniteUI.Blazor/themes/light/bootstrap.css`) to avoid conflicts
 
 ## Related Skills
 

package/templates/react/igr-ts/projects/_base/files/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
+    "@igniteui/material-icons-extended": "^3.0.2",
     "element-internals-polyfill": "^3.0.2",
     "functions-have-names": "^1.2.3",
     "igniteui-react": "~19.7.0",

package/templates/react/igr-ts/projects/_base/files/src/app/app.tsx

@@ -3,6 +3,8 @@ import { Outlet } from "react-router-dom";
 export default function App() {
 
   return (
-    <Outlet />
-  )
+    <div className="outer-wrapper">
+      <Outlet />
+    </div>
+  );
 }

package/templates/react/igr-ts/projects/_base/files/src/setupTests.ts

@@ -4,6 +4,18 @@ import ResizeObserver from 'resize-observer-polyfill';
 export function setupTestMocks() {
   globalThis.ResizeObserver = ResizeObserver;
 
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation(query => ({
+      matches: true,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+
   HTMLElement.prototype.scrollIntoView = vi.fn();
   HTMLElement.prototype.hidePopover = vi.fn();
   HTMLElement.prototype.showPopover = vi.fn();

package/templates/react/igr-ts/projects/_base/files/styles.css

@@ -14,6 +14,12 @@ html, body, #root {
   height: 100%;
 }
 
+.outer-wrapper {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
 /* minor CSS reset */
 body, h1, h2, h3, h4, h5, h6, p {
   margin: 0;

package/templates/react/igr-ts/projects/_base_with_home/files/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>IgniteUI for React</title>
+    <title>Ignite UI for React</title>
+    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
     <link rel="stylesheet" href="./styles.css">
   </head>
   <body>

package/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/home.tsx

@@ -1,24 +1,74 @@
 import logo from "/logo.svg";
+import { github } from "@igniteui/material-icons-extended";
+import { IgrIcon, registerIconFromText } from "igniteui-react";
 import styles from "./style.module.css";
 
-export default function App() {
-  const name = '$(name)';
+registerIconFromText(github.name, github.value, "imx-icons");
 
+export default function App() {
   return (
-    <div className="app">
-      <div className={styles.app__name}>{name}</div>
-      <header className={styles.header}>
-        <img src={logo} className={styles.logo} alt="logo" />
-        <p>Welcome to Ignite UI for React!</p>
+    <main className={styles.content}>
+      <h1 className={styles.header}>Welcome to Ignite UI for React!</h1>
+      <h4 className={styles.subject}>
+        A complete library of 50+ UI components for building modern web applications with reusable React components.
+      </h4>
+      <img src={logo} className={styles.logo} alt="Ignite UI for React" />
+
+      <p className={styles.subtitle}>Discover more at</p>
+      <p>
         <a
           className={styles.link}
           target="_blank"
           href="https://www.infragistics.com/products/ignite-ui-react"
           rel="noopener noreferrer"
         >
-          Learn More
+          www.infragistics.com/products/ignite-ui-react
+        </a>
+      </p>
+      <p>
+        <a
+          className={styles.link}
+          target="_blank"
+          href="https://www.infragistics.com/products/indigo-design"
+          rel="noopener noreferrer"
+        >
+          www.infragistics.com/products/indigo-design
         </a>
-      </header>
-    </div>
+      </p>
+
+      <p className={styles.subtitle}>We are also on GitHub</p>
+      <p className={styles.githubLinks}>
+        <span className={styles.githubItem}>
+          <IgrIcon
+            className={styles.githubIcon}
+            name="github"
+            collection="imx-icons"
+          />
+          <a
+            className={styles.githubLink}
+            target="_blank"
+            href="https://github.com/IgniteUI/igniteui-react"
+            rel="noopener noreferrer"
+          >
+            Ignite UI for React
+          </a>
+        </span>
+        <span className={styles.githubItem}>
+          <IgrIcon
+            className={styles.githubIcon}
+            name="github"
+            collection="imx-icons"
+          />
+          <a
+            className={styles.githubLink}
+            target="_blank"
+            href="https://github.com/IgniteUI/igniteui-cli"
+            rel="noopener noreferrer"
+          >
+            Ignite UI CLI
+          </a>
+        </span>
+      </p>
+    </main>
   );
 }

package/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/style.module.css

@@ -1,36 +1,95 @@
-:local(.logo) {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
+:local(.content) {
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  padding: 24px;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+  color: #000;
 }
 
 :local(.header) {
-  padding-top: 5em;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: #333;
+  color: #09f;
+  font-size: 80px;
+  font-weight: 300;
+  line-height: 1.2;
+  margin: 0 0 16px;
+}
+
+:local(.subject) {
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1.4;
+  margin: 0 0 32px;
+  max-width: 1120px;
+}
+
+:local(.logo) {
+  display: block;
+  margin-bottom: 32px;
+  width: 500px;
+  height: 350px;
+  max-width: 100%;
+  object-fit: contain;
 }
 
 :local(.link) {
-  color: #61dafb;
+  font-size: 16px;
+}
+
+:local(.subtitle) {
+  font-size: 16px;
+  margin: 16px 0 8px;
+}
+
+:local(.content) p:nth-last-child(2) {
+  padding-top: 16px;
 }
 
-:local(.app__name) {
-  padding-top: 1em;
+:local(.githubLinks) {
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  gap: 24px;
+  margin: 0;
+}
+
+:local(.githubItem) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+:local(.githubLink) {
+  font-size: 16px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+:local(.githubIcon) {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  flex: 0 0 24px;
+  display: block;
+}
+
+:local(.content) p {
+  margin: 0 0 8px;
+}
+
+@media (max-width: 768px) {
+  :local(.header) {
+    font-size: 40px;
   }
-  to {
-    transform: rotate(360deg);
+
+  :local(.subject) {
+    font-size: 20px;
+  }
+
+  :local(.logo) {
+    width: 100%;
+    height: 240px;
   }
 }