Blazor WebReportViever with predefined parameters Issue

[Sergii]

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