From a8f8fd53c760d9f26ed952ccd2b86d201eaccc59 Mon Sep 17 00:00:00 2001 From: mstoyanova Date: Tue, 2 Jun 2026 21:24:22 +0300 Subject: [PATCH 1/4] feat(): add skill for migrating from Grid Lite to Premium Data Grid --- .../grid-lite-to-igr-grid-migration/SKILL.md | 274 ++++++++++++++++++ 1 file changed, 274 insertions(+) create mode 100644 skills/grid-lite-to-igr-grid-migration/SKILL.md diff --git a/skills/grid-lite-to-igr-grid-migration/SKILL.md b/skills/grid-lite-to-igr-grid-migration/SKILL.md new file mode 100644 index 0000000..e36fc3f --- /dev/null +++ b/skills/grid-lite-to-igr-grid-migration/SKILL.md @@ -0,0 +1,274 @@ +--- +name: grid-lite-to-igr-grid-migration +description: Step-by-step migration guide from Grid Lite (IgrGridLite) to the premium Ignite UI for React Data Grid (IgrGrid), covering every import, registration, component name, property, event, template, sorting, filtering, and toolbar API change. +user-invocable: true +--- + +# Ignite UI for React — Grid Lite → Premium Data Grid Migration + +## MANDATORY AGENT PROTOCOL + +> **DO NOT write any code from memory.** Grid APIs change between versions. + +Before producing migration code: + +1. **Read the user's existing component files** to understand current Grid Lite usage (columns, templates, data binding, `dataPipelineConfiguration`). +2. **Use the MCP server** — call `mcp_igniteui-cli_get_doc` or `mcp_igniteui-cli_search_docs` with `framework: "react"` to confirm API details when in doubt. +3. **Only then produce output** — base all code on verified references, not memory. + +--- + +## When to Migrate from Grid Lite to Premium Grid + +Migrate when you need any of the following features (not available in Grid Lite): + +| Feature | Grid Lite | Premium Grid (`IgrGrid`) | +|---|---|---| +| Cell editing | ✗ | ✓ `editable`, `rowEditable` | +| Batch editing (with undo) | ✗ | ✓ Transaction service | +| Row adding / deleting | ✗ | ✓ `rowEditable` + `IgrActionStrip` | +| Row selection | ✗ | ✓ `rowSelection="single|multiple"` | +| Cell selection | ✗ | ✓ `cellSelection` | +| Column selection | ✗ | ✓ `columnSelection` | +| Paging | ✗ | ✓ `IgrPaginator` child | +| GroupBy | ✗ | ✓ `groupingExpressions` | +| Column summaries | ✗ | ✓ `hasSummary` on `IgrColumn` | +| Column pinning | ✗ | ✓ `pinned` on `IgrColumn` | +| Column moving | ✗ | ✓ `moving={true}` on grid | +| Master-detail rows | ✗ | ✓ `IgrGrid` row expansion | +| Excel / CSV export (toolbar) | ✗ | ✓ `IgrGridToolbarExporter` | +| Column hiding toolbar | ✗ | ✓ `IgrGridToolbarHiding` | +| Column pinning toolbar | ✗ | ✓ `IgrGridToolbarPinning` | +| Advanced filtering UI | ✗ | ✓ `filterMode="excelStyleFilter"` / `IgrGridToolbarAdvancedFiltering` | +| State persistence | ✗ | ✓ `IgrGridState` directive | +| Clipboard operations | ✗ | ✓ `clipboardOptions` | +| Action strip | ✗ | ✓ `IgrActionStrip` | +| Row drag and drop | ✗ | ✓ `rowDraggable={true}` | + +--- + +## Setup + +```bash +npm install --save igniteui-react-grids +# licensed: npm install --save @infragistics/igniteui-react-grids +``` + +```tsx +import { IgrGridModule, IgrGrid, IgrColumn, IgrPaginator, + IgrCellTemplateContext, IgrColumnTemplateContext } from "igniteui-react-grids"; +import "igniteui-react-grids/grids/themes/light/bootstrap.css"; + +// Required once before render — Grid Lite has no equivalent +IgrGridModule.register(); +``` + +> Use `@infragistics/igniteui-react-grids` and the matching CSS path for the licensed package. +> Check `package.json` — `igniteui-grid-lite` may be a standalone dependency alongside `igniteui-react`. + +--- + +## Minimal Migration Example + +```tsx +import { useRef, useState } from "react"; +import { IgrGrid, IgrColumn, IgrGridModule } from "igniteui-react-grids"; +import "igniteui-react-grids/grids/themes/light/bootstrap.css"; +IgrGridModule.register(); + +export default function MyView() { + const gridRef = useRef(null); + const [data] = useState([]); + + return ( + + + + + ); +} +``` + +**Key additions vs Grid Lite:** +- `primaryKey` — required for editing, selection, row-targeted APIs +- `height` — required for row virtualization +- `allowFiltering={true}` on the grid — required for filter UI; `filterable={true}` on the column opts that column in + +--- + +## Cell Templates + +Prop renamed: `cellTemplate` → `bodyTemplate`. Context type changes. + +```tsx +import { IgrCellTemplateContext } from "igniteui-react-grids"; + +const statusCell = (ctx: IgrCellTemplateContext) => ( + + {ctx.cell.value} + +); + + +``` + +| | Grid Lite | Premium Grid | +|---|---|---| +| Prop | `cellTemplate` | `bodyTemplate` | +| Value | `ctx.value` | `ctx.cell.value` or `ctx.implicit` | +| Row data | `ctx.row.data` | `ctx.cell.row.data` | +| Edit template | — | `inlineEditorTemplate` | + +--- + +## Header Templates + +Prop name unchanged (`headerTemplate`); context type changes to `IgrColumnTemplateContext` from `igniteui-react-grids`. + +```tsx +import { IgrColumnTemplateContext } from "igniteui-react-grids"; + +const priceHeader = (ctx: IgrColumnTemplateContext) => ( + {ctx.column.header} +); + + +``` + +--- + +## Remote Data (replaces `dataPipelineConfiguration`) + +For server-side operations, disable local sort/filter processing first by assigning noop strategies, then listen to the done events to issue new requests. + +```tsx +import { IgrGrid, IgrGridModule, + IgrNoopSortingStrategy, IgrNoopFilteringStrategy } from "igniteui-react-grids"; + +// Disable built-in sort/filter so the grid does not process data locally. +// Set these once after the grid mounts (e.g., in a useEffect or ref callback). +useEffect(() => { + if (!gridRef.current) return; + gridRef.current.sortStrategy = IgrNoopSortingStrategy.instance(); + gridRef.current.filterStrategy = IgrNoopFilteringStrategy.instance(); +}, []); +``` + +```tsx +const handleSortingDone = async () => { + if (!gridRef.current) return; + setData(await dataService.sort(gridRef.current.sortingExpressions)); +}; +const handleFilteringDone = async () => { + if (!gridRef.current) return; + setData(await dataService.filter(gridRef.current.filteringExpressionsTree)); +}; + + + {/* columns */} + +``` + +--- + +## Programmatic Sort / Filter + +```tsx +import { SortingDirection, IgrNumberFilteringOperand } from "igniteui-react-grids"; + +// fieldName + SortingDirection enum (not key + string) +gridRef.current.sort([{ fieldName: 'name', dir: SortingDirection.Asc, ignoreCase: true }]); +gridRef.current.clearSort('name'); // or clearSort() for all + +// Positional args with operand +// Note: verify IgrNumberFilteringOperand.instance() is available in your version +gridRef.current.filter('age', 21, IgrNumberFilteringOperand.instance().condition('greaterThan')); +gridRef.current.clearFilter('age'); // or clearFilter() for all +``` + +--- + +## Common Enterprise Features + +### Editing + +```tsx + + + +``` + +### Row Selection + +```tsx + + {/* columns */} + +// Read: gridRef.current.selectedRows +``` + +### Paging + +```tsx + + + +``` + +### Summaries + +```tsx + +``` + +### Toolbar + Export + +> **Note:** `IgrExcelExporterService` / `IgrExcelExporterOptions` (programmatic export) must be imported from `"igniteui-react"`, **not** `"igniteui-react-grids"`. The toolbar approach below does not need them. + +```tsx +import { IgrGrid, IgrColumn, IgrGridToolbar, IgrGridToolbarTitle, + IgrGridToolbarActions, IgrGridToolbarHiding, IgrGridToolbarPinning, + IgrGridToolbarExporter, IgrGridToolbarAdvancedFiltering, + IgrGridToolbarExportEventArgs, IgrGridModule } from "igniteui-react-grids"; +IgrGridModule.register(); + + + + Products + + + + + + + + {/* columns */} + +``` + +```tsx +const handleExporting = (e: IgrGridToolbarExportEventArgs) => { + e.detail.options.fileName = "MyExport"; + // set e.detail.cancel = true to abort +}; +``` + +--- + +## Cleanup After Migration + +1. Remove all `dataPipelineConfiguration` usage — replace with events (see Remote Data). +2. Remove `IgrCellContext` / `IgrHeaderContext` imports from `igniteui-react/grid-lite`. +3. Uninstall `igniteui-grid-lite` if no Grid Lite instances remain: `npm uninstall igniteui-grid-lite`. + +--- + +## Related Skills + +- **[igniteui-react-components](./igniteui-react-components/SKILL.md)** — Identify the right `Igr*` components, install, import, and use them; covers JSX patterns, events, refs, and forms. Use this after migrating to explore the full premium grid feature set. +- **[igniteui-react-customize-theme](./igniteui-react-customize-theme/SKILL.md)** — Customize `IgrGrid` styling using CSS custom properties and the Ignite UI theming system. +- **[igniteui-react-optimize-bundle-size](./igniteui-react-optimize-bundle-size/SKILL.md)** — Reduce bundle size after migrating to `igniteui-react-grids` with granular imports, tree-shaking, and lazy loading. +- **[igniteui-react-generate-from-image-design](./igniteui-react-generate-from-image-design/SKILL.md)** — Build a full React view from a screenshot or mockup using Ignite UI components and MCP-driven theming. + From 67ce682b2221ed1a73e229a4528e7c16ef8ab927 Mon Sep 17 00:00:00 2001 From: Marina Stoyanova Date: Wed, 3 Jun 2026 09:03:10 +0300 Subject: [PATCH 2/4] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- skills/grid-lite-to-igr-grid-migration/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/grid-lite-to-igr-grid-migration/SKILL.md b/skills/grid-lite-to-igr-grid-migration/SKILL.md index e36fc3f..a567216 100644 --- a/skills/grid-lite-to-igr-grid-migration/SKILL.md +++ b/skills/grid-lite-to-igr-grid-migration/SKILL.md @@ -1,4 +1,4 @@ ---- +--- name: grid-lite-to-igr-grid-migration description: Step-by-step migration guide from Grid Lite (IgrGridLite) to the premium Ignite UI for React Data Grid (IgrGrid), covering every import, registration, component name, property, event, template, sorting, filtering, and toolbar API change. user-invocable: true From 1bed7021bb1585e966a8c8b349954e4ff0bf0217 Mon Sep 17 00:00:00 2001 From: Marina Stoyanova Date: Wed, 3 Jun 2026 09:03:42 +0300 Subject: [PATCH 3/4] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- skills/grid-lite-to-igr-grid-migration/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/grid-lite-to-igr-grid-migration/SKILL.md b/skills/grid-lite-to-igr-grid-migration/SKILL.md index a567216..e2bb4b3 100644 --- a/skills/grid-lite-to-igr-grid-migration/SKILL.md +++ b/skills/grid-lite-to-igr-grid-migration/SKILL.md @@ -13,7 +13,7 @@ user-invocable: true Before producing migration code: 1. **Read the user's existing component files** to understand current Grid Lite usage (columns, templates, data binding, `dataPipelineConfiguration`). -2. **Use the MCP server** — call `mcp_igniteui-cli_get_doc` or `mcp_igniteui-cli_search_docs` with `framework: "react"` to confirm API details when in doubt. +2. **Use the MCP server** — call `get_doc` or `search_docs` with `framework: "react"` to confirm API details when in doubt. 3. **Only then produce output** — base all code on verified references, not memory. --- From aff38fed1579650343a76a10ae54961371fd01f2 Mon Sep 17 00:00:00 2001 From: Marina Stoyanova Date: Wed, 3 Jun 2026 09:03:57 +0300 Subject: [PATCH 4/4] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- skills/grid-lite-to-igr-grid-migration/SKILL.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/skills/grid-lite-to-igr-grid-migration/SKILL.md b/skills/grid-lite-to-igr-grid-migration/SKILL.md index e2bb4b3..bbedeee 100644 --- a/skills/grid-lite-to-igr-grid-migration/SKILL.md +++ b/skills/grid-lite-to-igr-grid-migration/SKILL.md @@ -267,8 +267,8 @@ const handleExporting = (e: IgrGridToolbarExportEventArgs) => { ## Related Skills -- **[igniteui-react-components](./igniteui-react-components/SKILL.md)** — Identify the right `Igr*` components, install, import, and use them; covers JSX patterns, events, refs, and forms. Use this after migrating to explore the full premium grid feature set. -- **[igniteui-react-customize-theme](./igniteui-react-customize-theme/SKILL.md)** — Customize `IgrGrid` styling using CSS custom properties and the Ignite UI theming system. -- **[igniteui-react-optimize-bundle-size](./igniteui-react-optimize-bundle-size/SKILL.md)** — Reduce bundle size after migrating to `igniteui-react-grids` with granular imports, tree-shaking, and lazy loading. -- **[igniteui-react-generate-from-image-design](./igniteui-react-generate-from-image-design/SKILL.md)** — Build a full React view from a screenshot or mockup using Ignite UI components and MCP-driven theming. +- [igniteui-react-components](../igniteui-react-components/SKILL.md) — Identify the right `Igr*` components, install, import, and use them; covers JSX patterns, events, refs, and forms. Use this after migrating to explore the full premium grid feature set. +- [igniteui-react-customize-theme](../igniteui-react-customize-theme/SKILL.md) — Customize `IgrGrid` styling using CSS custom properties and the Ignite UI theming system. +- [igniteui-react-optimize-bundle-size](../igniteui-react-optimize-bundle-size/SKILL.md) — Reduce bundle size after migrating to `igniteui-react-grids` with granular imports, tree-shaking, and lazy loading. +- [igniteui-react-generate-from-image-design](../igniteui-react-generate-from-image-design/SKILL.md) — Build a full React view from a screenshot or mockup using Ignite UI components and MCP-driven theming.