--- name: devexpress-blazor-grid description: Build and configure the DevExpress Blazor Grid (DxGrid) — a full-featured data grid for Blazor Server, WebAssembly, and Hybrid apps. Use when binding tabular data (IEnumerable/IQueryable/EF Core/server-mode/custom sources), enabling sorting/filtering/grouping/search, implementing CRUD editing (row/edit form/popup/cell), handling selection and focused rows, exporting to CSV/XLSX/PDF, customizing templates and summaries, and supporting large datasets with virtualization. Also use for DxGrid, DevExpress grid, Blazor data grid, virtual scrolling, server mode, and grid feature comparisons or migration scenarios. compatibility: Requires .NET 8, 9, or 10. NuGet package DevExpress.Blazor is available on NuGet.org. A valid DevExpress license is required. Most features require an interactive render mode (InteractiveServer, InteractiveWebAssembly, or InteractiveAuto). metadata: author: DevExpress version: "26.1" source-commit: 8493730c9e9a47a009fc307a37c307e157663819 --- # DevExpress Blazor Grid `DxGrid` is a high-performance data grid for Blazor applications. It supports data binding to in-memory collections, Entity Framework Core, server-mode sources, and custom data sources. Key feature areas include sorting, grouping, filtering, multi-mode editing (edit row, edit form, popup, cell), row selection, data export (CSV/XLS/PDF), column templates, summaries, and drag-and-drop row reordering. ## When to Use This Skill - Display tabular data from any .NET data source in a Blazor page - Implement CRUD operations (create, update, delete rows) with built-in edit forms - Sort, group, filter, and search grid data in the UI or programmatically - Export data to CSV, XLSX, or PDF with custom formatting - Enable row selection (single or multiple) and act on selected data - Add column chooser, resize, reorder, and freeze (pin) columns - Use virtual scrolling for large in-memory datasets - Bind to large remote datasets via EF Core server-mode sources - Customize cell appearance using templates and `CustomizeElement` - Add a toolbar, context menu, or summary rows to the grid ## Prerequisites & Installation ### NuGet Package | Package | Purpose | |---|---| | `DevExpress.Blazor` | Grid + all standard Blazor UI components | ```bash # Install from NuGet.org: dotnet add package DevExpress.Blazor ``` ### Setup (existing project) 1. Register DevExpress resources in `Program.cs`: ```csharp builder.Services.AddDevExpressBlazor(); ``` > **v26.1 note**: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API. 2. Apply a theme and add client scripts in `App.razor` inside ``: ```razor @using DevExpress.Blazor @DxResourceManager.RegisterTheme(Themes.Fluent) @DxResourceManager.RegisterScripts() ``` 3. Add the namespace to `_Imports.razor`: ```razor @using DevExpress.Blazor ``` ## Before You Start — Ask the Developer If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's `AskUserQuestion` tool or GitHub Copilot's `askQuestions` tool. If no such tool is available, ask the questions directly in the chat response before generating code. Before generating code, ask: 1. **Render mode**: Are you using `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`? (Grid requires an interactive mode for sorting, filtering, editing, and paging.) 2. **Data source**: Are you binding to a simple in-memory collection (`List`, `IEnumerable`), EF Core (`DbSet` or `EntityInstantFeedbackSource`), `IQueryable`, or a custom data source (`GridCustomDataSource`)? 3. **Features needed**: Do you need editing (which mode: EditRow, EditForm, PopupEditForm, EditCell)? Export? Selection? Virtual scrolling? 4. **Key field**: Does your data model have a primary key property? (Required for editing, selection, and server-mode sources.) 5. **New or existing project?**: Are you adding the grid to an existing project or starting fresh? > Ask before generating. Render mode and data source type significantly affect the code. ## Component Overview `DxGrid` provides: - **Data Binding** (`Data`, `KeyFieldName`): Binds to `IEnumerable`, `IListSource`, `IQueryable`, `GridDevExtremeDataSource`, or `GridCustomDataSource` - **Column Types** (`DxGridDataColumn`, `DxGridCommandColumn`, `DxGridSelectionColumn`, `DxGridBandColumn`): Bound, unbound, command, selection, and band columns - **Data Shaping** (`AllowSort`, `ShowGroupPanel`, `ShowSearchBox`, `FilterPanelDisplayMode`): Sort, group, filter row, filter panel, search box - **Editing** (`EditMode`, `EditModelSaving`, `DataItemDeleting`): EditRow, EditForm, PopupEditForm, EditCell modes - **Selection** (`SelectionMode`, `SelectedDataItems`): Single and multiple row selection - **Export** (`ExportToCsvAsync`, `ExportToXlsxAsync`, `ExportToPdfAsync`): CSV, XLS/XLSX, and PDF export - **Paging & Scrolling** (`PageSize`, `VirtualScrollingEnabled`, `VirtualScrollingMode`): Pager and virtual scrolling - **Summary** (`TotalSummary`, `GroupSummary`, `DxGridSummaryItem`): Total and group aggregate summaries — Sum, Min, Max, Avg, Count — displayed in the grid footer - **Focused Row** (`FocusedRowEnabled`): Highlights a single row on click; exposes `FocusedRowIndex` and `FocusedDataItem` for programmatic access - **Toolbar** (`ToolbarTemplate`): Embed a toolbar at the top of the Grid with custom action buttons and data shaping controls - **Master-Detail** (`DetailRowTemplate`, `ExpandDetailRow`, `CollapseDetailRow`): Expandable detail rows with nested grids or arbitrary content; the detail template receives the master row's data item via `context.DataItem` - **Drag-and-Drop** (`AllowDragRows`, `AllowedDropTarget`, `ItemsDropped`): Row reordering within the same grid or moving rows between grids; requires `ObservableCollection` for automatic UI refresh ### Core Entry Point (Razor) ```razor @rendermode InteractiveServer ``` ## Documentation & Navigation Guide ### Getting Started 📄 [references/getting-started.md](references/getting-started.md) When you need to: - Set up the Grid from scratch in a new or existing Blazor project - Create your first grid with columns and data binding - Enable interactive render mode for the grid page ### Data Binding 📄 [references/data-binding.md](references/data-binding.md) When you need to: - Bind to an in-memory list, `IQueryable`, EF Core DbSet - Use `EntityInstantFeedbackSource` or `EntityServerModeSource` for large datasets - Configure a `GridCustomDataSource` for Web API / OData backends - Understand which features are available per data-binding mode ### Columns & Templates 📄 [references/columns-and-templates.md](references/columns-and-templates.md) When you need to: - Add, configure, or hide columns (`FieldName`, `Caption`, `Width`, `Visible`) - Customize cell display or edit templates (`CellDisplayTemplate`, `CellEditTemplate`) - Add a command column (New / Edit / Delete buttons) - Create unbound columns with `UnboundExpression` - Use band (header) columns to group related columns ### Editing & Validation 📄 [references/editing-and-validation.md](references/editing-and-validation.md) When you need to: - Enable row editing in EditRow, EditForm, PopupEditForm, or EditCell mode - Handle `EditModelSaving` and `DataItemDeleting` events - Customize the edit form using `EditFormTemplate` - Validate user input with data annotations ### Data Shaping 📄 [references/data-shaping.md](references/data-shaping.md) When you need to: - Sort by one or multiple columns programmatically or in the UI - Group rows and configure group summaries - Add filter row, filter panel, search box, or column filter menu - Show the filter panel or customize filter-builder operators for a specific field - Create total and group summary items ### Export 📄 [references/export.md](references/export.md) When you need to: - Export grid data to CSV, XLS/XLSX, or PDF - Customize exported cell styles, fonts, or document headers/footers - Export only selected rows ### Selection 📄 [references/selection.md](references/selection.md) When you need to: - Enable single or multiple row selection - Get/set `SelectedDataItem` or `SelectedDataItems` - Add a `DxGridSelectionColumn` with checkboxes - Select rows programmatically using `SelectRow`, `SelectDataItem` ### Drag-and-Drop 📄 [references/drag-and-drop.md](references/drag-and-drop.md) When you need to: - Enable row reordering within one grid (`AllowDragRows` + `AllowedDropTarget.Internal`) - Move rows between two grids (`AllowedDropTarget.External` on source, `All` on target) - Handle `ItemsDropped` to update `ObservableCollection` data sources - Use `GetTargetDataSourceIndexAsync()` for simplified insertion-index calculation - Customize the drag hint with `DragHintTextTemplate` ### Examples 💻 [examples/quickstart.razor](examples/quickstart.razor) — In-memory CRUD with EditRow, grouping, search box, summaries, and export 💻 [examples/ef-core-crud.razor](examples/ef-core-crud.razor) — Full EF Core CRUD with `IDbContextFactory`, async save/delete, and data reload 💻 [examples/filter-panel-custom-date-operators.razor](examples/filter-panel-custom-date-operators.razor) — `FilterPanelDisplayMode` with a custom Filter Builder that removes month operators for `DueDate` 💻 [examples/custom-templates.razor](examples/custom-templates.razor) — `CellDisplayTemplate` (badge rendering), `EditFormTemplate` with `DxFormLayout`, `HeaderCaptionTemplate` 💻 [examples/drag-and-drop.razor](examples/drag-and-drop.razor) — Row reordering within one grid and moving rows between two grids using `ObservableCollection` ## Quick Start Example ```razor @page "/grid-demo" @rendermode InteractiveServer @inject WeatherForecastService ForecastService @code { IGrid Grid { get; set; } List Forecasts { get; set; } protected override void OnInitialized() { Forecasts = ForecastService.GetForecast(); } void OnEditModelSaving(GridEditModelSavingEventArgs e) { var model = (WeatherForecast)e.EditModel; if (e.IsNew) Forecasts.Add(model); else e.CopyChangesToDataItem(); Grid.Reload(); } void OnDataItemDeleting(GridDataItemDeletingEventArgs e) { Forecasts.Remove((WeatherForecast)e.DataItem); Grid.Reload(); } } ``` ### What This Does Displays a weather forecast list with inline row editing, a delete button, sorting by date, a group panel, a search box, and a total count summary. Clicking the pencil icon opens editors inline; clicking delete prompts for removal. ## Key Properties & API Surface ### DxGrid | Property / Method | Type | Description | |---|---|---| | `Data` | `object` | Binds the grid to any supported data source | | `KeyFieldName` | `string` | Primary key field for editing and selection | | `EditMode` | `GridEditMode` | EditRow, EditForm, PopupEditForm, EditCell | | `SelectionMode` | `GridSelectionMode` | Single or Multiple | | `SelectedDataItems` | `IReadOnlyList