Search not highlighting found text in BlazorNative viewer

[Carl]

I am upgrading my Blazor application to .Net 9 and changing the report viewer from the older Blazor viewer to the new Blazor Native viewer and I have found that when I use the search to find text within a report that the text when found is not highlighted as it was in the previous version.  I've followed the instructions for configuring the viewer and everything else seems to be working correctly.  I'm not receiving any error messages so I don't know if this is just a missing feature not implemented in the newer Native viewer.

 

[Todor]

Hello Carl,

Thank you for the screenshot. Based on it I assume you use the 'Fluent' theme with the Native Blazor Report Viewer.

I tested and have linked a muted video on how our Blazor Native Viewer examples for .NET 9.0 worked locally. I used the Telerik UI for Blazor 6.2.0 widgets we have built the viewer with and then updated the package to the latest Telerik Blazor UI version 7.1.0 to test also with it. I don't see problems with either.

Did you test with our examples? If so, is the problem reproducible?

Can you observe the issue with all themes, or with particular themes only?

Which Telerik Blazor UI version do you use?

Can you send us a project replicating the problem for local investigation?

Regards,
Todor
Progress Telerik

[Carl]

Todor,

Thanks for creating the video to illustrate how the find works and I can run the test example successfully which does not have the issue.

Yes I am using the Fluent theme and I am also using the Telerik.UI.for.Blazor version 7.1.0.

After comparing your sample .Net 9 project I noticed that your project has updated libraries but the project structure and arrangement of pages does not follow the "new" Blazor Web App structure.  As per Microsoft's recommendation to make full use of all the .Net 9 features, I have generated a new project using the Blazor Web App template with just interactive server rendermode and global interactivity location.  In comparing the two, the biggest difference is that your are using the "_framework.blazor.server.js" script in the _Hosts.cshtml file and the new structure uses the "_framework.blazor.web.js" script in the App.razor file.

Do you have a demo that was created using the new Blazor Web App template so that I can verify that it works?

Thanks in advance for your assistance.

Carl 

[Todor]

Hi Carl,

Thank you for clarifying the scenario.

I confirm we support the Blazor Web App. I tested and successfully added the viewer with the Native Report Viewer's Visual Studio template. The template needs some improvements. Currently, you may adjust the viewer manually:

• Add a reference to the Blazor Native Viewer assembly on the page with the viewer: '@using Telerik.ReportViewer.BlazorNative'
• Move the viewer's page to the Pages folder of the project. By default, the page is added to the main project folder and cannot be compiled.

I managed to reproduce the Search issue. Indeed, it doesn't always highlight the matched text in the report.

The problem occurs when the corresponding report item/section has a background style in the Report definition, which overrides the highlight style set by the viewer's Search functionality. The workaround is to add the highlighting styles in the page with the viewer, for example, as below:

<style>
    .trv-report-viewer-wrapper .trv-search-dialog-highlighted-result {
        background-color: rgba(0, 35, 102, 0.3);
        color: #fff;
        background-image: none;
    }

    .trv-report-viewer-wrapper .trv-search-dialog-shaded-result {
        background-color: rgba(255, 140, 0, 0.3);
    }
</style>

I have logged the problem into our public feedback portal and voted on your behalf - Search in Web Report Viewers doesn't highlight items with a background set in the report definition. As a token of gratitude I updated your Telerik points.