Blazor native viewer - All reports take > 10s to render

2 Answers 89 Views

Report Viewer - Blazor

Richard asked on 20 Aug 2024, 12:17 PM | edited on 21 Aug 2024, 08:16 AM

I'm using Q32024 (Trial) in a Blazor Server App, added after initial project creation (existing app, not using the "create Telerik app" wizard)

I have a VERY simple page with just a native report viewer (added via Add new Blazor Component -> Telerik Native Report Viewer Page) pointed to the SampleReport generated when adding this page.

When rendering the page, the report takes over 10s to show. (I'm able to provide a video of this). Any other report has the same issue, both with and without parameters. Subsequent loads are a little bit quicker, but still C5s

Looking in Output, it looks like it's attempting to repeatedly render the report - I have the following block repeated several times (Snipped for brevity, more available);

icrosoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Debug: Completing batch 32 without error in 32.2212ms.
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 154 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 155 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 156 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 157 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.SignalR.Internal.DefaultHubDispatcher: Trace: InvocationId (null): Sending result of type 'System.Void'.
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 158 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 159 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 160 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 161 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 162 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 163 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 164 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 165 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 166 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 167 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 168 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 169 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 170 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 171 of type Telerik.Blazor.Components.ToolBar.ToolBarToolsFactory
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 118 of type Telerik.Blazor.Components.Common.Popup
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 126 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 127 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 128 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 129 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 130 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 131 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 132 of type Telerik.Blazor.Components.ToolBarTemplateItem
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 133 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 134 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 135 of type Telerik.Blazor.Components.ToolBarToggleButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 136 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 137 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 138 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 139 of type Telerik.Blazor.Components.ToolBarToggleButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 140 of type Telerik.Blazor.Components.ToolBarToggleButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 141 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 142 of type Telerik.Blazor.Components.ToolBarButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 143 of type Telerik.Blazor.Components.ToolBarToggleButton
Microsoft.AspNetCore.Components.RenderTree.Renderer: Debug: Rendering component 144 of type Telerik.Blazor.Components.ToolBarToggleButton

Anyone have any ideas as to why it's doing this or why it's SO slow - as it stands it's unacceptable for me to use, but I'm happy for someone to point out where I may have gone wrong / something I may have missed....

<EDIT>

Looking at the code that's been added by the add item wizard, it's correctly (?) added the TelerikRootComponent to my main layout page, but I also needed to wrap the whole Viewer in ANOTHER root component otherwise I'm seeing an error that no root component is present.

Also, and not sure if this is significant, the Sample Report actually states that

"This is a sample report to demonstrate a working HTML5 Report Viewer and REST Reporting Service with XML report definition (trdx). The report definition is created with the Standalone Report Designer" - I understand that the Blazor native viewer is built on top of the HTML5 viewer, but this seemed odd (doubly since it wasn't actually created by the standalone designer but I guess that's the "original" source of the report!

I've also noticed that despite the fact I've set @bind-ParametersAreaVisble to a false value, it still shows (sample report has a date param), even though I'm specifying the parameter;

public ReportSourceOptions ReportSource { get; set; } = new ReportSourceOptions { Report = "sampleReport.trdp", Parameters = new Dictionary<string, object>
{
{"Date", DateTime.Today}
}};

I've also tried passing as a simple string in the format "12/08/2024" - interestingly, in both cases, the value I specify for the parameter is actually shown in the parameter editor

</EDIT>

2 Answers, 1 is accepted

Accepted

answered on 23 Aug 2024, 08:27 AM

Hello Richard,

Thank you for the provided information!

The shared snippet seems to be from when the project is trying to load the report toolbar and its buttons. It is expected behavior. Generally, the loading of the report viewer component itself is not slow, the thing that is taking most of the 10 seconds is likely the processing and rendering of the report which is done on the server side.

In order to check how much the processing and rendering takes, you may have a look at the Output Window in Visual Studio while the report is loading. You may also have a look at the Understanding the Report Lifecycle - Telerik Reporting article for details on what happens in those two stages.

The "Sample" report should not take this long to render(10s) and looking at the output should give us a clue which stage is taking most of the time.

Regarding the parameters area visibility, indeed, that binding does not work when the report viewer is being initialized, this is a known issue - The DocumentMapVisible/ParametersAreaVisible values set during the initialization of the viewer are not respected (telerik.com).

To work around it, you may use the OnRenderingBegin event of the report viewer to change the visibility, for example:

<ReportViewer @ref=rv1 ServiceUrl="/api/reports"
    @bind-ReportSource="@ReportSource"
    @bind-ParametersAreaVisible="@ParametersAreaVisible"
    PageMode="@PageMode.ContinuousScroll"
    OnRenderingBegin="@RenderingBegin"
    ServiceType="@ReportViewerServiceType.REST"
    Height="800px"
    Width="100%">
</ReportViewer>

@code {
    public bool ParametersAreaVisible { get; set; }
    ReportViewer rv1 { get; set; }
    public ReportSourceOptions ReportSource { get; set; } = new ReportSourceOptions("Dashboard.trdp", new Dictionary<string, object>
    { });
  
  void RenderingBegin(RenderingBeginEventArgs args)
    {
        this.ParametersAreaVisible = ...;
    }
}

For more information on how to use that report viewer's events, you may refer to the Native Blazor Report Viewer Events - Telerik Reporting article.

I hope that the provided information will help.

Regards,
Dimitar
Progress Telerik

Stay tuned by visiting our roadmap and feedback portal pages, enjoy a smooth take-off with our Getting Started resources, or visit the free self-paced technical training at https://learn.telerik.com/.