devexpress/agent-skills/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

# 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 <head>:

``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

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<T>, IEnumerable<T>), EF Core (DbSet<T> or EntityInstantFeedbackSource), IQueryable<T>, 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<T>, IListSource, IQueryable<T>, GridDevExtremeDataSource<T>, 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<T> for automatic UI refresh

Core Entry Point (Razor)

@rendermode InteractiveServer
 
<DxGrid Data="@Items" KeyFieldName="Id">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="Name" />
        <DxGridDataColumn FieldName="Date" DisplayFormat="d" />
    </Columns>
</DxGrid>

Documentation & Navigation Guide

Getting Started

📄 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

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

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

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

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

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

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

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<T> data sources
• Use GetTargetDataSourceIndexAsync() for simplified insertion-index calculation
• Customize the drag hint with DragHintTextTemplate

Examples

💻 examples/quickstart.razor — In-memory CRUD with EditRow, grouping, search box, summaries, and export 💻 examples/ef-core-crud.razor — Full EF Core CRUD with IDbContextFactory, async save/delete, and data reload 💻 examples/filter-panel-custom-date-operators.razor — FilterPanelDisplayMode with a custom Filter Builder that removes month operators for DueDate 💻 examples/custom-templates.razor — CellDisplayTemplate (badge rendering), EditFormTemplate with DxFormLayout, HeaderCaptionTemplate 💻 examples/drag-and-drop.razor — Row reordering within one grid and moving rows between two grids using ObservableCollection<T>

Quick Start Example

@page "/grid-demo"
@rendermode InteractiveServer
@inject WeatherForecastService ForecastService
 
<DxGrid @ref="Grid"
        Data="@Forecasts"
        KeyFieldName="Id"
        EditMode="GridEditMode.EditRow"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        ShowGroupPanel="true"
        ShowSearchBox="true"
        PageSize="10">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="Date" DisplayFormat="d" SortOrder="GridColumnSortOrder.Ascending" SortIndex="0" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="Temp (°C)" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="Date" />
    </TotalSummary>
</DxGrid>
 
@code {
    IGrid Grid { get; set; }
    List<WeatherForecast> 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