Report Viewer and Web Designer in Blazor

[eliyahu]

It is announced that the new release Telerik R1 2020 includes a new report viewer control for Blazor applications. 

2 questions:

1) Is it possible to see a demo? I couldn't find one on the telerik site.

2) Will the Web report designer work in Blazor?

[Andrew]

A working example would be nice, open up the CSharp examples from Telerik Reporting R1 2020 and the Blazor does not work, states I need a rest api, so I don't even see the viewer on my Balzor page!

It would be nice if you could produce fully working examples without the need for us to investigate.

[Neli]

Hello Eliyahu and Andrew,

@eliyahu

1) You can find an example at the installation folder of Telerik Reporting

C:\Program Files (x86)\Progress\Telerik Reporting <Version>\Examples\CSharp - Blazor HTML5Demo 

2) Currently, we are experiencing some problems with the integration of our Web Report Designer in Blazor application. As soon as we find a solution, we will post an update.

@Andrew

Can you send us screenshots of the errors? 

Regards,
Neli
Progress Telerik

[Lonwabo]

@Neli Any news on integrating Telerik Report Designer with Blazor?

[Peter]

Hi,

The Web Report Designer is a Kendo jQuery widget that can be embedded in a Blazor application. Check out this GitHub repo with an example. The example requires the latest Telerik Reporting release R2 2020. Just have in mind the following two known issues:

• SqlDataSource is throwing errors due to broken APIs in .NET Standard 2.0, this requires special .NET Core 3 build that will be available with the next internal build. Here is the public item on the topic. The item status will be updated when the internal build is available.
• Using the Web Report Designer with other Kendo controls may result in UI glitches, this is logged and will be fixed with a next release.

Regards,
Peter
Progress Telerik

[Daniel]

Hello,

the provided example seems to work only for Blazor server side, right? Are there any plans to use the Web Report Designer in Blazor Web Assembly?

Regards,

Daniel

[Neli]

Hello Daniel,

The demo project is a Blazor server-side app. Basically, we plan to develop wrappers of the web report designer to support different technologies. Currently, we don't have an example with WebAssembly but you may test it.

Regards,
Neli
Progress Telerik

[jura]

Hello,

I am developing Blazor based reporting solution.

While doing so, I have found there is some Blazor support, but not yet full:

Report viewer

• Blazor component exists and works (almost)
• It should be enhanced by using Blazor .NET 5 component js/css isolation to simplify its usage instead of requiring to specify global js/css
• Using the viewer with more then one Report Service is not possible due to global js/css
• The viewer does not show embedded report images: there is some ReportController - Engine - Storage problem causing resource not found.

Report designer

• I miss Blazor component
• Should I write one myself to wrap the designer or will You provide one?
• The same points about js/css isollation applies like for the viewer

Thank You

Marek Ištvánek (via JS account)

HaSaM

[Dimitar]

Hello Marek,

I noticed that the same topic was discussed in support ticket #1496716. Please, check my answer on that ticket and if you have any questions I would suggest to continue our communication there.

Regards, Dimitar Progress Telerik

[jura]

Just for reference, I have added feature requests:

• https://feedback.telerik.com/reporting/1497170-blazor-reportviewer-js-css-isolation
• https://feedback.telerik.com/reporting/1497173-blazor-reportdesigner-with-js-css-isolation
  
  Marek

[Tuan]

Hi all,

Does anyone run the demo in C:\Program Files (x86)\Progress\Telerik Reporting R1 2021\Examples\CSharp\.NET 5\BlazorIntegrationDemo  successfully ? I try build, this is OK but when run, the report can not load and  have error as following :

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Could not find 'telerikReportViewerInterop.createReportViewerWidget' ('telerikReportViewerInterop' was undefined).
Error: Could not find 'telerikReportViewerInterop.createReportViewerWidget' ('telerikReportViewerInterop' was undefined).
    at http://localhost:57336/_framework/blazor.server.js:1:67390
    at Array.forEach (<anonymous>)
    at e.findFunction (http://localhost:57336/_framework/blazor.server.js:1:67350)
    at v (http://localhost:57336/_framework/blazor.server.js:1:69092)
    at http://localhost:57336/_framework/blazor.server.js:1:70038
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (http://localhost:57336/_framework/blazor.server.js:1:70011)
    at http://localhost:57336/_framework/blazor.server.js:1:26293
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (http://localhost:57336/_framework/blazor.server.js:1:26263)

Pls help !

[Dimitar]

Hello Tuan,

The demo runs successfully on my end, have you made any changes to it? 

I just checked the reference to the interop file and noticed that in our demo it is slightly different from the example in How to Use Blazor Report Viewer. In the article, we use capital letters after each dot(.) for the name, and that is the way that it should be referenced under Linux, so if you happen to be running Linux try editing the reference to use capital letters. This shouldn't matter under Windows.

<script src="_content/Telerik.ReportViewer.Blazor/interop.js" defer></script>

@* Or this one if using the Telerik.ReportViewer.Blazor.Trial package *@
@*<script src="_content/Telerik.ReportViewer.Blazor.Trial/interop.js" defer></script>*@

If that doesn't help, you might try attaching a trace listener to the application - Troubleshooting reporting implementation into ASP.NET Core application.

You may also use Fiddler Jam to generate a network log and share it with us.

I look forward to receiving an update from you. Thank you for using Telerik Reporting.

Regards,
Dimitar
Progress Telerik