Hi,
below here example page
"...\Telerik Reporting 2025 Q3\Examples\CSharp\.NET 8\BlazorIntegrationDemo\Components\Pages\Home.razor"
changed to have runtime ReportSource setting (in original example it is defined in design-time)
piece below breaks page execution - it doesn't show report
// Business logic - long-running request to db or call of far service await System.Threading.Tasks.Task.Delay(3000); not working page:
@page "/" @rendermode InteractiveServer @using Telerik.ReportViewer.Blazor @inject IJSRuntime JsInterop <link rel="stylesheet" id="TelerikThemeLink" href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css" /> <style> article.content { height: 100%; } #rv1 { height: 84vh; margin-top: 10px; } .trv-report-viewer { width: 100%; height: 880px; } </style> @* Create the ReportViewerWidget *@ <p>This Blazor Report Viewer instance displays reports hosted locally using the Reporting REST service. For more information, visit the <a target="_blank" href="https://docs.telerik.com/reporting/blazor-report-viewer">Blazor Report Viewer</a> article.</p> <button type="button"class="btn btn-light btn-sm" @onclick="RefreshReport">Refresh Report</button> <button type="button"class="btn btn-light btn-sm" @onclick="Print">Print Report</button> <select @onchange="ChangeTheme" id="theme-switcher"> <option selected value="default-ocean-blue">Default Ocean Blue</option> <option value="default-main">Default Main</option> <option value="default-main-dark">Default Main Dark</option> <option value="default-orange">Default Orange</option> <option value="default-nordic">Default Nordic</option> <option value="default-urban">Default Urban</option> <option value="classic-main">Classic Main</option> <option value="classic-main-dark">Classic Main Dark</option> <option value="classic-moonlight">Classic Moonlight</option> <option value="classic-green">Classic Green</option> <option value="classic-lavender">Classic Lavender</option> <option value="classic-silver">Classic Silver</option> <option value="classic-metro">Classic Metro</option> <option value="classic-metro-dark">Classic Metro Dark</option> <option value="bootstrap-main">Bootstrap Main</option> <option value="bootstrap-vintage">Bootstrap Vintage</option> <option value="material-sky">Material Sky</option> <option value="material-aqua-dark">Material Aqua Dark</option> <option value="material-lime">Material Lime</option> <option value="material-lime-dark">Material Lime Dark</option> </select> <ReportViewer @ref="reportViewer1" ViewerId="rv1" ServiceUrl="/api/reports" ReportSource=@ReportSource Parameters="@(new ParametersOptions { Editors = new EditorsOptions { SingleSelect = EditorType.ListView , MultiSelect = EditorType.ListView} })" ScaleMode="@(ScaleMode.Specific)" Scale="1.0" SendEmail=@(new SendEmailOptions { Enabled = true }) ClientEvents="@(new ClientEventsOptions() { ExportBegin = "trvEventHandlers.exportBegin", ExportEnd = "trvEventHandlers.exportEnd" })" /> @code { ReportViewer reportViewer1; ReportSourceOptions ReportSource { get; set; } protected override async Task OnInitializedAsync() { awaitbase.OnInitializedAsync();
// -----------<ISSUE_HERE>---------------
// Business logic - long-running request to db or call of far service
await System.Threading.Tasks.Task.Delay(3000);
// ------------ </ISSUE_HERE>
this.ReportSource = new ReportSourceOptions { Report = "Report Catalog.trdp", Parameters = new Dictionary<string, object>() // set of predefined parameters { { "ProductCategory", "Clothing" }, { "ProductSubcategory", new [] { "Caps", "Gloves" } } } }; } async void RefreshReport() { await reportViewer1.RefreshReportAsync(); } async void Print() { await reportViewer1.Commands.Print.ExecuteAsync(); } async Task ChangeTheme(ChangeEventArgs e) { // Obtain the Kendo CDN Url values from the dropdown selectionstring? themeIdFull = e.Value asstring; if (String.IsNullOrEmpty(themeIdFull)) { return; } int firstDashIndex = themeIdFull.IndexOf("-", StringComparison.Ordinal); string themeIdBase = themeIdFull.Substring(0, firstDashIndex); // Set the URL to the Kendo theme - it can be a relative URL pointing to a local resource or to a custom themestring newThemeCdnUrl = $"https://kendo.cdn.telerik.com/themes/10.2.0/{themeIdBase}/{themeIdFull}.css"; // call the JS interop that will switch out the <link> elementawait JsInterop.InvokeVoidAsync("changeKendoTheme", new[] { newThemeCdnUrl }); } }
<ReportViewer @ref="reportViewer1" ViewerId="rv1" ServiceUrl="/api/reports" ReportSource=@ReportSource Parameters="@(new ParametersOptions { Editors = new EditorsOptions { SingleSelect = EditorType.ListView , MultiSelect = EditorType.ListView} })" ScaleMode="@(ScaleMode.Specific)" Scale="1.0" SendEmail=@(new SendEmailOptions { Enabled = true }) ClientEvents="@(new ClientEventsOptions() { ExportBegin = "trvEventHandlers.exportBegin", ExportEnd = "trvEventHandlers.exportEnd" })" /> @code { ReportViewer reportViewer1; ReportSourceOptions ReportSource { get; set; } protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); // Business logic - long-running request to db or call of far service await System.Threading.Tasks.Task.Delay(3000); this.ReportSource = new ReportSourceOptions { Report = "Report Catalog.trdp", Parameters = new Dictionary<string, object>() // set of predefined parameters { { "ProductCategory", "Clothing" }, { "ProductSubcategory", new [] { "Caps", "Gloves" } } } }; } 1 Answer, 1 is accepted
Hello Sergi,
Thank you for the sample code!
You seem to be using the Blazor Wrapper Report Viewer, which is a wrapper of the jQuery-based HTML5 Report Viewer. It is not a native component, thus it does not interact well with the Blazor component lifecycle events such as "OnInitializedAsync".
By the time that the event is triggered, the report viewer has already started initialized, and since the ReportSource would be null at that time, an empty viewer would be displayed on the page.
To dynamically initialize the report viewer after the ReportSource is ready, you would need to call the SetReportSourceAsync method of the viewer, but that cannot occur during the "OnInitializedAsync" event because the method uses JS behind the scenes to update the viewer's report source, but the event executes during prerendering when the JavaScript interop is not available.
The solution is to move the JavaScript interop-dependent code to "OnAfterRenderAsync" and use the firstRender parameter to ensure it only runs once. For example:
<ReportViewer @ref="reportViewer1" ViewerId="rv1" ServiceUrl="/api/reports" ReportSource="@(ReportSource)"/> @code { ReportViewer reportViewer1; ReportSourceOptions ReportSource { get; set; } private bool _reportSourceSet = false; protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); if (firstRender && !_reportSourceSet) { // Business logic - long-running request to db or call of far service await System.Threading.Tasks.Task.Delay(3000); var reportSoutce = new ReportSourceOptions { Report = "Dashboard.trdp", Parameters = new Dictionary<string, object>() // set of predefined parameters { { "ReportYear", 2001 }, } }; await this.reportViewer1.SetReportSourceAsync(reportSoutce); _reportSourceSet = true; } } ... }Please give this approach a try and let me know how it goes.
Regards,
Dimitar
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.