# Blazor Viewer Custom Store

## Content

This sample demonstrates how to inject custom data into a report at runtime in the Blazor Viewer using the [LocateDataSource](/activereportsnet/api/v20.1/MESCIUS.ActiveReports.Web.Viewer/GrapeCity.ActiveReports.Web.Viewer.IReportViewerBackendApi.LocateDataSource.html) callback available in the JS Viewer API.
![Screenshot 2025-06-13 120816](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/Screenshot%202025-06-13%20120816.6ce6b5.png?width=800&verticalAlign=middle)

### Sample Location

[https://github.com/activereports/WebSamples20/tree/main/BlazorViewer_CustomStore](https://github.com/activereports/WebSamples20/tree/main/BlazorViewer_CustomStore)

### **Overview**

The data used in the report is loaded from external sources at runtime and passed from the Blazor application to the JS Viewer using the [LocateDataSource](/activereportsnet/api/v20.1/MESCIUS.ActiveReports.Web.Viewer/GrapeCity.ActiveReports.Web.Viewer.IReportViewerBackendApi.LocateDataSource.html) callback during report rendering.

### **Details**

| Item | Description |
| ---- | ----------- |
| **Viewer Component** | Integrates the JS Viewer into a Blazor application to support runtime customization. |
| [LocateDataSource](/activereportsnet/api/v20.1/MESCIUS.ActiveReports.Web.Viewer/GrapeCity.ActiveReports.Web.Viewer.IReportViewerBackendApi.LocateDataSource.html) | A callback function that matches a report ID and returns an array of custom data sources to be used during rendering. |
| **Data Initialization** | The data used in the report is loaded from external sources at runtime and passed from the Blazor application to the JS Viewer using the `LocateDataSource` callback during report rendering. |
| **Use Cases** | Suitable for dynamic reporting scenarios where data is generated or modified at runtime. |

### See Also

Developers
[Blazor WebDesigner API](/activereportsnet/docs/v20.1/developers/create-applications/blazor-web-designer-application/web-designer-api-blazor)