Skip to content

Commit a2957a7

Browse files
committed
Updated readme file
1 parent 376939f commit a2957a7

1 file changed

Lines changed: 48 additions & 10 deletions

File tree

README.md

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,53 @@
1-
# Blazor Datagrid Render Adaptive Layout
1+
# Blazor DataGrid Adaptive Layout
22

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.
44

5-
Documentation: https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout
5+
## Overview
66

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.
88

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
1110

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

Comments
 (0)