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..bbedeee --- /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 `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. + +--- + +## 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. +