Blazor Grid Examples

• Mar 24, 2026
• 3 minutes to read

The DevExpress Blazor Grid ships with GitHub feature-based examples.

Data Binding

• Bind the Grid to a DataTable object
• Bind the Grid to Data with Entity Framework Core
• Bind the Grid to an Instant Feedback Data Source and Enable Edit Operations
• Bind the Grid to a DevExtreme Data Source with Entity Framework Core
• Bind the Grid to a Web API service
• Custom Data Source Binding using Entity Framework Core
• Create a Foreign Key (ComboBox) Column
• Create and Edit Unbound Columns
• Server Mode Data Processing
• ExpandoObject Collection Support

Edit Data

• Disable Row Editing Depending on Row Values
• Enable Batch Data Editing with Entity Framework Core
• Inline Editing
• Edit a Row on a Separate Page
• Create a Custom Record Deletion Confirmation Dialog
• Use an External Popup as an Edit Form
• Display a Confirmation Dialog when Users Start Editing Another Row without Saving Changes
• Post Changes to an In-Memory Data Source
• Implement Cascading Combo Boxes

Validate Data

• Implement Custom Validation
• Display an Error Message from the Web API Service

Focus

• Display the Chart Based on the Grid Focus

Selection

• Delete Selected Rows
• Disable Selection Checkboxes in Specific Rows
• Select and Deselect All Rows in a Group
• Sort and Filter Data by Selection

Master-Detail View

• How to Add a Nested Grid to Create a Master-Detail Layout
• Master-Detail with partial loading

Filter Data

• Implement Filter Operator Selector
• Use the DxTagBox Control as a Filter for a Column with Multiple Values
• Implement a Date Range Filter

Sort Data

• Custom Sorting

Customization

• Conditional Formatting
• Use Icons Instead of Default Command Buttons
• Customize Group Summaries
• Implement a Kanban Board Component with the DevExpress Blazor Grid

Manage Layout

• Fit Columns to Content and Available Space
• Save and Load Layout Information
• Save and Load Extended Information about the Grid Layout
• Set Predefined Settings for the Specific Component
• Use a Dictionary to Configure the Component State

Use External Components to Manage Data

• Show the Context Menu
• Show Detail Information in DxFormLayout
• Implement CRUD-Related Buttons in Toolbar
• Use DxUpload Component to Upload Images to the Grid
• Implement a Custom Column Chooser with Integrated Sorting, Search, and Select All Capabilities
• Blazor Grid and Scheduler - Drag & Drop Items Between Components

Export

• Customize Export Settings
• Export the Grid’s Data to DOCX, HTML, and MHT Documents in a Blazor Server Application Using the DevExpress Reporting Tool
• Export the Grid’s Data to DOCX, HTML, and MHT Documents in a Blazor WebAssembly Application Using the DevExpress Reporting Tool
• Export Images/Rich Text Using Spreadsheet Document APIs
• Export Detail Views

Drag and Drop

• Implement Row Drag and Drop Functionality
• Blazor Grid and Scheduler - Drag & Drop Items Between Components

Keyboard Shortcuts

• Custom keyboard shortcuts