Synchronized scrolling on Native Blazor Report Viewer

[Ahmad Josef]

Hello Community,

On the Native Blazor Report Viewer Overview page, it is written that the current release of the Native Blazor Report Viewer component is missing the Event Binding functionality. We have software depending on events, specifically ClientEvents. Therefore, we haven't upgraded from the Blazor Report Viewer.

In Blazor Report Viewer we were able use ClientEvents to trigger javascript / typescript:

 <ReportViewer @ref="reportViewer"
               ViewerId="rv"
               ServiceUrl="/api/reports"
               ReportSource="@ReportSourceOptions()"
               ClientEvents="@(new ClientEventsOptions()
                 {
                     RenderingEnd = "reportViewerRenderingEnd" // JS Function
                 })"
 />

ClientEvents made it possible for us to synchronize scrolling in our GUI:



In our GUI, we have two sides. Left side contains of multiple rows of textboxes, and right side contains the report. We then use the JS "reportViewerRenderingEnd" function to synchronize both sides, using the bookmark-id. 

Anyone who knows if it is possible to synchronize the location of textboxes with the location in report viewer without using the ClientEvents on Native Blazor Report Viewer?

Thank you!

[Momchil]

Hi Ahmad,

If the BookmarkId property of the report items is set to a unique string that can be matched to the text boxes on the left side of the page, the rendered items can be located by their attributes.

The HTML5 rendering sets a "data-bookmark-id" attribute with a value equal to the one specified in the report for bookmarked items so these items can be retrieved using the following JavaScript code.

document.querySelectorAll('[data-bookmark-id]');

The issue with this approach is that the report viewer renders the HTML of the report dynamically as the user scrolls down and not all bookmarks will be returned initially. One way to work around the issue when a bookmark cannot be found for a certain text box is to force the viewer to scroll down so that more of the report's HTML can be rendered and retry searching for the bookmark. 

I hope this helps.

Best Regards,
Momchil
Progress Telerik

[Ahmad Josef]

Hi Momchil,

Thank you for the answer!

We already have a JavaScript Function that ensures to catch the rendered items. The issue is that we do not know how to trigger this JS function. In Blazor Report Viewer, it was possible to use the "ClientEvents" property. Upgrading to Native Blazor Report Viewer, it has not been possible to use "ClientEvents". How do we solve this?

Best regards
Josef

[Momchil]

Hi Ahmad,

I do not think that triggering the function exactly when the rendering has finished without the client events is realistically achievable.

Still, you can try to listen to the AJAX requests sent by the viewer and trigger the function once you see the Get Document Page Request. This request is sent by the viewer once the Get Document Info Request receives a response indicating that some of the report's pages are ready. The page content will not be rendered immediately but, hopefully, this gets you close enough.

If you are interested, the following article provides further information about the communication between the viewer and its REST service.

Telerik Report Viewer and Telerik Reporting REST Service

[Ahmad Josef]

Unfortunately, I don't believe we would like to involve ourselves in the workaround, but perhaps it would be better to wait for the events to be added to the Native Blazor Report Viewer. Do you anticipate this functionality being included?

If so, when do you envisage it will be implemented?

Best Regards
Josef Sahebzadeh

 

[Momchil]

Hi Ahmad,

Yes, we intend to implement the missing functionality to the Native Blazor Report Viewer.

I asked our development team for more details and they confirmed that the main events of the Native Blazor Report Viewer, such as RenderingBegin, RenderingEnd, etc. are planned for the upcoming Q2 release.