Example of using objectdatasource in a report using the standalone report designer for a .Net 9 Blazor app with data from the code behind of a razor page.

[Tom]

I need help using reporting in a Blazor app. I would like to create a report based on a razor page. There will be 3 values and 13 lists of entities coming from the code behind cs file that need to go to the report. This is a .Net 9 application. And I want to display it with the Blazor report viewer.

This would be an object source, and it seems very difficult to do. I cannot use the Visual Studio report designer because that is only for the legacy full Dot Net framework. I am trying to use the standalone version. Is there an up-to-date example of doing this in a Blazor application?

[Tom]

First this is not a WASM asp, it is a server app so all the processing will be on the server, and I will not be using an API to deliver the report.

The help I need is with the stand-alone designer. If I use your JSON object through parameters method, I will be passing 14 parameters, and they will all be objects. I can create the parameters, but in the designer, there will be no fields to map to the report. How do I map a property of an object passed as a parameter to a control in the designer. I imagine the properties will be unknown to the designer and I will just have to know what they are.

Strange I cannot use the object data source.

[Dimitar]

Hi Tom,

Thank you for the additional information!

Please note that even in Blazor Server applications, both the Wrapper Blazor Report Viewer and Native Blazor Report Viewer require a Reporting REST Service that they can connect to as the report viewers themselves do not render the reports, rather the service does that and returns the produced result to the viewers to be displayed - The Communication between the Viewer and the REST Service Explained - Telerik Reporting.

You may have a look at the Hosting the Reporting REST Service in ASP.NET Core with Minimal API - Telerik Reporting article for instructions on how to implement the Reporting service.

Regarding the question about the design-time usage of the data, to be able to see the fields at the design-time, the JsonDataSource(s) need to have a sample JSON in the same format as the data that will be passed at a later time via the parameter. There doesn't even need to be any actual data in the data source, only the structure and the names of the fields must be correct such as the example from the Setting the content of JsonDataSource through report parameter - Telerik Reporting KB article:

Regarding the ObjectDataSource component, the problem here is that you need to pass the data from the Blazor Report Viewer to the report. Since the report viewer itself does not render the component, it needs to send the data to the reporting service and that can be done only as a JSON. If you can change the scenario a little, so that the data can be accessed via a custom assembly or in a custom IReportSourceResolver, then there would be no need to use the JsonDataSource component.

 

[Tom]

I worked with Dimitar and came up with a solution that would render the report as a PDF and then I would display it in a PDF viewer.

You use the stand-alone report designer to create a report. For the data sources you have to use your app to generate a JSON string to create the JSON data sources. Then design your report and save it to a reports folder in your project. Your app will then load the file, find controls that need data, load the data, render it as a PDF, and then display it as a PDF in a Telerik Window.

For a test, I used the standard start project where they display a fake weather forecast of random data. This will show that data in a report rendered as a PDF in a Telerik Window.

Here is the Razor:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Telerik Report Test</h1>

<TelerikButton ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" OnClick="OpenReport">Open Report</TelerikButton>

<TelerikWindow Height="90%"
               MaxHeight="90%"
               Width="90%"
               Centered=true Modal
               @bind-Visible="@ShowReport" ThemeColor="primary">

    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowTitle><b>Print</b></WindowTitle>

    <WindowContent>

        <TelerikPdfViewer @ref="@PdfViewerRef"
                          Width="90%"
                          Height="80%"
                          Data="@PDFData">
        </TelerikPdfViewer>

    </WindowContent>

    <WindowFooter>        
    </WindowFooter>

</TelerikWindow>

And here is the C#:

using Microsoft.AspNetCore.Components;
using Telerik.Blazor.Components;
using Telerik.Reporting;
using TelerikReportTest.Data;

