Blazor DataGrid Adaptive Layout

A quick-start project demonstrating how to implement responsive adaptive UI patterns using the Blazor DataGrid component.

Overview

This sample application illustrates the Blazor DataGrid's adaptive UI capabilities, enabling your grid to render differently on mobile and desktop devices. The adaptive layout provides an intuitive user interface that adjusts to various screen sizes while maintaining full functionality including sorting, filtering, paging, and CRUD operations.

Features

• Responsive Adaptive Rendering - DataGrid automatically switches between mobile and desktop layouts based on screen size
• Mobile-optimized Dialog Editing - Edit operations use touch-friendly dialogs on mobile devices instead of inline editing
• Excel-style Filtering - Advanced filtering capabilities with Excel-like filter UI
• Data Sorting & Paging - Sort columns and paginate through large datasets efficiently
• Complete CRUD Toolbar - Add, Edit, Delete, Update, and Cancel operations with search functionality

Prerequisites

• .NET SDK 10.0 or later
• Visual Studio 2022 or later
• Visual Studio Code

Getting Started

Clone the Repository

git clone https://github.com/SyncfusionExamples/blazor-datagrid-render-adaptive-layout.git
cd blazor-datagrid-render-adaptive-layout

Run with Visual Studio

1. Open the solution file using Visual Studio 2022 or later.
2. Restore the NuGet packages by rebuilding the solution.
3. Build the project to ensure there are no compilation errors.
4. Run the project.

Run with .NET CLI

# Restore dependencies
dotnet restore

# Run the project
dotnet run

References

Documentation: https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout

Online example: https://blazor.syncfusion.com/demos/datagrid/adaptive-rendering?theme=fluent