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" } }
}
};
}