Telerik Forums / Reporting

Blazor Server - Client App Reporting

1 Answer 343 Views
Report Viewer - Blazor
arkan
Top achievements
Rank 2
Iron
arkan asked on 17 Jan 2023, 01:16 AM

Hi all

this is my first time use telerik reporting with blazor

I have an test App

With Blazor Server App and BlazorWebAssembly as Client 

i add 



<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />

 <script src="_content/Telerik.ReportViewer.Blazor/interop.js" defer></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   
    <script src="/api/reports/resources/js/telerikReportViewer"></script>

in wwwroot index in BlazorWebAssembly  

then add a trdp file in BlazorWebAssembly  app with sqldatasource 

then 


@page "/"
@using Telerik.ReportViewer.Blazor
<style>
    #rv1 {
        position: relative;
        width: 1200px;
        height: 600px;
    }
</style>
<ReportViewer ViewerId="rv1"
              ServiceUrl="/api/reports"
              ReportSource="@(new ReportSourceOptions()
                              {
                                    Report = "inv1.trdp"
                              })"
              Parameters="@(new ParametersOptions { Editors = new EditorsOptions { MultiSelect = EditorType.ComboBox, SingleSelect = EditorType.ComboBox } })"
              ScaleMode="@(ScaleMode.Specific)"
              Scale="1.0" />

in BlazorWebAssembly   

first do i have any mestak ?

i have some error 


