|
1 | | -# Blazor Datagrid Render Adaptive Layout |
| 1 | +# Blazor DataGrid Adaptive Layout |
2 | 2 |
|
3 | | -A quick-start project that helps you how to design the adaptive layout in Blazor DataGrid component. |
| 3 | +A quick-start project demonstrating how to implement responsive adaptive UI patterns using the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component. |
4 | 4 |
|
5 | | -Documentation: https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout |
| 5 | +## Overview |
6 | 6 |
|
7 | | -Online examples: https://blazor.syncfusion.com/demos/datagrid/adaptive-rendering?theme=fluent |
| 7 | +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. |
8 | 8 |
|
9 | | -## Project prerequisites |
10 | | -Make sure that you have the latest versions of 'Visual Studio 2022' in your machine before starting to work on this project. |
| 9 | +## Features |
11 | 10 |
|
12 | | -## How to run this application? |
13 | | -• To run this application, you need to first clone the <code>blazor-datagrid-render-adaptive-layout</code> repository and then open it in Visual Studio 2022. |
14 | | -• Register the syncfusion license key in Program.cs file, if you have any doubt check the documentation link : https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application |
15 | | -• Now, simply build and run your project to view the output. |
| 11 | +- **Responsive Adaptive Rendering** - DataGrid automatically switches between mobile and desktop layouts based on screen size |
| 12 | +- **Mobile-optimized Dialog Editing** - Edit operations use touch-friendly dialogs on mobile devices instead of inline editing |
| 13 | +- **Excel-style Filtering** - Advanced filtering capabilities with Excel-like filter UI |
| 14 | +- **Data Sorting & Paging** - Sort columns and paginate through large datasets efficiently |
| 15 | +- **Complete CRUD Toolbar** - Add, Edit, Delete, Update, and Cancel operations with search functionality |
| 16 | + |
| 17 | +## Prerequisites |
| 18 | + |
| 19 | +* [.NET SDK 10.0](https://dotnet.microsoft.com/en-us/download/dotnet/10.0) or later |
| 20 | +* [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) or later |
| 21 | +* [Visual Studio Code](https://code.visualstudio.com/) |
| 22 | + |
| 23 | +## Getting Started |
| 24 | + |
| 25 | +### Clone the Repository |
| 26 | + |
| 27 | +```bash |
| 28 | +git clone https://github.com/SyncfusionExamples/blazor-datagrid-render-adaptive-layout.git |
| 29 | +cd blazor-datagrid-render-adaptive-layout |
| 30 | +``` |
| 31 | + |
| 32 | +### Run with Visual Studio |
| 33 | + |
| 34 | +1. Open the solution file using Visual Studio 2022 or later. |
| 35 | +2. Restore the NuGet packages by rebuilding the solution. |
| 36 | +3. Build the project to ensure there are no compilation errors. |
| 37 | +4. Run the project. |
| 38 | + |
| 39 | +### Run with .NET CLI |
| 40 | + |
| 41 | +```bash |
| 42 | +# Restore dependencies |
| 43 | +dotnet restore |
| 44 | + |
| 45 | +# Run the project |
| 46 | +dotnet run |
| 47 | +``` |
| 48 | + |
| 49 | +## References |
| 50 | + |
| 51 | +**Documentation**: https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout |
| 52 | + |
| 53 | +**Online example**: https://blazor.syncfusion.com/demos/datagrid/adaptive-rendering?theme=fluent |
0 commit comments