Telerik ReportViewer for Blazor shows "no report" in Blazor WASM ASP.NET Core hosted application

1 Answer 288 Views
Report Viewer - Blazor
Roman
Top achievements
Rank 1
Iron
Roman asked on 13 Feb 2023, 09:44 AM

Hi guys

I created a small Blazor WebAssembly (ASP.NET Core hosted) application to test out your ReportViewer. I have a Razor page with the following code:

@page "/"
@using Telerik.ReportViewer.Blazor 
  

<style>
    .trv-report-viewer {
        width: 1300px;
        height: 880px;
    }
</style>

<button type="button" @onclick="LoadReport">Load Report</button>
  
<ReportViewer @ref="reportViewer1"
                ViewerId="rv1"
                ServiceUrl="/api/reports/"
                ScaleMode="@(ScaleMode.Specific)"
                Scale="1.0"
                ViewMode="@(ViewMode.Interactive)"
                EnableAccessibility="true"/> 

@code {
    ReportViewer reportViewer1;
    Dictionary<string, object> parameters;

    private async void LoadReport()
    {
        parameters = new Dictionary<string, object>()
        {
            { "TextboxValue", "My Testvalue" }
        };

        reportViewer1.ReportSource = new ReportSourceOptions()
        {
            Report = "TestReport.trdp",
            Parameters = parameters
        };

        await reportViewer1.RefreshReportAsync();
    }
}

In my project I added a folder "Reports" to the .Server project and created a sample Report called "TestReport.trdp" using the Telerik Report Designer application. For the report I created a parameter named "TextboxValue" which I'm setting in the code above.

I also added this code snippet to my Server's Program.cs:
builder.Services.TryAddSingleton<IReportServiceConfiguration>(sp => new ReportServiceConfiguration
{
	ReportingEngineConfiguration = sp.GetService<IConfiguration>(),
	HostAppId = "ReportingTest.Server",
	Storage = new FileStorage(),
	ReportSourceResolver = new TypeReportSourceResolver().AddFallbackResolver(new UriReportSourceResolver(reportsPath))
});

The application runs ok, no errors. But when I hit the "Load Report" button, it simply shows "No report" in the ReportViewer. Can you guys see what I'm missing or what I'm doing wrong? I uploaded my sample application for you to better see behind my code. Since the file size is bigger than 20MB, I had to upload it to another website where you can download it. See this link: https://we.tl/t-9FKRVgpdmh (the link expires after seven days).

Best Regards,
Roman

1 Answer, 1 is accepted

Sort by
1
Accepted
Dimitar
Telerik team
answered on 15 Feb 2023, 01:49 PM

Hello Roman,

Thank you for the provided information!

It appears that you are using the Blazor Report Viewer Wrapper of the pure HTML5 Report Viewer so in this case, in order to update the ReportSource property of the viewer after it has been initialized, you should use the SetReportSourceAsync method, for example:

    private async void LoadReport()
    {
        parameters = new Dictionary<string, object>()
        {
            { "TextboxValue", "My Testvalue" }
        };

        var rs = new ReportSourceOptions()
            {
                Report = "TestReport.trdp",
                Parameters = parameters
            };

        await reportViewer1.SetReportSourceAsync(rs);
    }

With that being said, I would advise testing our new native Blazor Report ViewerIntegrating Native Blazor Report Viewer in Blazor Server or WebAssembly Application - Telerik Reporting. Just to note, with this viewer you can directly update the ReportSource if it has been bound, for example:

<ReportViewer
    ServiceType="@ReportViewerServiceType.REST"
    ServiceUrl="https://demos.telerik.com/reporting/api/reports"
    @bind-ReportSource="@ReportSource">
</ReportViewer>

@code {

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

 private void LoadReport()
    {
     ReportSource = new ...
    }
}

I hope the provided information will help, please do not hesitate to let me know if you have any further questions.

Regards,
Dimitar
Progress Telerik

Brand new Telerik Reporting course in Virtual Classroom - the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products. Check it out at https://learn.telerik.com/.
Roman
Top achievements
Rank 1
Iron
commented on 15 Feb 2023, 02:47 PM

Hi Dimitar,

Thanks for your answer. Using the SetReportSourceAsync it works like a charm, thank you! I'd definitely look at the native Blazor Report Viewer and try to implement this. One question there; in your example code you use an http source for your ServiceUrl. Is it possible to use the local .Server project from the project itself? Can I just use /api/reports instead of pointing to a Web API? And if yes, how does such an API Controller look like? Can you provide me an example?

Thank you and best Regards,
Roman

Dimitar
Telerik team
commented on 17 Feb 2023, 04:42 PM

Hi Roman, 

Yes, the ServiceUrl can indeed be a simple string like "api/reports" in which case, it will use the URL of the application the viewer is displayed in + the string as a base route for the ReportsController's methods.

It is also possible to use your Server project for the service, I used our Demo url only because it is accessible on the internet and is easy to show examples with it. You may follow the Hosting Reports Service in ASP.NET Core in .NET 6 with Top-Level Statements Explained - Telerik Reporting article to implement the Reporting REST service in your Server project and then, you should be able to type just "api/reports" for your viewer's ServiceUrl property

Roman
Top achievements
Rank 1
Iron
commented on 20 Feb 2023, 07:00 AM

Hi Dimitar,

Great, it works like a charm. One final question. I've found out that I can use my parameter in the report when I set the textbox value to =Parameters.TextboxValue. Is this the only & correct way to set dynamic values in the report? Or are there any others, maybe better ways?

Best Regards,
Roman

Dimitar
Telerik team
commented on 22 Feb 2023, 03:32 PM

Hi Roman,

This is indeed the intended way to pass dynamic values from outside the report, through report parameters.

There are also other approaches, such as custom resolvers - How to use Custom Report Source Resolver and Custom Report Document Resolver - Telerik Reporting, but the intended way is via report parameters and I recommend sticking to that approach.

If you run into any issues while working on the reports, please do not hesitate to reach out, I would be glad to help if I can.

Roman
Top achievements
Rank 1
Iron
commented on 22 Feb 2023, 06:13 PM

Hi Dimitar,

Okay, good to know. Thank you so much for your help :)

Best Regards,
Roman

Tags
Report Viewer - Blazor
Asked by
Roman
Top achievements
Rank 1
Iron
Answers by
Dimitar
Telerik team
Share this question
or