Debugging hotkey: Shift+Alt+D (when application has focus)
blazor.webassembly.js:1 blazor Loaded 8.85 MB resourcesThis application was built with linking (tree shaking) disabled. Published applications will be significantly smaller.
blazor.webassembly.js:1 
        
       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:44398/_content/Telerik.ReportViewer.Blazor/interop.js:8:26)
          at https://localhost:44398/_framework/blazor.webassembly.js:1:3942
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:44398/_framework/blazor.webassembly.js:1:3908)
          at Object.w [as invokeJSFromDotNet] (https://localhost:44398/_framework/blazor.webassembly.js:1:64232)
          at _mono_wasm_invoke_js_blazor (https://localhost:44398/_framework/dotnet.5.0.17.js:1:190800)
          at do_icall (wasm://wasm/00aba242:wasm-function[10596]:0x194e4e)
          at do_icall_wrapper (wasm://wasm/00aba242:wasm-function[3305]:0x79df9)
          at interp_exec_method (wasm://wasm/00aba242:wasm-function[2155]:0x44ad3)
          at interp_runtime_invoke (wasm://wasm/00aba242:wasm-function[7862]:0x12efff)
Microsoft.JSInterop.JSException: $(...).telerik_ReportViewer is not a function
TypeError: $(...).telerik_ReportViewer is not a function
    at Object.createReportViewerWidget (https://localhost:44398/_content/Telerik.ReportViewer.Blazor/interop.js:8:26)
    at https://localhost:44398/_framework/blazor.webassembly.js:1:3942
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:44398/_framework/blazor.webassembly.js:1:3908)
    at Object.w [as invokeJSFromDotNet] (https://localhost:44398/_framework/blazor.webassembly.js:1:64232)
    at _mono_wasm_invoke_js_blazor (https://localhost:44398/_framework/dotnet.5.0.17.js:1:190800)
    at do_icall (wasm://wasm/00aba242:wasm-function[10596]:0x194e4e)
    at do_icall_wrapper (wasm://wasm/00aba242:wasm-function[3305]:0x79df9)
    at interp_exec_method (wasm://wasm/00aba242:wasm-function[2155]:0x44ad3)
    at interp_runtime_invoke (wasm://wasm/00aba242:wasm-function[7862]:0x12efff)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__15`1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
d.printErr @ blazor.webassembly.js:1
d.preRun.push.window.Blazor._internal.dotNetCriticalError @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.17.js:1
$do_icall @ 00aba242:0x194e4e
$do_icall_wrapper @ 00aba242:0x79df9
$interp_exec_method @ 00aba242:0x44ad3
$interp_runtime_invoke @ 00aba242:0x12efff
$mono_jit_runtime_invoke @ 00aba242:0x118e5f
$do_runtime_invoke @ 00aba242:0x79d42
$mono_runtime_try_invoke @ 00aba242:0x12982
$mono_runtime_invoke @ 00aba242:0x10ec2b
$mono_wasm_invoke_method @ 00aba242:0x108e48
Module._mono_wasm_invoke_method @ dotnet.5.0.17.js:1
call_method @ dotnet.5.0.17.js:1
(anonymous) @ dotnet.5.0.17.js:1
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.17.js:1
$do_icall @ 00aba242:0x194e4e
$do_icall_wrapper @ 00aba242:0x79df9
$interp_exec_method @ 00aba242:0x44ad3
$interp_runtime_invoke @ 00aba242:0x12efff
$mono_jit_runtime_invoke @ 00aba242:0x118e5f
$do_runtime_invoke @ 00aba242:0x79d42
$mono_runtime_try_invoke @ 00aba242:0x12982
$mono_runtime_invoke @ 00aba242:0x10ec2b
$mono_wasm_invoke_method @ 00aba242:0x108e48
Module._mono_wasm_invoke_method @ dotnet.5.0.17.js:1
call_method @ dotnet.5.0.17.js:1
set_task_result @ dotnet.5.0.17.js:1
(anonymous) @ dotnet.5.0.17.js:1
Promise.then (async)
js_to_mono_obj @ dotnet.5.0.17.js:1
d.preRun.push.window.Blazor._internal.getSatelliteAssemblies @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.17.js:1
$do_icall @ 00aba242:0x194e4e
$do_icall_wrapper @ 00aba242:0x79df9
$interp_exec_method @ 00aba242:0x44ad3
$interp_runtime_invoke @ 00aba242:0x12efff
$mono_jit_runtime_invoke @ 00aba242:0x118e5f
$do_runtime_invoke @ 00aba242:0x79d42
$mono_runtime_invoke_checked @ 00aba242:0xf65d
$mono_runtime_try_invoke_array @ 00aba242:0x10e831
$ves_icall_InternalInvoke @ 00aba242:0xed492
$ves_icall_InternalInvoke_raw @ 00aba242:0xecf57
$do_icall @ 00aba242:0x194ddb
$do_icall_wrapper @ 00aba242:0x79df9
$interp_exec_method @ 00aba242:0x44ad3
$interp_runtime_invoke @ 00aba242:0x12efff
$mono_jit_runtime_invoke @ 00aba242:0x118e5f
$do_runtime_invoke @ 00aba242:0x79d42
$mono_runtime_try_invoke @ 00aba242:0x12982
$mono_runtime_invoke @ 00aba242:0x10ec2b
$mono_wasm_invoke_method @ 00aba242:0x108e48
Module._mono_wasm_invoke_method @ dotnet.5.0.17.js:1
call_method @ dotnet.5.0.17.js:1
(anonymous) @ dotnet.5.0.17.js:1
callEntryPoint @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
a @ blazor.webassembly.js:1
Promise.then (async)
u @ blazor.webassembly.js:1
a @ blazor.webassembly.js:1
Promise.then (async)
u @ blazor.webassembly.js:1
a @ blazor.webassembly.js:1
Promise.then (async)
u @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
r @ blazor.webassembly.js:1
g @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
n @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1

 

regards

arkan
Top achievements
Rank 2
Iron
commented on 18 Jan 2023, 04:24 AM

I edit my code like this


<ReportViewer ViewerId="rv1"
              @ref="reportViewer1"
              ServiceUrl="/api/reports"
              PageMode="@PageMode.SinglePage"
              ReportSource="@(new ReportSourceOptions()
                {
                    Report = "inv1.trdp"
               })"
              ScaleMode="@ScaleMode.Specific"
              Scale="1.2" />

and in code section


async Task setpara(string value)
    {
        ReportSourceOptions rso = new ReportSourceOptions();
        rso.Report = "inv1.trdp";
        
        rso.Parameters["Id"] = value;
        await reportViewer1.SetReportSourceAsync(rso);
    }


 


protected override async Task OnInitializedAsync()
    {
       
        await setpara("C230100006");
        
    }

it's work fine without add parameter but i need to set parameter 

i got this error 


crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
   at BlazorApp3.Client.Pages.ReportViewerPage.setpara(String value) in C:\Users\ARKAN\source\repos\BlazorApp3\Client\Pages\ReportViewerPage.razor:line 76
   at BlazorApp3.Client.Pages.ReportViewerPage.OnInitializedAsync() in C:\Users\ARKAN\source\repos\BlazorApp3\Client\Pages\ReportViewerPage.razor:line 57
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

please help

regards

1 Answer, 1 is accepted

Sort by
0
Accepted
arkan
Top achievements
Rank 2
Iron
answered on 18 Jan 2023, 05:38 AM

Finally i solved my matter 

i just added Delay before call the method in OnInitializedAsync() just like this


protected override async Task OnInitializedAsync()
    {
       await Task.Delay (100);
       
        await setpara("C230100006");
        
    }

 

Tags
Report Viewer - Blazor
Asked by
arkan
Top achievements
Rank 2
Iron
Answers by
arkan
Top achievements
Rank 2
Iron
Share this question
or