Report Server & Viewer version mismatch

0 Answers 198 Views
Programming Report Viewer - Blazor
Bob Nonnemann
Top achievements
Rank 1
Bob Nonnemann asked on 01 Aug 2024, 09:10 PM

Have been making some changes and updates to an existing Blazor web assembly project, and I have most things fixed/resolved regarding the reporting.   However, I get the following when trying to actually display a report:

 

"The version of the Report Viewer '18.1.24.606' does not match the version of the Reporting REST Service '18.1.24.709'. Please make sure both are running same version"

 

The dependencies in the projects all show Telerik Packages with version 18.1.24.709... so clearly I am overlooking something.  Clean & Rebuild does not help -- what am I overlooking.

 

Thanks.

 

Thanks in advance.

 

 

 

Lance | Senior Manager Technical Support
Telerik team
commented on 01 Aug 2024, 10:00 PM

Hi Bob, this is indeed strange, there is no v18.1.24.606 version.

However, back in 2023, there was a "606" version (17.1.23.606). Can you check that the JavaScript resources being used for the ReportViewer are up to date and being loaded form the expected location (for WASM, it would be in wwwroot/index.html)?

It's not just the .NET packages that are responsible for the viewer, the client-side code comes from the js & CSS resources. See this section for quick guidance https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer#adding-the-blazor-report-viewer-component-manually 

 

Bob Nonnemann
Top achievements
Rank 1
commented on 02 Aug 2024, 06:12 PM

 

I have taken a quick pass through the documentation and am still missing something -- I am not particularly literate when it comes to the javascript and css -- I kind of rely on the Telerik controls to insulate me from those messy details.   Below is a cut/paste from the index.html

 

Thanks again for your insights.

 

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CropSim</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="CropSim.Client.styles.css" rel="stylesheet" />

    <!--
        Below are the newly added
    -->
    <!--<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" /> -->
    <!--<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" /> -->
    <!-- <link href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.common.min.css" rel="stylesheet" /> -->
    <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-main.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://demos.telerik.com/report-server/api/reports/resources/js/telerikReportViewer"></script>

    <!-- Documentation indicates this is for the case of the service hosted in the same project-->
    <!--<script src="/api/reports/resources/js/telerikReportViewer"></script>-->

    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>

</head>

<body>
    <app id="app">Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

    <!-- per https://docs.telerik.com/blazor-ui/getting-started/what-you-need?utm_source=vs -->

    <script src="_framework/blazor.webassembly.js"></script>-->
    <!--<script src="site.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            Blazor.start();
        });
    </script> -->
    <script src="_content/Telerik.ReportViewer.Blazor/interop.js" defer></script>
</body>

 </html>
Lance | Senior Manager Technical Support
Telerik team
commented on 02 Aug 2024, 08:09 PM

Hi Bob,

Where is your Telerik Reporting REST API being hosted?

  • In this same Blazor project?
  • Another ASP.NET project with the Reporting REST service?
  • A separate Telerik Report Server installation?

This is important because it is where the root URL will be for this resource:

<script src="THIS_NEEDS_TO_BE_THE_HOST/api/reports/resources/js/telerikReportViewer"></script>

Wherever the REST service is, is where you need to update this part of the URL... this where the mismatch is happening. the ReportViewer is seeing that is so that the ReportViewer is using the same version as the REST service (the crux of the error message).

If you used the demos.telerik.com/report-server URL for your viewer's assets, you will get that error because we use a different version for it.

This is what I expect your project would look like if it is hosting the REST service:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CropSim</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="CropSim.Client.styles.css" rel="stylesheet" />

    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
    <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
    <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-main.min.css" rel="stylesheet" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script src="/api/reports/resources/js/telerikReportViewer"></script>

    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
</head>

<body>
    <app id="app">Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>-->
    <!--<script src="site.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            Blazor.start();
        });
    </script> -->
    <script src="_content/Telerik.ReportViewer.Blazor/interop.js" defer></script>
</body>

</html>

 

If this the case, you might just have cached files from the old version in there. I still don't understand why it is using a 2024 ".606" version that has never existed, this might just be some sort of concatenation error and it really meant to show 2022's ".606" version (606 just means June 6th)

Official Example

If you go to C:\Program Files (x86)\Progress\Telerik Reporting 2024 Q2\Examples\CSharp\.NET 8\BlazorIntegrationDemo, you will find a complete project with everything already wired up. You can use this for reference.

Note that it is not a WASM project, so you need to look at ./Components/App.razor for the HTML head:

Next Steps

If you continue to have problems, I recommend opening a Support Ticket with the teams so that you can talk directly to the Reporting team members responsible for the non-native Blazor Report Viewer. You can use my short link to skip right to the form => https://prgress.co/DevToolsSupport 

The forums do not provide you with an SLO like support does, and you have the best support package available (24hr priority support). Additionally, in a Support ticket, you can attach your project and the team can check the code directly.

If this issue does turn out to be something that is beneficial for the forums community, we can always come back here and share the outcome.

No answers yet. Maybe you can help?

Tags
Programming Report Viewer - Blazor
Asked by
Bob Nonnemann
Top achievements
Rank 1
Share this question
or