Devexpress Blazor Grid

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 |

# 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.

1. Apply a theme and add client scripts in App.razor inside ``:

``razor @using DevExpress.Blazor @DxResourceManager.RegisterTheme(Themes.Fluent) @DxResourceManager.RegisterScripts() ``

1. Add the namespace to _Imports.razor:

``razor @using DevExpress.Blazor ``

Before You Start — Ask the Developer

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)

@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

@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 | Currently selected data items (two-way bindable) | | PageSize | int | Rows per page (default 20) | | VirtualScrollingEnabled | bool | Set to true to enable virtual scrolling; false by default | | VirtualScrollingMode | GridVirtualScrollingMode | Rows (default — row virtualization only), Columns (column virtualization only), RowsAndColumns (both); ignored when VirtualScrollingEnabled is false | | ShowGroupPanel | bool | Show/hide the group panel | | ShowSearchBox | bool | Show/hide the search box | | AllowSort | bool | Enable/disable sorting globally | | ExportToCsvAsync() | Task | Export data to CSV | | ExportToXlsxAsync() | Task | Export data to XLS/XLSX | | ExportToPdfAsync() | Task | Export data to PDF | | Reload() | void | Refresh grid data — do not await | | BeginUpdate() / EndUpdate() | void | Batch parameter changes | | DetailRowTemplate | RenderFragment | Template for the expandable detail row; context.DataItem is the master row's data item | | DetailRowDisplayMode | GridDetailRowDisplayMode | Auto (default — expandable detail rows; users expand/collapse), Never (detail rows hidden), Always (detail rows always shown as preview strips; cannot be collapsed) | | AutoCollapseDetailRow | bool | Collapse the previously expanded detail row when another is expanded | | ExpandDetailRow(int) | void | Expand the detail row at the specified visible row index | | CollapseDetailRow(int) | void | Collapse the detail row at the specified visible row index | | CollapseAllDetailRows() | void | Collapse all expanded detail rows | | IsDetailRowExpanded(int) | bool | Returns true if the detail row at the specified index is expanded | | AllowDragRows | bool | Allows users to start drag-and-drop row operations | | AllowedDropTarget | GridAllowedDropTarget | Controls where rows dragged FROM this grid can land. None — cannot reorder or drop onto other components; Internal (default) — rows can be reordered within this grid only; External — rows can be dropped onto other components (not reordered internally); All — rows can be reordered within this grid AND dropped onto other components | | ItemsDropped | EventCallback | Fires when rows are dropped onto this grid; update the data source here | | DropTargetMode | GridDropTargetMode | BetweenRows (default) — drop between rows; Component — drop onto the grid as a whole | | DragHintTextTemplate | RenderFragment | Custom drag hint displayed while dragging |

DxGridDataColumn

| Property | Type | Description | |---|---|---| | FieldName | string | Data source field to bind the column to | | Caption | string | Column header text | | Width | string | Column width (e.g., "150px", "20%") | | DisplayFormat | string | Format string for display values | | SortOrder | GridColumnSortOrder | Ascending or Descending | | SortIndex | int | Order of this column in multi-column sort | | AllowSort | bool | Allow user sorting for this column | | AllowGroup | bool | Allow grouping by this column | | AllowFilter | bool | Allow column filter menu | | UnboundExpression | string | Expression for calculated unbound columns | | GroupInterval | GridColumnGroupInterval | Date/number interval for grouped values |

GridEditModelSavingEventArgs

| Member | Type | Description | |---|---|---| | EditModel | object | The edit model (a copy of the data item) — cast to your type | | DataItem | object | The original data item (null when IsNew is true) | | IsNew | bool | true when a new row is being created | | CopyChangesToDataItem() | void | Copies edit model changes to the original data item | | Reload | bool | Set to true to reload grid data after the handler completes — use instead of Grid.Reload() when no @ref is held |

GridDataItemDeletingEventArgs

| Member | Type | Description | |---|---|---| | DataItem | object | The data item to delete — cast to your type | | Reload | bool | Set to true to reload grid data after the handler completes — use instead of Grid.Reload() when no @ref is held |

GridDetailRowTemplateContext

| Member | Type | Description | |---|---|---| | DataItem | object | The master row's data item — cast to your model type to pass as a parameter to the detail component |

GridItemsDroppedEventArgs

| Member | Type | Description | |---|---|---| | DroppedItems | IReadOnlyList | The data items that were dragged — cast each to your model type | | TargetItem | object | The row near which the drop occurred; null if dropped at the end of the list | | TargetItemVisibleIndex | int | The visible row index of TargetItem | | DropPosition | GridItemDropPosition | Before or After relative to TargetItem | | Grid | IGrid | The target grid that received the drop | | SourceComponent | object | The component that the rows originated from; cast to IGrid for grid-to-grid scenarios | | GetTargetDataSourceIndexAsync() | Task | Returns the zero-based index in the data source where the dropped items should be inserted |

Common Patterns

Pattern 1: Editing with EF Core

    
        
        
        
        
    
    
        
            
                @editFormContext.GetEditor("FirstName")
            
            
                @editFormContext.GetEditor("LastName")
            
        
    


@code {
    IEnumerable Employees { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [DevExpress](https://github.com/DevExpress)
- **Source:** [DevExpress/agent-skills](https://github.com/DevExpress/agent-skills)
- **License:** MIT
- **Homepage:** https://www.devexpress.com

Install and usage instructions live in the source repository linked above.