Blazor DataGrid - Client Data Binding

This sample explains about how to bind the Blazor DataGrid with data from WebAPI using GetJsonAsync method.

Overview

This sample demonstrates client-side data binding in a Blazor DataGrid using remote data fetched from a WebAPI endpoint. It showcases the integration between a Blazor WebAssembly client and a backend API controller.

Features

• Remote Data Binding — Bind grid data from WebAPI using GetJsonAsync method
• Fast Rendering — Virtualization and row/column virtualization for large datasets
• Data Operations — Sorting, filtering, grouping, and searching capabilities
• Editing Modes — Inline, batch, and dialog editing modes
• Column Features — Template columns, column resizing, reordering, and freezing
• Export — Excel and PDF export (requires additional Syncfusion export packages)

Prerequisites

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

Getting Started

Clone the repository

git clone https://github.com/SyncfusionExamples/Blazor-DataGrid-Client-Data-Binding.git
cd Blazor-DataGrid-Client-Data-Binding

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.

References

Documentation: https://blazor.syncfusion.com/documentation/datagrid/data-binding/remote-data

Online example: https://blazor.syncfusion.com/demos/datagrid/remote-data?theme=bootstrap5