DxGrid Class

A Grid component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxGrid :
    ParameterTrackerComponent,
    INestedSettingsOwner,
    IGridPagingParamsAccessor,
    IGrid,
    IAsyncDisposable

Remarks

The DevExpress Blazor Grid (DxGrid) allows you to display, manage, and shape tabular data.

Run Demo: Grid - Overview

Add a Grid to a Project

Follow the steps below to add the Grid component to an application:

1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
2. Add the <DxGrid>…</DxGrid> markup to a Razor page.
3. Bind the Grid to a data source.
4. Add columns to the Grid’s markup.
5. Specify other Grid options (see the feature list below).

Read Tutorial: Get Started with Grid Watch Video: Get Started with Grid

Features

The list below includes available Grid features.

Data Binding

• Synchronous Data Binding
• Asynchronous Data Binding
• Observable Data Collections
• Large Data (Server Mode Sources)
• Large Data (Queryable Collections)

Column Types

• Bound Data Columns
• Unbound Data Columns
• Command Column
• Selection Column

Sort Data

• Sort Data by Values
• Sort Data by Display Text
• Sort Data in Code
• Custom Sorting

Group Data

• Group Data in UI
• Group Data in Code
• Interval Grouping
• Custom Grouping

Edit Data

• Edit Data in Standard and Popup Edit Forms
• Validate Input

Filter Data

• Filter Row
• Filter in Code

Summary

• Total Summary
• Group Summary
• Custom Summary

Selection

• Multiple Row Selection
• Single Row Selection
• Selection in Code

Hierarchy

• Master-Detail View

Column Management

• Column Resizing
• Column Chooser

Paging and Scrolling

• Pager
• Page Size Selector
• Vertical Scrolling
• Horizontal Scrolling

Appearance

• Column Cell Display Template
• Column Header Caption Template
• Column Filter Row Cell Template
• Column Group Row Template
• Column Group Footer Template
• Column Footer Template
• Custom Display Text
• Custom Element Appearance

Troubleshooting

If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IGrid

IAsyncDisposable

Inheritance

Object

ComponentBase

DevExpress.Blazor.Internal.ParameterTrackerComponent

DxGrid