Ignite UI for Blazor - Data Grids

How to use this skill

1. Pick the grid type from the [decision guide](#choosing-a-grid-type).
2. Read every reference file matching the request (in one parallel batch) — a request often spans several, e.g. remote paging plus editing needs paging-remote.md and editing.md.
3. If the igniteui-cli MCP server is available, call getdoc(framework: "blazor", name: "<slug>") for the grid and each feature, and searchapi / getapireference for exact signatures. MCP output wins over this skill on any conflict.
4. Write code from what you read. Grid APIs differ sharply between Ignite UI's Angular, React, and Blazor products — do not carry syntax over from another framework, and say so plainly when something is not covered rather than guessing.

Without the MCP server this skill still works — the reference files are self-contained. Do not configure MCP unprompted; if the user wants it, see [MCP server (optional)](#mcp-server-optional).

Routing table

Choosing a grid type

Ask in order:

1. Read-only display with sorting, filtering, and virtualization but no editing, selection, or paging → IgbGridLite (MIT, separate package).
2. Pivot analytics — rows/columns/values users can drag to reshape → IgbPivotGrid.
3. Parent-child where each level has a different schema (Companies → Departments → Employees) → IgbHierarchicalGrid.
4. Parent-child within one schema (ManagerId self-reference, or a nested children array) → IgbTreeGrid.
5. Flat table needing enterprise features (editing, grouping, paging, export) → IgbGrid.

When Grid Lite's capabilities run out, the upgrade path is always IgbGrid — never a non-grid component. See [grid-migration.md](./references/grid-migration.md).

Grids are not included in IgniteUI.Blazor.Lite.

Prerequisites

The grid-specific stylesheet is easy to miss and is required whenever any full-featured grid is on the page. Full setup detail lives in the components skill's [setup.md](../igniteui-blazor-components/references/setup.md).

Feature availability

Batch editing is not available in Blazor on any grid type. Supported editing modes are cell editing and row editing only — never generate batch-editing code.

Grid-wide rules

• Set PrimaryKey. Selection, editing, row-targeted APIs, and state persistence all depend on it.
• Set Height. Row virtualization only activates with a fixed height; without one every row renders to the DOM.
• Prefer AutoGenerate="false" so column order, types, and templates are explicit.
• Set DataType on every column — it drives the filter conditions, sort comparison, editor, and formatting.
• Data must be a materialized collection (List<T>, T[]), not IQueryable or JSON.
• Use @ref for programmatic access, and only after first render — the reference is null in OnInitialized.
• Do not set column Width unless asked. Without widths the grid distributes space proportionally and fills the container; fixed widths usually leave a gap on the right.
• Docs slugs follow components/grid-lite/{topic} and components/grids/{grid|treegrid|hierarchicalgrid|pivotgrid}/{topic}.

MCP server (optional)

igniteui-cli provides listcomponents, getdoc, searchdocs, searchapi, getapireference, all taking framework: "blazor". To enable it, add to .vscode/mcp.json (VS Code, key servers):

{ "servers": { "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli", "mcp"] } } }

Or .cursor/mcp.json / claudedesktopconfig.json (key mcpServers):

{ "mcpServers": { "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli", "mcp"] } } }

Reload the editor afterwards. JetBrains: Settings → Tools → AI Assistant → MCP Servers, command npx, arguments igniteui-cli mcp.

Related skills

• [igniteui-blazor-components](../igniteui-blazor-components/SKILL.md) — every non-grid component, plus charts
• [igniteui-blazor-theming](../igniteui-blazor-theming/SKILL.md) — themes, palettes, design tokens