Blazor WebAssembly example?

[Stefan]

Hi,

is there a working example of Telerik Reporting used in Blazor WebAssembly? I've only found server-side Blazor examples.

Thanks.

[Dimitar]

Hi Stefan,

I have attached a sample Blazor WebAssembly project to my reply, please check it out.

The project uses the Reporting Service used by our Interactive Reporting Demos since Blazor WebAssembly runs only client-side and cannot have its own service.

Please note that our How to Use Blazor Report Viewer article also provides the necessary steps for setting up the viewer in a web assembly application.

If you have any other questions or need further assistance, please let us know.

Regards,
Dimitar
Progress Telerik

[Dan]

an actual working sln would be helpful.  

[Dimitar]

In my tests, the project runs and works as expected, please see the attached video file.

If you are running into any errors/warnings, would you please share them with me? I would be glad to assist in resolving the issue/s.

[Bob Nonnemann]

Thanks for the demo project, for me it does correctly run and work as one would expect.  It also shows that the client side of this looks to be straightforward.

That being said -- After spending several decades working SQL, Services, and (horrors!) Winform applications -- I now find myself recently learning the ropes in the WebAssembly /Blazor world.   That has all gone well, but the number of options in reporting documentation is a bit imposing, and your example is opaque on how the server side works.  So perhaps you can lead me down the learning a curve a bit until I get a bit more understanding.

I have what I believe to be a pretty typical scenario -- a Telerik based Client and a Server that receives web requests and queries SQL and does some calculations, and returns JSON -- and now I need to include a handful of reports.  In reading the documentation, it seems I need to either use Telerik Report Server or host the Report Web Service.  So on to the first newbie question -- can the Report Web Service be hosted as part of my existing server component or does it need to be independently hosted?   Alternatively, is there a demo project that shows the entire process?

 

Thank you!

[Dimitar]

Hello Bob, 

The Reporting Service can indeed be hosted as a part of an existing blazor server component.

You may follow the How to Host Reports Service in ASP.NET Core in .NET 6 with Minimal API article for details on how to host the service.

I have attached a sample project to demonstrate this, in order to run it, please execute the following commands first:

• dotnet restore
• dotnet build

[Bob Nonnemann]

Your sample ran just fine, but I ran into one more issue.  The application I am trying to add reporting to was based on VS 2019 and Telerik 2.X and authenticating against our AAD using scaffolding from the earlier tools.   To get up the most recent tools, I regenerated an AAD authenticated application, insured it worked, then went to merge in the reporting code that you provided.  I took a couple tries, but the reporting page always threw an error of one sort or another.  Due to my inexperience, some of the described fixes were a bit over my head -- so find attached the skeletal AAD authenticating app, and then the same app modified with the reporting page.  The most current reporting version throws the error below.   I have the feeling that I am within just a couple of lines of code that need changing, but have not been able to figured it out the past couple of days -- just chasing my tail, uncertain what I missed or if the authentication is the issue.

 

Thank you!

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: $(...).telerik_ReportViewer is not a function
      TypeError: $(...).telerik_ReportViewer is not a function
          at Object.createReportViewerWidget (https://localhost:7146/_content/Telerik.ReportViewer.Blazor/interop.js:8:26)
          at https://localhost:7146/_framework/blazor.webassembly.js:1:3332
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:7146/_framework/blazor.webassembly.js:1:3306)
          at Object.St [as invokeJSFromDotNet] (https://localhost:7146/_framework/blazor.webassembly.js:1:59938)
          at _mono_wasm_invoke_js_blazor (https://localhost:7146/_framework/dotnet.6.0.7.qy813q6yot.js:1:195300)
          at wasm://wasm/00971e46:wasm-function[219]:0x1a490
          at wasm://wasm/00971e46:wasm-function[167]:0xce5e
          at wasm://wasm/00971e46:wasm-function[166]:0xbd71
          at wasm://wasm/00971e46:wasm-function[2812]:0xabf01
Microsoft.JSInterop.JSException: $(...).telerik_ReportViewer is not a function
TypeError: $(...).telerik_ReportViewer is not a function
    at Object.createReportViewerWidget (https://localhost:7146/_content/Telerik.ReportViewer.Blazor/interop.js:8:26)
    at https://localhost:7146/_framework/blazor.webassembly.js:1:3332
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:7146/_framework/blazor.webassembly.js:1:3306)
    at Object.St [as invokeJSFromDotNet] (https://localhost:7146/_framework/blazor.webassembly.js:1:59938)
    at _mono_wasm_invoke_js_blazor (https://localhost:7146/_framework/dotnet.6.0.7.qy813q6yot.js:1:195300)
    at wasm://wasm/00971e46:wasm-function[219]:0x1a490
    at wasm://wasm/00971e46:wasm-function[167]:0xce5e
    at wasm://wasm/00971e46:wasm-function[166]:0xbd71
    at wasm://wasm/00971e46:wasm-function[2812]:0xabf01
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

 

[Dimitar]

Thank you for the attached files!

The problem is that the telerikReportViewer JS resource is not referenced anywhere in the .Client project. That is why the error is saying that the function for the report viewer is undefined.

The solution is to add a reference to the JS report viewer resource, for example, in wwwroot/index.html of the Client project:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   
 <script src="/api/reports/resources/js/telerikReportViewer"></script>
// modify the route if the server is on another port

Please keep in mind that the JS resource should be loaded after loading Jquery because the telerik_ReportViewer function is created on top of it.