namespace TelerikReportTest.Pages
{
    public partial class Index
    {
        [Inject]
        private WeatherForecastService ForecastService { get; set; } = new();
        private bool ShowReport { get; set; } = false;
        private Telerik.Reporting.InstanceReportSource ReportSource { get; set; } = new();
        private WeatherForecast[]? Forecasts { get; set; }
        private byte[] PDFData { get; set; } = [];
        private TelerikPdfViewer PdfViewerRef { get; set; } = new();

        private async Task OpenReport()
        {

            Forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
            var reportProcessor = new Telerik.Reporting.Processing.ReportProcessor();

            var deviceInfo = new System.Collections.Hashtable();
            var reportPackager = new ReportPackager();
            Report report;
            using (var sourceStream = System.IO.File.OpenRead(AppDomain.CurrentDomain.BaseDirectory + "/reports/WeatherReport.trdp"))
            {
                report = (Report)reportPackager.UnpackageDocument(sourceStream);
            }

            //Use this to get a JSON string to set up JSON data source in the report designer
            //and bind the datasource of the table to the JSON data source
            //string jsonStringLR = JsonSerializer.Serialize(Forecasts.Take(1));
            //Debug.Print(jsonStringLR);

            var table1 = report.Items.Find("table1", true).FirstOrDefault() as Table;
            if(table1 != null) table1.DataSource = Forecasts;

            ReportSource = new Telerik.Reporting.InstanceReportSource() { ReportDocument = report};

            Telerik.Reporting.Processing.RenderingResult result = reportProcessor.RenderReport("PDF", ReportSource, deviceInfo);

            PDFData = result.DocumentBytes;

            ShowReport = true;

        }
    }
}

 

[Dimitar]

Hello Tom,

If I understand correctly, you would like to pass data from the Blazor client to the report through the report viewer, is that correct?

Data objects cannot be passed directly to the report from the report viewers, at least not as objects. To pass such data to the report, you can serialize the objects into JSON strings - How to serialize JSON in C# - .NET | Microsoft Learn, which can be provided to the report through string Report Parameters. 

For details on how to set up the report so that the string parameter is used by a JsonDataSource, you may have a look at the Setting the content of JsonDataSource through report parameter - Telerik Reporting KB article. A sample report can be downloaded at the end of the article.

The above example should help you with configuring the report to take data from the string parameter while the sample code below shows how to pass the data through the Native Blazor Report Viewer:

@code {
    public ReportViewer rv1 { get; set; }

    public ReportSourceOptions ReportSource { get; set; } = new ReportSourceOptions("Report1.trdp", new Dictionary<string, object>{ ));


    protected override void OnInitialized()
    {
        var weatherForecast = new WeatherForecast
            {
                Date = DateTime.Parse("2019-08-01"),
                TemperatureCelsius = 25,
                Summary = "Hot"
            };

        string jsonString = JsonSerializer.Serialize(weatherForecast);
        var rso = new  ReportSourceOptions("Report1.trdp", new Dictionary<string, object>
        {
            { "Parameter1", jsonString }
        });

        ReportSource = rso;
        base.OnInitialized();
    }
}

<ReportViewer @ref=rv1 ServiceUrl="http://localhost:59655/api/reports"
    @bind-ReportSource="@ReportSource"
    Height="800px"
    Width="100%">
</ReportViewer>

For a sample project with the Native Blazor Report Viewer, you can take a look at our ":Examples" folder - C:\Program Files (x86)\Progress\Telerik Reporting 2024 Q4\Examples\CSharp. Start the CSharp.BlazorNativeExample.VS2022.sln solution to have a look at only projects with this report viewer.

With that being said, it is generally not recommended to pass big amounts of data from the client to the server. If you have large amounts of data, I would recommend requesting it on the server, for example - via a custom IReportSourceResolver, you can have a look at the Using Custom ReportSource Resolver and Custom ReportDocument Resolver - Telerik Reporting article for more information on the topic.

I hope that the provided information and examples will help. Please let me know if you have any additional questions.

Regards,
Dimitar
Progress Telerik